Question

I am new to JavaScript, so pardon my lack of knowledge.

I am trying to code a contact form and want to get the value entered in a particular input text field as soon as a value entered by the visitor using AJAX and pass it to a PHP string so that I can show relevant information based on the value entered before hitting the submit button.

How Can I do that using jQuery?

Here are the codes I am using for the form:

<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>`

I need the value of the URL input field to pass to a php string (as soon as the user checks the showdetails checkbok) so that I can process it in background to show information based on the url.

Answer 1

Given this html:

<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>

jQuery (checkbox)

$(function() {
  $("showdetails").on("click",function() {
    var url = $("#url").val();
    if (url && $(this).is(":checked")) {
      $.get("relevantinfo.php",
        { "url": url },
        function(data){
          // do something with data returned
        }
      );
    }
    else {
      // clear relevant info here
    }
  });
});

The receiving end: Retrieving POST Data from AJAX Call to PHP