javascript - 不是添加另一个元素而是登陆另一个页面

Question

我使用 bootstrap 创建了一个模态列表，实际上我创建了一个表单列表，当输入详细信息时，它会将我带到所需的页面。注册按钮执行此功能。但现在我还添加了一个依赖下拉(技能，级别)选项。它还有一个添加按钮，每当我单击添加按钮而不是添加其他元素时，它都会将我带到同一页面并显示添加成功的消息。谁能帮帮我？

<form id='work' method="post" action="registerdb.php">
<div class="form-group">
<label for="recipient-name" class="control-label">First Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">           
<span class="glyphicon glyphicon-user"></span></span>
<input type="text"  id = "firstname" name = "firstname" class="form-control"         
 placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">Last Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">   
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "lastname" name = "lastname" class="form-control"   
placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label>Company Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">      
<span class="glyphicon glyphicon-briefcase"></span></span>
<input type="text" id= "companyname" name = "companyname" class="form-       
control" placeholder="Company Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">E-mail ID</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">  
<span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" id = "emailid" name = "emailid" class="form-control"      
placeholder="Email" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">  
<span class="glyphicon glyphicon-asterisk"></span></span>                       
<input type="password" id = "password" name = "password" class="form-  
control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Type of Industry</label>
<div class="input-group">
<select class="input-medium bfh-countries" data-country="US">
<option value="" disabled="disbaled" selected="selected">Please Select a     
Value</option>    
<option value="Accounting">Accounting</option>   
<option value="Aeronautical">Aeronautical</option>
<option value="Agriculture">Agriculture</option>
<option value="Science and Research">Science and Research</option>
</select>
</div>
</div>            
</div>
<hr>
<div align="center">
<button type="button" class="btn btn-primary" data-   
dismiss="modal">Close</button>
<input class="btn btn-primary" type = "submit" name = "submit" value =    
"register" />
 </div>
 </form>
 <script>
 $( "#add" ).click(function() {
 var row = $("#wrapper-1").clone();
 //row.remove("#add");
 $('#wrapper').append(row);
 });
 </script>
 <div id="wrapper" width="100%">
 <div id="wrapper-1" style="float: left; width: 85%;">
 <div id="first" style="float: left; width: 65%;"> 
 <label for="skills">Skills</label>
 <select id="one" class="step1">
 <option value="">Please select an option</option>
 <option>C</option>
 <option>C++</option>
 <option>Java</option>
 <option>PHP</option>
 </select>
 </div>
 <div class="general" style="float: left; width: 35%;"> 
  <label for="skills">Level</label>
  <select id="two" class="step2">
  <option value="">option</option>
  <option>Begineer</option>
  <option>Expert</option>
  <option>Advanced</option>
  </select>
  </div>
  </div>
  <div class="add-general" style="float: left; width: 15%;">
  <button id="add">add</button>
  </div>  
  </div>

Answer 1

你的 jsfiddle 搞砸了，你应该使用左侧的“外部”功能加载外部 CSS 和脚本。显然您的本地文件将无法访问，因此请使用绝对路径。这次我花时间正确设置了它。

您的 HTML 看起来也很乱，但浏览器仍然可以理解。

至于你的意外行为，我认为这篇文章适用于你的情况:Form is submitted when I click on the button in form. How to avoid this?

本质上:您只需要指定一个 type 属性(其值明显不同于 "submit")，这样您的“添加”按钮就不再充当提交按钮按钮。

<button id="add" type="button">add</button>

您在“添加”按钮上附加事件监听器时也遇到了问题:您的代码必须在您的按钮存在于 DOM 中后执行。

2个简单的方法:

• 将您的 script 标记放在 按钮 HTML 之后。
• 在 DOM 准备好/加载后执行代码(例如使用 jQuery(document).ready(function() {/** your code **/}) 请求 jQuery 执行它一次 DOM is ready )。

jQuery(document).ready(function() {
    $( "#add" ).click(function() {
        var row = $("#wrapper-1").clone();
        // You should change the id to avoid multiple elements
        // with same id in your DOM...
        $('#wrapper').append(row);
    });
});

更新的 jsfiddle:http://jsfiddle.net/qc3tu1f1/4/