Cloned Select Element doesn't post its when submitted

jquery clone select dropdown not working
select2 clone multiple
javascript clone element
cloned select2 is not responding
jquery clone dropdown not working
javascript clone div
jquery clone with events
jquery clone and change id

I have the form that contains a table, I also have a button that lets the user add a row by cloning the first row. This is the code:

HTML

    <button onclick="insertRow()">Add Row</button>
    <form action="save.php" method="post">
<table class="mod_table" id="mod_table">
            <thead>
            <th>ID No.</th>
            <th>Lastname</th>
            <th>Firstname</th>
            <th>M.I.</th>
            <th>Course</th>
            <th>Address</th>
            <th>Contact No.</th>
        </thead>
            <tr id="mod_table_row">
                <td><input type="text" name="id_num[]" size="8" required></td>
                <td><input type="text" name="lname[]" required></td>
                <td><input type="text" name="fname[]" required></td>
                <td><input type="text" name="mname[]" size="1" required></td>
                <td><select name="course[]" style="padding: 2px;">
                    <?php $opt = mysqli_query($con,"SELECT * FROM tblcourses");
                    while($row = mysqli_fetch_array($opt)){?>
                    <option value="<?php echo $row['course_code'] ?>"><?php echo $row['abbr'] ?></option>
                    <?php } ?>
                </select></td>
                <td><input type="text" name="address[]" required></td>
                <td><input type="text" name="contact[]" size="11" required></td>
            </tr>
        </table>
<button>save</button>
</form>

JAVASCRIPT

function insertRow(){
var row = document.getElementById('mod_table_row');
var table = document.getElementById('mod_table');
var newRow = row.cloneNode(true);

table.appendChild(newRow);
}

My problem is that when i submit the form, it only post the selected value of the original select element and the selected values of the clones are not posted. All other inputs works well, only the select element doesn't work. Why? Can anyone help?

Here's the php code:

<?php 
include '../dbcon.php';

$lim = $_POST['id_num'];
$lastname = $_POST['lname'];
$first = $_POST['fname'];
$mid = $_POST['mname'];
$course = $_POST['course'];
$addr = $_POST['address'];
$contact = $_POST['contact'];
for($i = 0; $i < count($lim); $i++ ){

    $id=$lim[$i];
    $lname =$lastname[$i];
    $fname = $first[$i];
    $mname = $mid[$i];
    $course = $course[$i];
    $add = $addr[$i];
    $cont = $contact[$i];


    $query = mysqli_query($con,"INSERT INTO tblstudent(id,lname,fname,mname,contact,address,course) VALUES ('$id','$lname','$fname','$mname','$cont','$add','$course')") or die(mysqli_error($con));
}
if($query == true){
    echo 'saved';
}
else{
    echo 'failed';
}
?>

The puzzling thing is I've tested your code quickly in a pen and it works fine. I've added a couple of courses to the select, to replace the query, and set the form action to a simple PHP file that I have that prints back everything it receives. All selected courses in the cloned rows came through fine in an array, as you would expect.

So I think that the problem you have may come from some of the courses not having a value. Could you please post the generated HTML with the option elements?

On a side note, make sure you sanitize the input in your PHP before saving it to your database. This is a huge security fault.

Select2 doesn't work with Cloned <select> · Issue #2522 · select2 , Hi I have observed that select2 doesn't work with a cloned tag. For example, I have a select tag with two options 1 2 Duplicate And then I hav My problem is that when i submit the form, it only post the selected value of the original select element and the selected values of the clones are not posted. All other inputs works well, only the select element doesn’t work.

Your array identifier should be at start []fname []lname

this would actually create array of object in post I believe this is what you want.

I used this tool to test if my assumptions are correct regards array identifiers http://phpfiddle.org

this is sample code

<form method=post>
<select name=same[]>
<option>1<option>
<option>2<option>
</select>
<select name=same[]>
<option>1<option>
<option>2<option>
</select>

<input type=submit value=ok>
</form>

<?php 
echo var_dump($_POST["same"]);
?>

p.s if you want to submit array of object you need to use objectName[].prop as a name of input field.

