I have two types of input fields generated dynamically by add more buttons one for adding categories and the other for sub categories. I have to group different sub categories to a single main category. how can insert them in to mysql database, someone please help me, thanks in advance.
<html>
<body>
<button type="button" value="add more"
onClick="addInput_a('dynamicInput_a');"></button>
<div id="dynamicInput_a">
<label>Category</label>
<input name="a_meaning[]">
</div>
<button type="button" value="add more" onClick="addInput_b('dynamicInput_b');"></button>
<div id="dynamicInput_b">
<label>Sub Category</label>
<input name="b_meaning[]">
</div>
<script>
var counter = 1;
var limit = 25;
function addInput_a(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = " <br> <label>Category</label><input
name='a_meaning[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<script>
var counter = 1;
var limit = 25;
function addInput_b(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = " <br> <label>Sub Category</label><input
name='b_meaning[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
</body>
</html>
Related
I've seen the other code for looping textbox, but it goesn't seem to apply in my form wizard form script.
What i need is a specific text box that loops when the user inputs a certain number of textboxes that he want to put.
Example:
there's a text box in which the user will enter the number of textboxes that he wanted to display, say 3. So after I click the submit button, there should be 3 textboxes as the output.
the following code when I put in form wizard not work properly
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-md-7">
<h2 class="fs-title">Item Detail:</h2>
</div>
<div class="col-md-5">
<h2 class="steps">Step 3 - 4</h2>
</div>
</div>
//CODE here
</div> <input type="button" id="next4" name="next" class="next action-button" value="Submit" onclick="validate3(0)"/>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
</fieldset>
You can use the following code sniffed to generate text boxes dynamically (using jquery).
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='text' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
I'm using "Add/remove fields dynamically" script Based on the great post by Charlie Griefe. However when I try to clone a select menu jQuery Mobile only allows me to select the value in the static select menu.
The Script to clone my select menu
<script>
$(document).ready(function() {
$('#btnAdd').click( function() {
$('#btnDel').removeAttr('disabled').button('enable'); // enable the "del" button
// how many "duplicatable" input fields we currently have
var num = $('.clonedInput').length;
// the numeric ID of the new input field being added
var newNum = new Number(num + 1);
var newElem = $('#input' + num ).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr( 'id', 'name' + newNum ).attr('name', 'name_label[]');
$('#input' + num).after(newElem);
// business rule: limit the number of fields to 5
if (newNum == 5) {
$('#btnAdd' ).attr('disabled', 'disabled').button('disable');
$('#btnAdd').parent().find('.ui-btn-text').text('maximum fields reached');
}
});
$( '#btnDel' ).click( function() {
// how many "duplicatable" input fields we currently have
var num = $( '.clonedInput' ).length;
// remove the last element
$('#input' + num ).remove();
// enable the "add" button, since we've removed one
$('#btnAdd').removeAttr('disabled').button('enable');
$('#btnAdd').parent().find('.ui-btn-text').text('add another name');
// if only one element remains, disable the "remove" button
if ( num-1 == 1 )
$('#btnDel' ).attr('disabled', 'disabled').button('disable');
});
});
</script>
The select menu:
div id="input1" class="clonedInput" style="margin-bottom: 4px;">
<div data-role="fieldcontain">
<label for="item_ordered">Ordered Item:</label>
<?php
$conn = new mysqli('localhost', 'root', 'root', 'retail_management_db')
or die ('Cannot connect to db');
$result = $conn->query("SELECT item_Id,itemName FROM CompanyInventory");
echo '<select name="itm_order" value="'.escape(Input::get('itm_order')).'"><option>Select Item</option>';
while ($row = $result->fetch_assoc()) {
unset($id, $name);
$id = $row['item_Id'];
$name = $row['itemName'];
echo '<option value="'.$name.'">'.$name.'</option>';
}
echo '</select>';
?>
</div>
<div data-role="fieldcontain">
<label for="item_ordered">Units:</label>
<input type="text" name="quantity" id="quantity" value="<?php echo escape(Input::get('quantity')); ?>">
</div>
</div>
<div>
<input id="btnAdd" type="button" value="Add another item" data-inline="true">
<input id="btnDel" type="button" value="Remove item" disabled="disabled" data-inline="true">
</div>
I'm also adding values from my database dynamically into the select menu.
I would like to insert up to 10 fields dynamically 10 into my form :
<form action="" method="post">
...
<div id="dynamicInput">Entry 1
<br>
<input type="text" name="myInputs[]">
</div>
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
...
<input type="submit" class="btn btn-primary" />
</form>
JS code :
var counter = 1;
var limit = 10;
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
After clicking submit in form ( with post method ) I hope to get values inserted in this field in my php page?
For example I inserted 3 values dynamically using the JS code above, so I hope to get in my php page an array like this :
Array(
[0] => value1, [1] => value2, [2] => value3
)
Your initial form :
<div id="dynamicInput">Entry 1
<br><input type="text" name="myInputs[]">
</div>
and your javascript :
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
Give this dynamically generate field the name name='myInputs[]'> myInputs
Therefore when you receive the forms data back into your PHP code you will receive this in the $_POST array:
$_POST['myInputs'][0] = data in the first field
$_POST['myInputs'][1] = data in the second field
$_POST['myInputs'][2] = data in the third field
...
$_POST['myInputs'][9] = data in the tenth field
I don't know how to do with javascript but by using jquery you can do achieve it easily
please add script jquery.js in your site
HTML
<div id="dynamicInput">Entry 1
<input type="text" name="myInputs[]" class="myInputs" />
<input type="button" class="add_input" value="Add another text input" />
</div>
jQuery
$(document).ready(function(){
var limit = 10;
$(".add_input").on('click', function(){
if( $(".myInputs").length == limit ){
alert("You have reached the limit of adding " + limit + " inputs");
return false;
}
$(".myInputs:last").after("<br>Entry "+ ( $(".myInputs").length + 1 )+" <input type='text' name='myInputs[]' class='myInputs' />");
});
});
you can also check example at JSFiddle
I have Jquery code that can create multiple text boxes .Now, i want to submit my text boxes' values so that i could get them using PHP on next page.I want to submit text box in the same way as ( )
and on the second page,i could get values using POST method.How can i i post multiple text values in this case and how can i retrieve them on the next page using php?? Plz help as i am a new bee.
CODE:
<head>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--; $("#TextBoxDiv" + counter).remove(); });
$("#getButtonValue").click(function ()
{
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
Try to giving name for text boxes as array
e.g. input type='textbox' name='textbox[]' id='textbox1'
and access it on PHP page as array
$arrayRequest = $_REQUEST['textbox'];
I have a form with select fields dynamically generated and with the options taken from php (same for all the selects). But I need that every <select>...</select> must be shown in a different line. This can be done having every <select>...</select> inside a <div>...</div>.
This is the code that I have, it´s working but the select fields are not within a div:
<script type="text/javascript">
//<![CDATA[
$(function(){
var counter = 1;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var select = $('<select>').attr({id:'select'+counter,name:'select'+counter});
$.ajax({
url: 'selects.php',
dataType: "html",
success: function(data) {
select.html(data);
}
});
select.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#select" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
//]]>
</script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='text' id='textbox1' >
</div>
<div id="TextBoxDiv2">
<label>Textbox #2 : </label><input type='text' id='textbox2' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
And this is the html code generated by select.php:
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>
Use the wrap() function. :
Put this code just before the counter++;. :
$("#TextBoxesGroup > select").wrap ( function () {
return '<div id="wrap_' + this.id + '"></div>';
} );
See it in action at jsFiddle.