添加动态输入 - 未正确附加 - 包含图片

Question

我已经包含了 javascript 用于动态添加输入字段，但是第一次点击时它的样式不正确。这是使用添加按钮之前的样子（忽略作者 1/大学 1 显示 2x，它在我的代码中供参考）：

这是点击几次后的样子：

如您所见，第一个添加的样式不正确。

我还想知道是否有人知道如何创建删除作者字段按钮，以便在不需要时减去输入字段。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Input Form - Research Ranker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="shortcut icon" href="/../img/favicon.ico">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   <script>
  $(function() {
 var num = 2;
 var id = 'author' +num;
 var uni_id = 'university' +num;
 $( "#AuthorFieldButton" ).click(function() {
    var name = 'Author '+ num;
 var uni_name = 'University ' + num;
 id = 'author' + num;
    $('.author-group').append('<div class="form-group"> <label class="col-md-4 control-label" for="'+id+'">'+name+':</label><div class="col-md-4"><input type="text" id="'+id+'" name="'+id+'" class="form-control input-md" maxlength="40" ></div></div><div class="form-group"><label class="col-md-4 control-label" for="'+uni_id+'">'+uni_name+':</label><div class="col-md-4"><input type="text" id="'+uni_id+'" name="'+uni_id+'" class="form-control input-md maxlength="55" ></div></div>')
 num++;
 // <div class="form-group">
 //  <label class="col-md-4 control-label" for="author1_name">Author 1:</label>  
 //  <div class="col-md-4">
 //  <input id="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40">
  
 //  </div>
 // </div>

  });
  });
 </script>
</head>

<body>
<?PHP
 
if(!isset($_POST['submit'])){
    print '
 <div class="container-fluid ui-widget">


 <form class="form-horizontal" method="post" action="articleinput2.php" onsubmit="return confirm("Is all of your data correct?");">
 <fieldset>

 <!-- Article Input -->
 <legend>Article Input</legend>

 <!-- Journal Radio Buttons (value is journal ISSN)-->
 <div class="form-group">
   <label class="col-md-4 control-label" for="journal_radio">Journal</label>
   <div class="col-md-4">
   <div class="radio">
  <label for="journal_radio-0">
    <input type="radio" name="journal_radio" id="journal_radio-0" value="2162-9730" checked="checked">
    MIS Quarterly
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-1">
    <input type="radio" name="journal_radio" id="journal_radio-1" value="1047-7047">
    Information Systems Research
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-2">
    <input type="radio" name="journal_radio" id="journal_radio-2" value="0742-1222">
    Journal of Management Information Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-3">
    <input type="radio" name="journal_radio" id="journal_radio-3" value="1536-9323">
    Journal of the Association for Information Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-4">
    <input type="radio" name="journal_radio" id="journal_radio-4" value="1476-9344">
    European Journal of Information Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-5">
    <input type="radio" name="journal_radio" id="journal_radio-5" value="1365-2575">
    Information Systems Journal
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-6">
    <input type="radio" name="journal_radio" id="journal_radio-6" value="0963-8687">
    Journal of Strategic Information Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-7">
    <input type="radio" name="journal_radio" id="journal_radio-7" value="0268-3962">
    Journal of Information Technology
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-8">
    <input type="radio" name="journal_radio" id="journal_radio-8" value="0167-9236">
    Decision Support Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-9">
    <input type="radio" name="journal_radio" id="journal_radio-9" value="0378-7206">
    Information and Management
  </label>
   </div>
   </div>
 </div>

 <!-- Article Name Input-->
 <div class="form-group">
   <label class="col-md-4 control-label" for="article_name">Article Name:</label>  
   <div class="col-md-5">
   <input id="article_name" name="article_name" type="text" placeholder="Article Name" class="form-control input-md" required="" maxlength = "60">
  
   </div>
 </div>

 <!-- Author 1-->
 <div class="form-group">
   <label class="col-md-4 control-label" for="author1_name">Author 1:</label>  
   <div class="col-md-4">
   <input id="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40">
  
   </div>
 </div>

 <!-- Author 1 University -->
 <div class="form-group">
   <label class="col-md-4 control-label" for="author1_university">University:</label>  
   <div class="col-md-4">
   <input id="author1_university" name="author1_university" type="text" placeholder="Author University" class="form-control input-md" required="" maxlength="55">
  
   </div>
 </div>
 <!-- Author 1 New Input Field-->
  <div class="form-group ">
      <label class="col-md-4 control-label" for="author1">Author 1:</label>
   <div class="col-md-4">
      <inputid="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40"">
    </div>
 </div>
  
 <!-- University 1 New Input Field-->
  <div class="author-group form-group">
      <label class="col-md-4 control-label" for="university1">University 1:</label>
   <div class="col-md-4">
      <input id="author1_university" name="author1_university" type="text" placeholder="Author University" class="form-control input-md" required="" maxlength="55">
    </div>
 </div>
 <div class="form-group">
 <div class="col-md-4 control-label">
 <button class="btn-small btn-primary" id="AuthorFieldButton" type="button">+ Author</button> 
 </div>
 </div>
 
 <!-- Select Year Published -->
 <div class="form-group">
   <label class="col-md-4 control-label" for="year">Year Published</label>
   <div class="col-md-4">
  <select id="year" name="year" class="form-control">
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
  </select>
   </div>
 </div>

 <!-- Is Security Checkbox -->
 <div class="form-group">
   <label class="col-md-4 control-label" for="is_security"></label>
   <div class="col-md-4">
  <label class="checkbox-inline" for="is_security">
    <input type="checkbox" name="is_security" id="is_security" value="1">
    Security Related
  </label>
   </div>
 </div>

 <!-- Submit Form Button -->
 <div class="form-group">
   <div class="col-md-4 control-label">
  <button id="submit" name="submit" class="btn btn-primary">Submit</button>
   </div>
 </div>

 </fieldset>
 </form>


 </div>';
 
 }

