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搞砸了，你应该使用＆＃34; external＆＃34;加载外部CSS和脚本。功能在左边。显然，您的本地文件将无法访问，因此请使用绝对路径。这次我花时间正确设置它。

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

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

实质上：您只需要指定一个type属性（其值明显不同于"submit"），以便您的＆＃34;添加＆＃34;按钮停止充当提交按钮。

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

您在＆＃34;添加＆＃34;上添加事件监听器时也遇到问题。按钮：您的代码必须在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/

而不是添加另一个元素它将登陆到另一个页面

1 个答案: