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,938
    Mentioned
    214 Post(s)
    Tagged
    12 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,938
    Mentioned
    214 Post(s)
    Tagged
    12 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
  •