更新表單元素而無需提交（Ajax + JS）

Question

我必須從數據庫（使用外部php文件）更新表單的某些元素，而無需提交。

例如：寫出員工ID，甚至在提交之前就填寫姓名。 我對ajax很陌生，因此沒有找到如何執行相同的方法。

我的代碼片段如下：

xyz.js的一部分

$("#makeproj-nav").click(function()
{

// project form starts

s = "<form id = 'create_new_form' name = 'new_form' method='post' action='insert_new.php'><div class='project_form'><span>";

s += "<div class='Form_contents'> Employee ID: <input type='text' size='100' name='emp_id'></div>";

s += "<div class='Form_contents'> Employee Name: <input type='text' size='100' name='emp_name'></div>";

s += "<div class='Form_contents'> <input type='submit'> </div>";
s += "<span></div></form>";

$("#card-wrapper").html(s);

$('#create_new_form').on('click', function(e) {

$.ajax({
      url : 'Find_EmpName.php',
      type : 'POST',
      data : $(this).serialize(),
      success : function(response) {
        $("emp_name").value(response.reply);
      }
    });
  });

});

Find_EmpName.php在理想情況下應獲取員工ID，然后應返回員工名稱並在所需字段中對其進行更新。 如果您更正上面的代碼，那就太好了。 謝謝

Answer 1

首先，

你.submit()形式，你沒有.click()它。

您單擊表單中的提交按鈕以提交表單， 但不要單擊表單本身。

因此，首先更改click以submit除非您希望每次有人單擊您的表單時都執行ajax調用。

然后，使用.preventDefault()禁用對.preventDefault()事件的正常提交行為，並在有人單擊“ submit按鈕或提交表單后進行ajax調用。

$('#create_new_form').on('submit', function(event){
    event.preventDefault();
    //your ajax call
});

---

下一個，

執行此操作時：

$("emp_name").value(response.reply);

具體來說，這是：

$("emp_name")

您要讓jQuery選擇<emp_name>所有元素

有這樣的事嗎？ 我不這么認為。

因此，您要做的是按名稱定位輸入，對嗎？

所以你這樣做：

$("input[name=emp_name]")

下一個，

jQuery中沒有.value() ，它是.val() 。 不要混合使用javascript和jQuery。

正確的版本是這樣的：

$("#create_new_form input[name=emp_name]").val(response.reply);

您可以在此處找到有關如何使用選擇器的更多信息：

http://api.jquery.com/category/selectors/

祝好運。