Define cloning steps for an select element · Issue #644 · whatwg , state for all interactive elements). Reason: cloneNode(true) does not clone value of select. Examlple https://codepen.io/anon/pen/bMWKdO When cloning elements with event handlers, such as Select2, it's recommended to pass in true as an argument to clone. This will force jQuery to clone the data and event handlers that Select2 has set up.

When form data is submitted, each form field that has a name will submit its value. Since you are cloning the first row, all the subsequent rows wind up with elements that are exact duplicates of the first, meaning you have multiple elements with the same name. You'll need to ensure that each new element gets its own unique name.

Additionally, the cloning operation happens client-side, but the cloned element contains server-side code (the PHP). The only way that PHP will run is if it is present in the document prior to the server sending the document to the client. You'll need to replace that PHP with AJAX calls to get an already rendered page to update with new server content or you could make your clone code go to the server and request a new page with an additional row that is created server-side.

jQuery clone() Method, The clone() method makes a copy of selected elements, including child nodes, text and attributes. Syntax. $(selector).clone(true|false). Parameter, Description. true  Clone to Element creates a copy of whatever is currently selected (polys) within the current object. If you had a Sphere and selected all of its polys and cloned them to Element you would have 2 spheres but only one object. Clone to Object simply creates a new, independant object based on the current selection.

How to clone number of select in a div using jquery, I have a div class with three select options.On click of add clone it should clone the div with these three select each should contain different ids  Definition and Usage. The cloneNode() method creates a copy of a node, and returns the clone. The cloneNode() method clones all attributes and their values. Tip: Use the appendChild() or insertBefore() method to insert the cloned node to the document. Tip: Set the deep parameter value to true if you want to clone all descendants

Clone html form elements with selected options using jQuery, <form> <div id="container"> <input type="text" value="" /><br /> <textarea></​textarea><br /> <select> <option value="1"  The <select> element is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. Tip: Always add the <label> tag for best accessibility practices! Tip: The <select> element is a form control and can be used in a form to collect user input. HTML5 has added some new attributes.

(clone() does not include selectedIndex on a select form element), A form select element like: <select id="breakfast"><option>included</option><​option>excluded</option></select>. will not have it's selectedIndex cloned if it is  A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

Comments
  • If you do a vardump of $_POST what do you see? Since your form names include [] the post variables should be coming back to you as arrays. You'll need to loop through the arrays to get the individual values.
  • @Raimonds There are no events on the first element. The event is on the form. The cloned elements contain server-side code, which won't run because the page has already been delivered to the client.
  • You can't clone serverside code, just the final output.
  • @Raimonds You can clone server-side code, it just won't execute.
  • No you can't dont mix javascript frontend and actual backend of php. you do realize that response you get from server is already rendered to client and contains no server side code.
  • Yes, it work fine if you do that. But I needed the query because I am not sure what are the courses, therefore, it must be generated with the query, but it turns out that its not possible that way.
  • @Rouge its if fine to generate those like it is, unless it dosn't generate it properly. Keep in mind that php runs before you get html as a response from server.
  • yeah, i got it. php runs when the page loads. once its loaded php don't run anymore :)
  • Actually, my problem is not about the array identifier or the names of the inputs,because they already work fine. The problem is with the select element.
  • if you look at my sample code it works fine, it should be the same as yours, only issue I had when fiddling was that if I would want to receive array of persons with their respective data was that without specifying object name my post data was empty. are you sure you want to receive array of names, array of surnames, array of middle names, not the actual array of people? You could also use fiddler to see data is being sent in request.
  • This is wrong assumption, for php it should create array of that type. However in .NET it needs strict number sequence in order to work. p.s I was too harsh to down vote, so I changed my mind.
  • @Raimonds I have no idea what you are referring to. This is a simple matter of expecting server-side code to run after the page has been delivered to the client.
  • Yes, I know that they are duplicates that is why I put [] on the names to make them arrays. Btw, i don't know anything about the down vote.
  • @Rouge They are not arrays. The name attribute holds only string data.
  • @Scott Marcus is AJAX the only way I can achieve my goal?