i am dynamically building a page. This page needs to read information from input tags but it is dynamic. Should i set up stuff to be an array since i am looking at
I want to preserve datasets.
<script>
function adjustPilots(){
var pilots = $("#numPilots").val();
var info = '<td><table>'+
'<tr><td>Minumum Collateral</td><td colspan="2"><input type = "text" size = "10" maxLength = "6" /> to <input type = "text" size = "10" maxLength = "6" /></td></tr>'+
'<tr><td>Reward</td><td colspan="2"><input type = "text" size = "10" maxLength = "6" /> to <input type = "text" size = "10" maxLength = "6" /></td></tr>'+
'<tr><td>Volume</td><td colspan="2"><input type = "text" size = "10" maxLength = "7" /> to <input type = "text" size = "10" maxLength = "7" /></td></tr>'+
'<tr><td>Start: </td><td><input type = "text" name = "s" id = "s" class = "s" value autoplete = "off"></td></tr>'+
'<tr><td>End: </td><td><input type = "text" name = "e" id = "e" class = "e" value autoplete = "off"></td></tr>'+
'</table></td>';
for(var i = 0; i < Number(pilots); i++){
$("#pilotrow").append(info);
}
}
</script>
<body>
<form>
<table>
<tr><td>Number of Pilots</td><td colspan="2"><input id = "numPilots" type = "text" size="3" maxLength="3" onchange = 'adjustPilots()' /></td></tr>
<tr id = "pilotrow"></tr>
<tr><td><input type = "submit" name = "submit"></td></tr>
</table>
</form>
</body>
An option i was thinking was to just not use a form, and build it with javascript. Then make a JSON object and use AJAX to send it to the server. Is that a solid way of doing it, or is there a better idea?
i am dynamically building a page. This page needs to read information from input tags but it is dynamic. Should i set up stuff to be an array since i am looking at
I want to preserve datasets.
<script>
function adjustPilots(){
var pilots = $("#numPilots").val();
var info = '<td><table>'+
'<tr><td>Minumum Collateral</td><td colspan="2"><input type = "text" size = "10" maxLength = "6" /> to <input type = "text" size = "10" maxLength = "6" /></td></tr>'+
'<tr><td>Reward</td><td colspan="2"><input type = "text" size = "10" maxLength = "6" /> to <input type = "text" size = "10" maxLength = "6" /></td></tr>'+
'<tr><td>Volume</td><td colspan="2"><input type = "text" size = "10" maxLength = "7" /> to <input type = "text" size = "10" maxLength = "7" /></td></tr>'+
'<tr><td>Start: </td><td><input type = "text" name = "s" id = "s" class = "s" value autoplete = "off"></td></tr>'+
'<tr><td>End: </td><td><input type = "text" name = "e" id = "e" class = "e" value autoplete = "off"></td></tr>'+
'</table></td>';
for(var i = 0; i < Number(pilots); i++){
$("#pilotrow").append(info);
}
}
</script>
<body>
<form>
<table>
<tr><td>Number of Pilots</td><td colspan="2"><input id = "numPilots" type = "text" size="3" maxLength="3" onchange = 'adjustPilots()' /></td></tr>
<tr id = "pilotrow"></tr>
<tr><td><input type = "submit" name = "submit"></td></tr>
</table>
</form>
</body>
An option i was thinking was to just not use a form, and build it with javascript. Then make a JSON object and use AJAX to send it to the server. Is that a solid way of doing it, or is there a better idea?
Share asked Aug 22, 2012 at 0:36 FallenreaperFallenreaper 10.7k15 gold badges75 silver badges140 bronze badges 2-
A number of your inputs do not have a
nameattribute, how would you serialize this data? – Paul Commented Aug 22, 2012 at 0:49 -
I'm not sure what you're asking but if I haven't misunderstood, you can set
display:noneto that table yet include it in your html code, then remove and assign it into a variable and use theclone()jQuery method to append cloned versions of it. – inhan Commented Aug 22, 2012 at 0:51
3 Answers
Reset to default 3There are at least 2 way to do that.
Without javascript, you cate a form with array of element like this
<input type="text" name="input[]"/>
<input type="text" name="input[]"/>
<input type="text" name="input[]"/>
<input type="text" name="input[]"/>
in php
$inputs = $_POST['input'];
for($inputs as $inp){
}
With ajax and jquery, you can just simply serialize your form and post to backend
You can achieve that by using the name attribute in your inputs. Like so:
<input type="text" name="pilots[]" />
Then you would probably want to keep track of how many pilots you are adding that way you can send an indexed array. Like so:
<input type="text" name="pilots[0][minumumCollatural]" />
<input type="text" name="pilots[0][reward]" />
<input type="text" name="pilots[0][volume]" />
That way when you submit your form to the server, your array of pilots will look something like:
$pilots = $_POST['pilots'];
// Which looks like
array(
[0] => array
(
[minumumCollatural] => // Some number
[reward] => // Some number
)
[1] => array
(
[minumumCollatural] => // Some number
[reward] => // Some number
)
)
Try utilizing the hidden input tag to send data in whatever fashion you please. For instance:
<input type="hidden" name="myinput" id="myinput" />
Now in JS:
$("form").submit(function() {
$("input").not("#myinput").each(function() {
$("#myinput").val($("#myinput").val()+$(this).val());
// you can format anyway you want this is just an example
});
});
Hope this helps!