I'm trying to create page where the user can add & delete "soliders".
I'm looking for something like this:
[Text-box][Delete]
[Text-box][Delete]
[Add-Solider]
And I want it to support mysql, so the user can change the values later.
I've been searching, but i can't seem to find any with mysql-support.
It should also have a max-amount.
Have any of you dealt with something similar before? I would greatly appreciate any help!
I give here an example for Add and Remove elements.
<html>
<head>
<title>Add Element</title>
<script language="javascript">
this.num = 1;
function addElement(){
$top = document.getElementById('top');
newId = document.createElement('div');
id = 'my'+this.num;
newId.setAttribute('id', id );
newId.innerHTML = "<a href='javascript:void(0); ' onclick='removedThis( "+id +")' >Added Element"+id+"</a>";
$top.appendChild(newId);
this.num++;
}
function removedThis( id ){
var d = document.getElementById('top');
d.removeChild(id);
}
</script>
</head>
<body>
<input type="button" name="button" value="Add Element" onclick="addElement()" />
<div id="top" ></div>
</body>
</html>
Reference: javascript/php/mysal
I give here an example of jQuery. Then you can save <div id="boxes"> into mysql and induce again.
jQuery
<script type="text/javascript">
$(function () {
$("#add_new").click(function () {
var box = $("<div>[Text-box]<a class=\"del\" href=\"javascript:void;\">[Delete]</a></div>");
$("#boxes").append(box);
$(box).find(".del").click(function () {
$(box).remove();
});
});
});
</script>
HTML:
<div id="boxes"></div>
<button id="add_new">[Add-Solider]</button>
Related
I have a list of drop down.on click of button i am call one function.In this i need all the values which I selected how i can do this
The following is my code
HTML
<html ng-app="myapp">
<head>
<script src="angular/angular.js"></script>
</head>
<body>
<div ng-app ng-controller="MyCtrl">
<select class="form-control" ng-model="firstType" ng-change="onRegionChange(firstType)" ng-options="item.id as item.name for item in items">
</select>
<input type="submit" ng-click='resultView()'/>
</div>
</body>
</html>
script
<script>
var myapp = angular.module('myapp', []);
myapp.controller('MyCtrl', function ($scope,$http)
{
$scope.Data = {};
$scope.items = [{id:1, name:'First'}, {id:2, name:'Second'}, {id:3, name:'Third'}];
$scope.onRegionChange = function(firstType)
{
console.log(firstType);
}
$scope.resultView = function()
{
console.log(firstType);
}
});
</script>
Any advice or help is much appreciated.
while clicking the button its showing error in console
Thank you
this is the error screen shot
You can just add a parameter to resultView function. Like this:
<input type="submit" ng-click='resultView(firstType)'/>
And add here too.
$scope.resultView = function(firstType)
{
console.log(firstType);
}
$scope.resultView = function(firstType)
{
console.log(this.firstType);
}
just you have to add 'this.firstType' then its working after a long day I found out this
I've searched on internet but I just can't seem to figure this out.
I got this Jquery function which I want to call in my php/html page. I'm an absolute noob when it comes to Jquery.
!function( $ ){
var Keyboard = function ( element, options ) {
this.$element = $(element)
this.options = options
if (this.options.display) {
this.$keyboard = $('<div class="keyboard"><input type="text" class="input-keyboard"></div>').appendTo('body')
} else {
this.$keyboard = $('<div class="keyboard"></div>').appendTo('body')
}
this.$biginput = this.$keyboard.find('.input-keyboard')
this.wait_timer = null
this.init()
this.listen()
}
}
How can I call this function in a div or button?
<body>
<button id="testKeyboard">Test open keyboard</button>
</body>
<script>
$(document).ready(function(){
$("#testKeyboard").keyboard();
});
</script>
Without knowing this plugin, i would say something like this:
$(document).ready(function(){
$("div, button").keyboard();
});
with ID:
$(document).ready(function(){
$("#button_id").keyboard();
});
your php/html file, needs also the jQuery Library in the head part...
For example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="yourKeybordPlugin.js"></script>
maybe an other version. It should be before the plugin script...
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="yourKeybordPlugin.js"></script>
</head>
<body>
<button id="testKeyboard">Test open keyboard</button>
<script>
$(document).ready(function(){
$("#testKeyboard").keyboard();
});
</script>
</body>
Call like this from your php file,
<script type = "text/javascript">
$(window).keyboard();
</script>
Check now on JSfiddle, included Jquery plugin and added that in head section from the option.
You can see the console.log firing.
http://jsfiddle.net/7ttq2gf0/2/
i m creating dynamic text box on onclick event the code is running properly text box are created but the problem is when i create new text box and fill the some value on the first text values are store properly and again create the new text box that time first text box value are automatically delete or null i m trying to solve this error but not getting answer properly please help me....
<html>
<head>
<title>Dynamic Form</title>
<script language="javascript" type="text/javascript" >
function changeIt()
{
createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >"
}
</script>
</head>
<body>
<form name="form">
<input type="button" value="clickHere" onClick="changeIt()">
<div id="createTextbox"></div>
</form>
</body>
</html>
Please try this,
<script type="text/javascript" language="javascript">
function changeIt() {
var divTag = document.createElement("input");
document.body.appendChild(divTag);
}
</script>
<input type="button" value="Create"
onclick="changeIt();" />
createTextbox is not explicitly available. You'll have to get it by using document.getElementById. Like this...
var createTextbox = document.getElementById("createTextbox");
createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >";
By using createTextbox.innerHTML =, you replace the current content of the div.
Use the appendChild function to solve it, here is one example:
function addInput(){
//get the div element
var d = document.getElementById('myDiv');
//create an input element
var i = document.createElement("input");
//add it to the div
d.appendChild(i);
}
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink()
{
document.getElementById('createTB').innerHTML="<input type='text' />";
}
</script>
</head>
<body>
<div id="createTB"></div>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>
I'm very new to PHP, so bear with my ignorance. I've got the following script that searches an excel sheet for cell data (it's a really basic company phonebook):
<html>
<?php echo "Search:" ?>
<form id="form1" method="post" action ="<?php echo $_SERVER['PHP_SELF']; ?>"> <label>
<input id="search" name="search" type="text" />
</label>
<label>
<input type="submit" />
</label>
<img src="loading.gif" width="16" height="11" />
</form>
<input type="reset" value="Reset">
<?php
$search= $_REQUEST['search'];
if ($search > ''){ $search = $search;} else { $search = '';}
?>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/pub?key=0Ap2dozrbYI5vdEV5ZmtzU3hCdktzWDU0NTdOQjRSNkE&single=true&gid=0&output=html');
query.setQuery('SELECT A, B, C, D where upper(A) like upper("%<?php echo $search; ?>%") or upper(B) like upper("%<?php echo $search; ?>%") order by A asc label A "Company", B "Contact Name", C "Contact Number", D "Company General Contact"');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {legend: 'bottom'});
}
google.setOnLoadCallback(drawVisualization);
</script>
<div id="table"></div>
</div>
</html>
When no text is entered and the user clicks submit, the view resets to show the complete excel sheet. I'd like to add a reset button that functions the same way (it makes more sense to the user to have an actual "reset" button.
Edit: Just a note that I'm not trying to simply clear the search input. Essentially, I'd like to replicate what the submit button does when a blank search is performed (which is display all the data).
Add this line to your html form:
<input type="reset" value="Reset">
There are a number of issues here that need to be addressed. I've cleaned out some of the code you posted but I didn't want to totally rewrite everything you did. It looks like you might have copied and pasted a couple examples you found on the web into one project. It really helps if you review what a script does before you put it into production. Doing so will help you with some of these issues. For instance, in one line you check a variable to see if it is greater than empty string. You then assign it to itself if it is and you assign it to empty string if it is empty. Basically, that line does nothing. Read through your code so you know what it does.
In the end, I figured out that you didn't really need PHP for anything. You are simply using it to post back to the server and reload the page. Since you are using JavaScript to actually load your information, I decided to do everything in JavaScript. It makes the page simpler and it prevents unnecessary postbacks. I also formatted your code a bit and cleaned it up some. However, this still needs to be further refined and cleaned up. I just got it to a working state:
<html>
<body>
<input id="search" name="search" type="text" />
<button id="submitQuery">Submit Query</button>
<button id="resetQuery">Reset Query</button>
<div id="table"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['table'] });
var visualization;
var searchTerm = '';
function drawVisualization() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/pub?key=0Ap2dozrbYI5vdEV5ZmtzU3hCdktzWDU0NTdOQjRSNkE&single=true&gid=0&output=html');
query.setQuery('SELECT A, B, C, D where upper(A) like upper("%' + searchTerm + '%") or upper(B) like upper("%' + searchTerm + '%") order by A asc label A "Company", B "Contact Name", C "Contact Number", D "Company General Contact"');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, { legend: 'bottom' });
}
google.setOnLoadCallback(drawVisualization);
$(function () {
$('#submitQuery').click(function (e) {
searchTerm = $('#search').val();
drawVisualization();
return false;
});
$('#resetQuery').click(function (e) {
$('#search').val('');
searchTerm = '';
drawVisualization();
return false;
});
});
</script>
</body>
</html>
Instead of using buttons in a form to do a postback, I made the buttons fill in the variable appropriately and call the function to draw the visualization. I did draw in jQuery to make things a bit easier (note the call to the CDN for it). That made the code cleaner and easier to use. You don't have to do it that way but you will need to rework my code if you take it out.
Let me know if you have any questions. As it stands now, this code should do exactly what you want it to do.
while entering the data in the textfield on the browser, it should fetch the data from the database and display accordingly. (ex: like google).
Here is my php code:
<?php
mysql_connect("localhost","root","MobixMySQL") or die(mysql_error());
mysql_select_db("filter") or die(mysql_error());
$partialStates = $_POST['partialStates'];
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE "%$partialStates%"");
while($state = mysql_fetch_assoc($states)) {
echo "<div>".$state['name']."</div>";
}
?>
And below is my html code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function getStates(value){
$.post("getStates.php",{partialStates:value},function(data){
$("#results").html(data);
});
}
</script>
</head>
<body>
<input type="text" onKeyUp="getStates(this.value)" >
<div id="results"></div>
</body>
</html>
Pls suggest me where am wrong....!!!
Error with your quotes in the SQL...along with injection. Check out PDO for future development
$partialStates = mysql_real_escape_string($_POST['partialStates']);
$states = mysql_query("SELECT `name` FROM list1 WHERE `name` LIKE '%$partialStates%'");
EDIT
Since you're using jQuery trying changing your onkeyup event. If you are still getting errors use something like FireBug or your browsers javascript debugger to check for further errors. Try the following (untested):
<script type="text/javascript">
$(document).ready(function() {
$('input#myFilter').keyup(function(event) {
$.post("getStates.php",{partialStates:$(this).val()},function(data){
$("#results").html(data);
});
}).keydown(function(event) {
if (event.which == 13) {
event.preventDefault();
}
});
});
</script>
</head>
<body>
<input type="text" id="myFilter">
<div id="results"></div>
Try this
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE '%".mysql_real_escape_strings($partialStates)."%'");
Instead of this
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE "%$partialStates%"");