Answer 1

从以下位置更新您的 js：

$('.author-group').append('<div class="form-group"> <label class="col-md-4 control-label" for="'+id+'">'+name+':</label><div class="col-md-4"><input type="text" id="'+id+'" name="'+id+'" class="form-control input-md" maxlength="40" ></div></div><div class="form-group"><label class="col-md-4 control-label" for="'+uni_id+'">'+uni_name+':</label><div class="col-md-4"><input type="text" id="'+uni_id+'" name="'+uni_id+'" class="form-control input-md maxlength="55" ></div></div>')

到

$('.author-group').last().after('<div class="form-group"> <label class="col-md-4 control-label" for="'+id+'">'+name+':</label><div class="col-md-4"><input type="text" id="'+id+'" name="'+id+'" class="form-control input-md" maxlength="40" ></div></div><div class="form-group author-group"><label class="col-md-4 control-label" for="'+uni_id+'">'+uni_name+':</label><div class="col-md-4"><input type="text" id="'+uni_id+'" name="'+uni_id+'" class="form-control input-md maxlength="55" ></div></div>')

解决您的样式问题。请参阅下面的代码片段以了解删除最后一个作者按钮...

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Input Form - Research Ranker</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="shortcut icon" href="/../img/favicon.ico">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   <script>
  $(function() {
 var num = 2;
 var id = 'author' +num;
 var uni_id = 'university' +num;
 $( "#AuthorFieldButton" ).click(function() {
    var name = 'Author '+ num;
 var uni_name = 'University ' + num;
 id = 'author' + num;
    $('.author-group').last().after('<div class="form-group"> <label class="col-md-4 control-label" for="'+id+'">'+name+':</label><div class="col-md-4"><input type="text" id="'+id+'" name="'+id+'" class="form-control input-md" maxlength="40" ></div></div><div class="form-group author-group"><label class="col-md-4 control-label" for="'+uni_id+'">'+uni_name+':</label><div class="col-md-4"><input type="text" id="'+uni_id+'" name="'+uni_id+'" class="form-control input-md maxlength="55" ></div></div>')
 num++;
 // <div class="form-group">
 //  <label class="col-md-4 control-label" for="author1_name">Author 1:</label>  
 //  <div class="col-md-4">
 //  <input id="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40">
  
 //  </div>
 // </div>

  });

  $('#RemoveLastAuthor').click(function(e){
        $('.author-group').last().prev('.form-group').remove();
        $('.author-group').last().remove();
        num--;
  });
  });
 </script>
</head>

<body>
<?PHP
 
