我想要的只是从用户那里获取他需要的字段数量并添加字段。 当我给变量赋予直接值时,字段正在完美地添加 但是当我试图接受输入并将该输入提供给变量时,它没有这样做。
如果问题没有得到充分补充,请提供帮助和抱歉。
这是源代码。
<html>
<head>
<title>User Homepage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">Personal Details</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Name</th>
<td><input type="text" name="f_name" placeholder="Enter your FName" class="form-control name_list"</td>
<td><input type="text" name="l_name" placeholder="Enter your LName" class="form-control name_list"</td>
</tr>
<tr>
<th>Unique ID</th>
<td><input type="text" name="u_name" placeholder="Employee ID" class="form-control name_list"</td>
</tr>
</table>
</div>
<h2 align="center">Research and development's</h2>
<div class="form-group ">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<th>Conference Name</th>
<th>Conference location</th>
<th>Paper title</th>
<th>Author Details</th>
<th>Proceeding no</th>
<th>Month and year</th>
</tr>
<td><input type="text" name="conference_name[]" placeholder="Enter your FName" class="form-control name_list"</td>
<td><input type="text" name="Conference_location[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="Paper_title[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="Author_Details[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="Proceeding_No[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="MonthnYear[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="text" id="user">
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
<input type="button" name="view" id="view" class="btn btn-info" value="view" onclick="document.location.href='Viewtrails.php'" />
</div>
</form>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var i=1;
var n=document.getElementById("user");#comment if i give the value here as 10 il get the required fields but not able to get the value from user
for ($i=0;$i<n;$i++)
{
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'">\n\
<td><input type="text" name="conference_name[]" placeholder="Enter your FName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Conference_location[]" placeholder="Enter your FName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Paper_title[]" placeholder="Enter your LName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Author_Details[]" placeholder="Enter your LName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Proceeding_No[]" placeholder="Enter your LName" class="form-control name_list" />\n\
<td><input type="text" name="MonthnYear[]" placeholder="Enter your FName" class="form-control name_list" /></td>\n\
<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
}
});
</script>
答案 0 :(得分:0)
您需要在jquery中删除for循环,然后它将按预期工作。
答案 1 :(得分:0)
您的语法var n = document.getElementById("user");
返回HTML元素,而不是整数。
您需要的是获取输入的值,如下所示:var inputValue = document.getElementById("user").value;
因为你正在使用n作为整数,所以将它转换为整数会很好,因为value将返回一个字符串值。您可以使用parseInt(string);
所以你的代码应该是这样的:
var inputValue = document.getElementById("user").value;
var n = parseInt(inputValue);
现在,检查输入值实际上是整数还是字符串也很容易。如果用户添加字母和字符而不是整数,我想你想触发一些错误信息吗?
更新: 您还应该更改加载顺序,以便在引导程序之前加载jquery!
您在加载文档时获得用户输入,而不是在单击按钮时。代码应该在按钮单击功能中移动,以便您获得用户键入的新值。如果您在加载时执行此操作,则输入值将永远不会更改。
答案 2 :(得分:0)
<html>
<head>
<title>User Homepage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">Personal Details</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Name</th>
<td><input type="text" name="f_name" placeholder="Enter your FName" class="form-control name_list"</td>
<td><input type="text" name="l_name" placeholder="Enter your LName" class="form-control name_list"</td>
</tr>
<tr>
<th>Unique ID</th>
<td><input type="text" name="u_name" placeholder="Employee ID" class="form-control name_list"</td>
</tr>
</table>
</div>
<h2 align="center">Research and development's</h2>
<div class="form-group ">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<th>Conference Name</th>
<th>Conference location</th>
<th>Paper title</th>
<th>Author Details</th>
<th>Proceeding no</th>
<th>Month and year</th>
</tr>
<td><input type="text" name="conference_name[]" placeholder="Enter your FName" class="form-control name_list"</td>
<td><input type="text" name="Conference_location[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="Paper_title[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="Author_Details[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="Proceeding_No[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="MonthnYear[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="text" id="user">
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
<input type="button" name="view" id="view" class="btn btn-info" value="view" onclick="document.location.href='Viewtrails.php'" />
</div>
</form>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#add').click(function(){
var n= parseInt( $("#user").val());//#comment if i give the value here as 10 il get the required fields but not able to get the value from user
for (var i=0;i<n;i++)
{
$('#dynamic_field').append('<tr id="row'+i+'">\n\
<td><input type="text" name="conference_name[]" placeholder="Enter your FName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Conference_location[]" placeholder="Enter your FName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Paper_title[]" placeholder="Enter your LName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Author_Details[]" placeholder="Enter your LName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Proceeding_No[]" placeholder="Enter your LName" class="form-control name_list" />\n\
<td><input type="text" name="MonthnYear[]" placeholder="Enter your FName" class="form-control name_list" /></td>\n\
<td><button type="button" onclick="fnRemove('+i+');" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
}
});
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
function fnRemove(i){
$('#row'+i+'').remove();
}
</script>
&#13;
例如 -
要访问 conference_name ,您需要编写第一行 低于PHP代码 -
var $conference_name_1 = $_POST["conference_name"][0],
并用于访问第二行数据 -
var $conference_name_2 = $_POST["conference_name"][1],
或者您可以将所有数据读取为数组 -
var $conference_names = $_POST["conference_name"];
现在,您可以循环显示 $ conference_names 以获取单个值 -
$arr = $_POST["conference_name"];
foreach ($arr as $key => $value) {
// this will print individual value
echo $value;
}
答案 3 :(得分:0)
以下是您的问题的解决方案。 你的错误是:
#add
id,您需要使用#submit
ID,因为没有添加ID的元素$("#user").val();
来获取用户输入,即jQuery从document.getElementById("user");
错误的文本框中获取值。
$(document).ready(function(){
var i=1;
//#comment if i give the value here as 10 il get the required fields but not able to get the value from user
$('#submit').click(function(){
var n= $("#user").val();
for ($i=0;$i<n;$i++)
{ i++;
$('#dynamic_field').append('<tr id="row'+i+'">\n\
<td><input type="text" name="conference_name[]" placeholder="Enter your FName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Conference_location[]" placeholder="Enter your FName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Paper_title[]" placeholder="Enter your LName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Author_Details[]" placeholder="Enter your LName" class="form-control name_list" /></td>\n\
<td><input type="text" name="Proceeding_No[]" placeholder="Enter your LName" class="form-control name_list" />\n\
<td><input type="text" name="MonthnYear[]" placeholder="Enter your FName" class="form-control name_list" /></td>\n\
<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
}
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
&#13;
<html>
<head>
<title>User Homepage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">Personal Details</h2>
<div class="form-group">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Name</th>
<td><input type="text" name="f_name" placeholder="Enter your FName" class="form-control name_list"</td>
<td><input type="text" name="l_name" placeholder="Enter your LName" class="form-control name_list"</td>
</tr>
<tr>
<th>Unique ID</th>
<td><input type="text" name="u_name" placeholder="Employee ID" class="form-control name_list"</td>
</tr>
</table>
</div>
<h2 align="center">Research and development's</h2>
<div class="form-group ">
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<th>Conference Name</th>
<th>Conference location</th>
<th>Paper title</th>
<th>Author Details</th>
<th>Proceeding no</th>
<th>Month and year</th>
</tr>
<td><input type="text" name="conference_name[]" placeholder="Enter your FName" class="form-control name_list"</td>
<td><input type="text" name="Conference_location[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="Paper_title[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="Author_Details[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="Proceeding_No[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><input type="text" name="MonthnYear[]" placeholder="Enter your lName" class="form-control name_list"</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="text" id="user">
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
<input type="button" name="view" id="view" class="btn btn-info" value="view" onclick="document.location.href='Viewtrails.php'" />
</div>
</form>
</div>
</div>
</body>
</html>
&#13;