insert multiple rows not work.

[Yohanne]

Hi coders,

 

 

i have a js to add multiple input and its depend to a user how many input should he want to add. and my problem is, it work insert data in a first line of rows but the rest of rows are not save.

 

any idea, what should i add to make it work. 

 

js

<script>
$(document).ready(function(){
  $('#add').click(function(){
   var inp = $('#box');
   var i = $('input').size() + 1;
      $('<div id="box' + i +'"><input type="text" id="name" class="name" name="code[]' + i +'" placeholder="Input '+i+'"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo(inp);
				
i++;
});
$('body').on('click','#remove',function(){
$(this).parent('div').remove();
});
});
</script>

html

<div id="box">
<input name = "code[]" type="text" id="name" class="name" placeholder="Input 1">
<img src="add.png" width="32" height="32" border="0" align="top" class="add" id="add" />
</div>

php

$rf = $_POST['regform'];
$b = $_POST['branch'];
$d = $_POST['date'];
$c = $_POST['code'];
$u = $_POST['user'];
				
for($i = 0; $i<count($c); $i++)
  {
    $a_query = mysql_query("INSERT INTO code_number(ts_number,branch_id,yy,code,username) VALUES('$rf','$b','$d','$c[$i]','$u')");
  }		
  return $a_query;

[mac_gyver]

the name attribute should only be - name = "code[]"

 

you are creating - name = "code[]2" name = "code[]3" ... (i'm not sure how php will treat those as they are not valid php variable names.)

[Yohanne]

Okay, thanks for the idea and what is best ways in js to stop creating loop of number.

 

what is the best solutions? and i already deleted function name="code[]' + i +'" instead name="code[]" but still not work. but when im doing something like below its work but it is not what i want to have a default number of inputs. 

<input name = "code[]" type="text" id="name" class="name" placeholder="Input 1">
<input name = "code[]" type="text" id="name" class="name" placeholder="Input 1">
<input name = "code[]" type="text" id="name" class="name" placeholder="Input 1">
<input name = "code[]" type="text" id="name" class="name" placeholder="Input 1">
<input name = "code[]" type="text" id="name" class="name" placeholder="Input 1">

Edited June 28, 2014 by JaysonDotPH

[mac_gyver]

you have markup that's not valid (reusing id's) and some that doesn't appear to be used (classes on everything.) you should only produce the markup that you need.

 

id's must be unique, so they should only be used when you need to reference a specific element via code.

 

your code should also be general purpose and should work for any number of different groups of text inputs.

 

the following example is general purpose that will work with any number of groups of input fields and contains no id's (it references the current element using $(this)) -

 

the javascript -

<script>
$(document).ready(function(){
    $('.add').click(function(){
        var d = $(this).parent('div'); // the (parent)div the add element is in
        var inp = d.find($("input")); // find ALL input fields within the <div>
        var i = inp.length + 1; // the next placeholder number to use
        var name = inp.attr("name"); // the name attribute of the first input in the div
        // this code is specific to <input> fields, but could be made to work for all field types
        $('<div><input type="text" name="'+name+'" placeholder="Input '+i+'"/> <img src="remove.png" width="32" height="32" border="0" align="top" class="remove" /></div>').appendTo(d);
    });

    $('body').on('click','.remove',function(){
        $(this).parent('div').remove(); // the (sub)div the remove button is in
    });
});
</script>

example form with two different groups of input fields -

<form method='post' action='formaction.php'>
<div>
    <input name="code[]" type="text" placeholder="Input 1">
    <img src="add.png" width="32" height="32" border="0" align="top" class="add" />
</div>
<div>
    <input name="something_else[]" type="text" placeholder="Input 1">
    <img src="add.png" width="32" height="32" border="0" align="top" class="add" />
</div>
<input type='submit'>
</form>

Edited June 28, 2014 by mac_gyver

[Yohanne]

Thanks for your effort and i really appreciate, i try your suggestion and still not work.

 

 

and is this correct? 

<input type="text" name="'+name+'" placeholder="Input '+i+'"/>

[mac_gyver]

the code i posted is tested and submits the expected $_POST data when the <form> shown in my code is submitted.. if your code doesn't work, there's something specific in your code that's a problem.

 

what exactly does the code do that makes you think it doesn't work? does the add/remove image/button add and remove form fields? how are you submitting the form data? what $_POST data is submitted to the .php code?

[Yohanne]

js remove/add is working well. while when im going to insert multiple data rows it still the first line are going to save the rest is not. i still using my php code posted above. 

[mac_gyver]

what does adding the following debugging statement in your .php code show -

echo '<pre>',print_r($_POST,true),'</pre>';