if(!isset($_POST['submit'])){
    print '
 <div class="container-fluid ui-widget">


 <form class="form-horizontal" method="post" action="articleinput2.php" onsubmit="return confirm("Is all of your data correct?");">
 <fieldset>

 <!-- Article Input -->
 <legend>Article Input</legend>

 <!-- Journal Radio Buttons (value is journal ISSN)-->
 <div class="form-group">
   <label class="col-md-4 control-label" for="journal_radio">Journal</label>
   <div class="col-md-4">
   <div class="radio">
  <label for="journal_radio-0">
    <input type="radio" name="journal_radio" id="journal_radio-0" value="2162-9730" checked="checked">
    MIS Quarterly
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-1">
    <input type="radio" name="journal_radio" id="journal_radio-1" value="1047-7047">
    Information Systems Research
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-2">
    <input type="radio" name="journal_radio" id="journal_radio-2" value="0742-1222">
    Journal of Management Information Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-3">
    <input type="radio" name="journal_radio" id="journal_radio-3" value="1536-9323">
    Journal of the Association for Information Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-4">
    <input type="radio" name="journal_radio" id="journal_radio-4" value="1476-9344">
    European Journal of Information Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-5">
    <input type="radio" name="journal_radio" id="journal_radio-5" value="1365-2575">
    Information Systems Journal
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-6">
    <input type="radio" name="journal_radio" id="journal_radio-6" value="0963-8687">
    Journal of Strategic Information Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-7">
    <input type="radio" name="journal_radio" id="journal_radio-7" value="0268-3962">
    Journal of Information Technology
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-8">
    <input type="radio" name="journal_radio" id="journal_radio-8" value="0167-9236">
    Decision Support Systems
  </label>
   </div>
   <div class="radio">
  <label for="journal_radio-9">
    <input type="radio" name="journal_radio" id="journal_radio-9" value="0378-7206">
    Information and Management
  </label>
   </div>
   </div>
 </div>

 <!-- Article Name Input-->
 <div class="form-group">
   <label class="col-md-4 control-label" for="article_name">Article Name:</label>  
   <div class="col-md-5">
   <input id="article_name" name="article_name" type="text" placeholder="Article Name" class="form-control input-md" required="" maxlength = "60">
  
   </div>
 </div>

 <!-- Author 1-->
 <div class="form-group">
   <label class="col-md-4 control-label" for="author1_name">Author 1:</label>  
   <div class="col-md-4">
   <input id="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40">
  
   </div>
 </div>

 <!-- Author 1 University -->
 <div class="form-group">
   <label class="col-md-4 control-label" for="author1_university">University:</label>  
   <div class="col-md-4">
   <input id="author1_university" name="author1_university" type="text" placeholder="Author University" class="form-control input-md" required="" maxlength="55">
  
   </div>
 </div>
 <!-- Author 1 New Input Field-->
  <div class="form-group ">
      <label class="col-md-4 control-label" for="author1">Author 1:</label>
   <div class="col-md-4">
      <inputid="author1_name" name="author1_name" type="text" placeholder="Author Name" class="form-control input-md" required="" maxlength="40"">
    </div>
 </div>
  
 <!-- University 1 New Input Field-->
  <div class="author-group form-group">
      <label class="col-md-4 control-label" for="university1">University 1:</label>
   <div class="col-md-4">
      <input id="author1_university" name="author1_university" type="text" placeholder="Author University" class="form-control input-md" required="" maxlength="55">
    </div>
 </div>
 <div class="form-group">
 <div class="col-md-4 control-label">
 <button class="btn-small btn-primary" id="AuthorFieldButton" type="button">+ Author</button> 
 <button class="btn-small btn-primary" id="RemoveLastAuthor" type="button">- Author</button> 
 </div>
 </div>
 
 <!-- Select Year Published -->
 <div class="form-group">
   <label class="col-md-4 control-label" for="year">Year Published</label>
   <div class="col-md-4">
  <select id="year" name="year" class="form-control">
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
  </select>
   </div>
 </div>

 <!-- Is Security Checkbox -->
 <div class="form-group">
   <label class="col-md-4 control-label" for="is_security"></label>
   <div class="col-md-4">
  <label class="checkbox-inline" for="is_security">
    <input type="checkbox" name="is_security" id="is_security" value="1">
    Security Related
  </label>
   </div>
 </div>

 <!-- Submit Form Button -->
 <div class="form-group">
   <div class="col-md-4 control-label">
  <button id="submit" name="submit" class="btn btn-primary">Submit</button>
   </div>
 </div>

 </fieldset>
 </form>


 </div>';
 
 }

添加动态输入 - 未正确附加 - 包含图片

Adding Dynamic Input - Not Appending Correctly - Picture included

html

javascript

php

jquery

dynamic