更新表单元素而无需提交（Ajax + JS）

Question

I have to update certain elements of the form from database (using an external php file) without submitting.

For example: write employee id and the name would be populated before even submitting. I'm pretty new to ajax hence didn't quite find how to execute the same.

Bits and pieces of my code are as follows:

part of 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 should ideally take the employee id and then should return employee name and update it in the desired field. Would be great if you rectify the code above. Thanks

Answer 1

First of all,

you .submit() a form, you don't .click() it.

You click the submit button in the form to submit the form, BUT YOU DONT CLICK A FORM ITSELF.

So first change click to submit unless you want your ajax call to be executed every time someone clicks on your form.

Then, use .preventDefault() to disable normal submit behavior on the submit event, and do your ajax call once someone clicks the submit button or submits the form.

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

---

Next,

When you do this:

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

Specifically, this:

$("emp_name")

You are asking jQuery to select all elements that are <emp_name>

Is there such a thing? I didn't think so.

So, what you want to do is target an input by name, right?

So you do this:

$("input[name=emp_name]")

Next,

There is no .value() in jQuery, it's .val() . Do not mix javascript and jQuery.

The correct version would be this:

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

You can find more information about how to use selectors here:

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

Good luck.