用户输入的动态字段

时间:2017-12-21 10:04:23

标签: javascript jquery html

我想要的只是从用户那里获取他需要的字段数量并添加字段。 当我给变量赋予直接值时,字段正在完美地添加 但是当我试图接受输入并将该输入提供给变量时,它没有这样做。

如果问题没有得到充分补充,请提供帮助和抱歉。

这是源代码。

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

4 个答案:

答案 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)

  1. 首先,这里是修改后的HTML和JS添加多个动态字段 [因为,问题中提供的不起作用]。
  2. &#13;
    &#13;
     
    
        <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;
    &#13;
    &#13;

    1. 由于您正在使用&#39; name []&#39;作为您的输入文件的名称,这就是为什么在通过$ _POST [&#34; name&#34;]访问时会产生数组的原因。因此,要访问这些值,您必须通过它的索引位置访问每个值。
    2. 例如 -

      要访问 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)

以下是您的问题的解决方案。 你的错误是:

  1. jQuery必须首先加载然后加载引导程序js
  2. 按钮点击未加载时获取用户输入
  3. #add id,您需要使用#submit ID,因为没有添加ID的元素
  4. 这里我使用$("#user").val();来获取用户输入,即jQuery从document.getElementById("user");错误的文本框中获取值。
  5. &#13;
    &#13;
    $(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;
    &#13;
    &#13;