爲什麼我的表單輸入值不添加新數據？

我試圖將自動填充搜索框中的選定值添加到我的id =「merkenlijst」。問題是，當品牌被添加時，它只會閃爍一秒，然後消失。我找不到我做錯了什麼。爲什麼我的表單輸入值不添加新數據？

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

<script> 
    $(document).ready(function() { 
     $("input#autocomplete").autocomplete({ 
      source: ["Adidas", "Airforce", "Alpha Industries", "Asics", "Bikkemberg", "Birkenstock", "Bjorn Borg", "Brunotti", "Calvin Klein", "Cars Jeans", "Chanel","Chasin", "Diesel", "Dior", "DKNY", "Dolce & Gabbana"] 
     }); 

     $("#add-brand").click(function(){ 
      var merk = $("#autocomplete").val(); 
      $("#merkenlijst").append(merk); 
     }); 
    }); 
</script> 

<style type="text/css"> 
    body{ margin: 0 auto; width: 540px; } 
</style> 

<title>Form add brands </title> 
</head> 

<body> 
    <div id="brands-form-holder"> 
     <form id="brands-form" action="" method=""> 
      <dl> 
       <dt> 
        <h1> 
         <label for="brands-form-brand">Add your brands</label> 
        </h1> 
       </dt> 
       <dd> 
        Search for brand: 
     <input id="autocomplete" type="text" name="brand" /> 
     <input id="add-brand" type="submit" value="Add brands" /> 
       </dd> 
      </dl> 
     </form> 

     <hr /> 

     <p class="section-title"> 
      <strong>Brands selected</strong> (including from the database) 
     </p> 

     <div id="merkenlijst"> </div> 
    </div>

來源

2012-03-19 the_boy_za

的形式將提交/重新加載當您單擊「添加品牌」 submit按鈕的頁面。從單擊事件返回false防止被提交的表格（或使用preventDefault）

$("#add-brand").click(function(){ 
     var merk = $("#autocomplete").val(); 
     $("#merkenlijst").append(merk); 
     return false; 
    });

或者，只是用type="button"輸入，而不是一個提交按鈕：

<input id="add-brand" type="button" value="Add brands" />

來源

2012-03-19 03:32:24 pjumble

爲什麼我的表單輸入值不添加新數據？

回答

相關問題