使用加号按钮添加多个文本框,并通过PHP提交
Adding multiple textboxes using plus button and submit through PHP
我需要使用plus
按钮添加多个文本框,并使用Javascript使用minus
按钮删除它们。
在用户填写完所有字段并单击提交按钮后,我需要使用PHP获取所有值。
示例:
最初,只有一个文本框。当用户单击+
按钮并已填充第一个字段时,将出现第二个文本框,同时还会出现一个用于删除文本框的-
按钮。当用户单击提交时,文本框中的值将通过PHP提交。
我的代码:
<?php
if(isset($_POST["userbtnsubmit"])){
}
?>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country" id="con" class="form-control oditek-form" placeholder="Add Country">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+">
<input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</form>
注意:如问题所述,用户必须在input
中键入文本,然后才能显示另一个。
addRemoveAnother('#plus', '#minus', '#con', '#counter', 3);
function addRemoveAnother(plusBtn, minusBtn, target, counter, limit) {
var i, ii = $(counter).val();
for(i = 0; i <= limit; i++) {
if (i != ii) {
$(target+i).hide();
}
}
$(plusBtn).click(function() {
ii = $(counter).val();
if ($(target+ii).val() != '') {
ii++;
if (ii <= limit) {
$(target+ii).show();
$(counter).val(ii);
}
}
});
$(minusBtn).click(function() {
ii = $(counter).val();
if (ii > 1) {
$(target+ii).val('');
$(target+ii).hide();
ii--;
$(counter).val(ii);
}
});
}
https://jsfiddle.net/curtisweeks/k4kanw6L/
您可以将jQuery PLUS AJAX组合起来实现同样的目的。
示例:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$( "#plus" ).on("click", function() {
$( "#frmfeed" ).append( '<input type="text" name="country[]" class="form-control oditek-form" placeholder="Add Country"/>');
});
$("#minus").on("click", function(){
if($("input[name='country[]']").length > 1)
{
$("input[name='country[]']:eq("+(length-1)+")").remove();
}
});
$("#btnsubmit").on("click", function(){
var countries = [];
$("input[name='country[]']").each(function(){
countries.push($(this).prop("value"));
});
console.log(countries);
//AJAX Post Data To Your Server
var postDataObj = {
url: "YOUR_SERVER_FILE",
type: "post",
data: countries,
success: function(data){
//Response Data From Server
}
}
console.log(postDataObj);
$.ajax(postDataObj);
});
});
</script>
</head>
<body>
<form name="frmfeed" id="frmfeed" enctype="multipart/form-data" method="post" onSubmit="return validateFeedbackForm();">
<input type="text" name="country[]" id="con" class="form-control oditek-form" placeholder="Add Country"><br/><br/>
</form>
<input type="button" class="btn btn-success" name="plus" id="plus" value="+"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-">
<button type="submit" class="btnsub" name="userbtnsubmit" id="btnsubmit">Add</button>
</body>
</html>
JSFiddle演示
相关文章:
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 如何从jquery确认框提交php页面
- 从 JavaScript 提交 PHP 表单
- 提交 php 表单而不刷新页面
- 提交PHP表单不会将PHP变量传递给javascript函数
- 不要在提交PHP时刷新页面
- 当用户提交PHP表单时,我如何将文本文件发送到网站上所有打开的浏览器
- JQuery按钮获取url并提交php表单
- 通过 AJAX 提交 PHP 数组不起作用
- 使用javascript自动提交PHP表单
- 自动提交php表单
- 每个输入都在表单提交PHP上序列化
- 提交PHP表单,无需重新加载或AJAX
- javascript验证成功后提交PHP表单
- 从单页提交PHP查询
- 提交php不工作
- 如何提交PHP表单数据.(不是怎么做!)
- 表单没有提交php和jquery
- 尽管未选中,但 HTML 复选框值仍提交 (PHP)
- 隐藏确认表单重新提交PHP