Adding ajax to a simple form

JavaScript
1

Hi,

I have a simple form that I’m looking to add ajax to to load the results of the form on the same page, as oppose to sending the user off to a new page.

Here is the form below:

<HTML>
<HEAD>
<title>Unit Converter</title>
<link rel="icon" type="image/png" href="convert.png">
<link rel="StyleSheet" media="screen" href="basic.css">
</HEAD>
<BODY>
<h1>unit converter</h1>
<form action="convert.php" method="post">
What do you want to convert?<br>
<select name="conversionType">
<option value="null" selected="selected">Select unit</option>
<!-- Length -->
<option value="unit1">unit1</option>

</select>
<br><br>
How many units?<br>
<input type="text" name="conversionInput">
<br><br>
<input type="submit" value="Convert">
</form>
<p id="footer">

</p>
</BODY>
</HTML>

As you you can see on submit the form loads convert.php

How can I incorporate ajax to ensure that the results load within the same page?

Thanks

2

One possibility is to use jQuery’s [.ajax()](http://api.jquery.com/jQuery.ajax/) method to submit the form to your PHP script and to display whatever results it returns.

In your case a very basic example would look something like this:

$.ajax({
  url: "convert.php",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

You could of course, do the same with plain JavaScript, but jQuery irons out a few cross-browser inconsistencies, plus its syntax is very readable.

If you fancy using jQuery and you need a hand with this, just let me know.

3

Forgive my ignorance.

Can I just drop this code after my </form> tag?

<script type="text/javascript">

$.ajax({
  url: "convert.php",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

</script>
4

No, there’s a bit more to it than that I’m afraid.
You have to attach an onsubmit event handler to your form, call the $.ajax() method from within that, then prevent your forms default action so that it doesn’t submit twice.

This is what it might look like in your case:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unit Converter</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>#myForm div{margin-bottom:15px;}</style>
  </head>
  
  <body>
    <h1>unit converter</h1>
    
    <form action="convert.php" method="post" id="myForm">
      <div>
        <label for="conversionType">What do you want to convert?</label>
        <select name="conversionType" id="conversionType">
          <option value="null" selected="selected" >Select unit</option>
          <option value="unit1">unit1</option>
        </select>
      </div>
      <div>
        <label for="conversionInput">How many units?</label>
        <input type="text" name="conversionInput" id="conversionInput">
      </div>
      <input type="submit" value="Convert">
    </form>
    
    <p id="footer"></p>
    
    <script type="text/javascript">
      $(document).ready(function() {
        $("#myForm").submit(function(e) {
          e.preventDefault();
          type = $("#conversionType").val();
          units = $("#conversionInput").val();
          $.ajax({
            type : "POST",
            cache : false,
            url : "convert.php",
            data  : 'conversionType=' + type + '&conversionInput=' + units,
            success : function(data) {
              $("#footer").text(data);
            }
          });
        });
      });
    </script>
  </body>
</html>

convert.php

<?php 
  $type = $_POST['conversionType'];
  $units = $_POST['conversionInput'];
  echo "You entered $type and $units";
?>

Hopefully this should give you something to go on.
If you have any questions, just let me know.

P.S. You might notice that i have added <label> tags to your form. You can read about why this is good here: http://www.webbie.org.uk/usingthelabelelement.htm

5

Thanks. I get it now.

I really need to learn javascript/jquery