动态jQuery不在.append()之后发布表单的添加输入
Dynamically jQuery not posting add inputs of a form after the .append()
除了我,我使用appends添加输入,但post表单不是添加输入数据。
请和我谈谈,我该怎么办,非常感谢!
HTML代码
<form class="form_a" action="test_a.php" method="POST" >
<div class="language">
<div class="append">
</div>
<button type="button" class="add">add Button</buttond>
<input type="submit" value="click me submit form">
</div>
</form>
Javascript代码
$('.language .add').click(function(){
$('.language .append').append(
'<input name="language[]" class="form-control" value="test">'
);
});
PHP代码
<?php
print_r($_POST);
?>
首先,您必须使用正确的jQuery选择器来获得Submit按钮。
接下来,代码中不能像PHP中那样有换行符——必须转义任何换行符:
$('.language .append').append('
'<input name="language[]" class="form-control" value="test">''
);
$('input[type=submit]').click(function(e){
e.preventDefault();
$('.language>.append').append('<input name="language[]" class="form-control" value="test">');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form class="form_a" action="test_a" method="POST" >
<div class="language">
<div class="append">
</div>
<label class="add"></label>
<input type="submit" value="click">
</div>
</form>
注意:使用ID属性捕获Submit按钮是一个好主意(但是,不能使用单词submit
作为ID)。类似于:
<input id="btnSubmit" type="submit" value="click">
$('#btnSubmit').click(function(){
$('.language>.append').append('<input name="language[]" class="form-control" value="test">');
});
注意:答案示例片段中的e.preventDefault()
是为了防止FORM元素执行其默认操作,并在您有机会看到DOM更改之前导航离开页面
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何在submit to sightly时将表单输入值作为参数传递给WCMUsePojo
- 单击鼠标,用MySQL数据填充html表单输入字段
- 从HTML表单发布blob的表单输入类型是什么
- 在不使用PHP的情况下将表单输入值获取到Javascript中
- 在Chrome中重新加载页面后清除表单输入值
- CasperJS填充表单-输入名称有方括号
- 表单输入字段随着溢出的文本而增长
- Highcharts:根据表单输入动态显示数据
- 如何在为表单输入分别处理$(this)和$时编写DRY代码
- 如何从AngularJS表单输入中生成一个永久变量
- 将表单输入保存到txt,弹出结果,不更改页面
- 在表单输入字段中创建默认值
- 如何根据提交表单时下拉框中的值禁用html表单输入框
- 使用jQuery延迟表单输入,并在延迟后在同一页面上显示结果
- Jquery无法找到给定表单id的表单输入
- 如何使用javascript验证在表单输入中避免负值、浮点值和十进制值
- 对表单输入执行计算
- Javascript 重复表单输入
- 使用 JavaScript 计算并添加表单输入的值