SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    UK
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding ajax to a simple form

    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:

    Code:
    <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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    One possibility is to use jQuery's .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:

    Code JavaScript:
    $.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. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    UK
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgive my ignorance.

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

    Code:
    <script type="text/javascript">
    
    $.ajax({
      url: "convert.php",
      cache: false,
      success: function(html){
        $("#results").append(html);
      }
    });
    
    </script>

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <!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 Code:
    <?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. #5
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    UK
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I get it now.

    I really need to learn javascript/jquery


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •