Question

我的部分代码遇到了一些麻烦。

基本上，通过.html（）和ajax响应将新元素添加到页面中。代码中注释了添加元素的示例。因为代码是通过.html添加到页面中的，所以表单没有提交添加的字段。所以我使用了.append（$（＆＃39; .newfields＆＃39;），它在复选框上完美运行，但在选择框上失败，这就是这个问题的目的。

是否可以在表单提交中包含新的选择框？

先谢谢你的帮助！

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您需要将select包裹在div

中

试试这个

 <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>

还可以像这样更改你的js

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

现在select在div append_content里面，因为select有多个html内容所以很容易获取它的内容所以如果你只使用选择器名$(".newfields")

它会返回对象

Answer 2

$(selector).click(function(){})有时无法正常工作。尝试使用$(selector).on("click", function(){})

它在这里工作：https://jsbin.com/vemuxukehi/edit?html,js,output

Answer 3

Heres是一个简单的工作示例，它将其添加并在提交的表单数据中显示

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

看看这个小提琴：

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

基本上你写的是什么，加上一些代码来打印控制台中的表单结果。并且您在静态和动态插入的元素上都有相同的name属性，这可能不是您想要的。

Answer 5

在将元素添加到表单之前，您应克隆元素并删除newfields类。

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

这是一个跳过实际提交的JSFiddle示例：JSFiddle

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

5 个答案: