Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    AJAX form - MySQL, jquery

    Hi,

    I am trying to setup ajax with my form.

    I came across a tutorial for setting this up but it didnt quite work for me so need a little help in getting it to work. This method seams quite good because I can easily add more fileds without changing my ajax too much and can also implement easily into other projects.

    The form works fine without ajax.

    Here is my form

    Code:
    <form action="../bin/form-process.php" method="post" class="ajax">
    
    <input class="input-field" type="text" autocomplete="on" name="first_name" />
    
    <input class="input-field"  type="text" autocomplete="on" name="middle_name" />
    
    <input class="btn btn-apple-blue" id="form-submit" type="submit" value="Save"  />
    
    </form>
    and here is my ajax

    Code:
    $('form.ajax').on('submit', function() {
      
              var that = $(this),
              url = that.attr('action'),
              type = that.attr('method'),
              data = {};
      
              that.find('[name]').each(function(index, value) {
                        var that = $(this),
                        name = that.attr('name'),
                        value = that.val();
      
                        data[name] = value;
              });
      
              $.ajax({
                        url: url,
                        type: type,
                        data: data,
                        success: function(response) {
                                
                        }
      
              });
      
              return false;
    });

    Any ideas why its not working?

    thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    actually tmacka88 it does work. It calls a file "bin/form-process.php" and passes data to it. To show you that it is working I have change the called php script to a file named "ajax.php" In the script I echo back the two inputs. To see the returned echo I have added a div to the html and told the success: part of the ajax to write it there.
    To make it easy I high lighted my additions.
    The HTML file:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$('form.ajax').on('submit', function() {
    		var that = $(this),
    		url = that.attr('action'),
    		type = that.attr('method'),
    		data = {};
    		that.find('[name]').each(function(index, value) {
    			var that = $(this);
    			name = that.attr('name');
    			value = that.val();
    			data[name] = value;
    		});
    		$.ajax({
    			url: url,
    			type: type,
    			data: data,
    			success: function(response) {
    				$('#placemat').html(response);
    			}
    		});
    	return false;
    	});
    });
    </script>
    </head>
    <body>
    <form action="ajax.php" method="post" class="ajax">
    <input class="input-field" type="text" name="first_name" />
    <input class="input-field"  type="text" name="middle_name" />
    <input class="btn btn-apple-blue" id="form-submit" type="submit" value="Save"  />
    </form>
    <div id="placemat"></div>
    </body>
    </html>
    This is ajax.php:
    PHP Code:
    <?php
    $Name1 
    $_POST['first_name'];
    $Name2 $_POST['middle_name'];
    echo 
    "We have received Name1 as " $Name1 " and Name2 as " $Name2;
    ?>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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