将选定的选择选项添加到jQuery表单提交

Question

Just having a little trouble with part of my code.

Basically new elements are added into the page through .html() and ajax response. An example of added elements are commented in the code. Because the codes were added into the page through .html the form wasn't submitting the added fields. So I used .append($('.newfields') which works perfectly on the checkbox but fails on the select box which is the purpose of this question.

Any way to include the new select boxes on form submit?

Thank you all in advance for you help!

 $('.button').click(function(){ $('#domaincheckform').append($('.newfields')); $( "#domaincheckform" ).submit(); }); 

 <form action="cart.php" id="domaincheckform" method="post"> <select form="domaincheckform" name="termselect[]"> <option value="1">1 year</option> <option value="2">2 year</option> </select> <input type="checkbox" name="did[]" value="example1"> <!--EXAMPLE ADDED FIELD--> <select form="domaincheckform" class="newfields" name="termselect[]"> <option value="1">1 year</option> <option value="2">2 year</option> </select> <input type="checkbox" class="newfields" name="did[]" value="example2"> <!--END OF EXAMPLE ADDED FIELD--> <span class="button">Button</span> </form> 

Answer 1

You need to wrap your select inside a div

try this

 <form action="cart.php" id="domaincheckform" method="post">

<select form="domaincheckform" name="termselect[]">
<option value="1">1 year</option>
<option value="2">2 year</option>
</select> 
<input type="checkbox" name="did[]" value="example1">

<!--EXAMPLE ADDED FIELD-->  
<div class="append_content"><select form="domaincheckform" class="newfields" name="termselect[]">
    <option value="1">1 year</option>
    <option value="2">2 year</option>
    </select> </div>
<input type="checkbox" class="newfields" name="did[]" value="example2">
<!--END OF EXAMPLE ADDED FIELD-->  

<span class="button">Button</span>
</form>

Also make changes in your js like this

<script>
   $(document).ready(function() {
        $('.button').click(function(){
            $('#domaincheckform').append($('.append_content').html());
            $( "#domaincheckform" ).submit();
        });
   });  
</script>

now the select is inside a div append_content its easy to fetch its content as select has multiple html content so it will return object if you use only selector name $(".newfields")

Answer 2

$(selector).click(function(){}) sometimes fails to work. Try using $(selector).on("click", function(){})

It worked here: https://jsbin.com/vemuxukehi/edit?html,js,output

Answer 3

Heres is a simple working example that adds the and displays it in the submitted form data

https://jsfiddle.net/uapejgu5/

$(function () {
    $("#submit").click(function () {
        $("#result").html($('#myform').serialize())
        return false
    })
    $("#add").click(function () {
        var select = $("<select>", {
            name: "newSelect"
        })
        $(select).append($("<option>", {
            text: "myNewOption",
            value: "myNewValue"
        }))
        $("#myform").append(select)
    })
})

Answer 4

Check out this fiddle:

https://jsfiddle.net/bbdkr9g5/1/

Basically what you wrote, plus some code to print out the form result in the console. And you had the same name attributes on both your static and your dynamically-inserted elements, which is probably not what you wanted.

Answer 5

You should clone the elements and remove the newfields class before adding them to the form.

$('.button').click(function(){
    $('#domaincheckform').append($('.newfields').clone().removeClass('newfields'));
    $('#domaincheckform').submit();
});

Here is a JSFiddle example that skips the actual submit: JSFiddle