form submit - php ajax jquery-ui - will not execute on Firefox or IE

0
votes

I have a drop down form, which has a list of four choices the user can select from. After selecting the choice and clicking the "Advertise in Public Chat" button the option value (1, 2, 3, 4) needs to be passed to advertise.php?advertise=1 (2, 3, or 4) without the page refreshing. After clicking Advertise in Public Chat I would like a message that says "Message sent to Chat!" and the user can click OK.

My issue:

Code will not execute on Firefox or Internet Explorer (I have tried on Debian Linux & Windows PCs-- all share the same result). Works perfectly on Chrome\Opera.


    <!DOCTYPE html>
    <html>
    <body>
        <form id="myform" action="" method="post">
            <select name="Type">
                <option value="1">(1 on 1)</option>
                <option value="2">(2 on 2)</option>
                <option value="3">(3 on 3)</option>
                <option value="4">(4 on 4)</option>
            </select>
            <input type="submit" value="Advertise in Public Chat">
        </form>
        <div id="message"><h2>This will change when the request is sent</h2></div>

        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
        <script type="text/javascript">
            $(document).ready(function(event) {
              $('form').on('submit', function(){
                  event.preventDefault();        
                  var myVal = $('select[name="Type"]').val();
                  $.ajax({
                    type: "GET",
                    url: "advertise.php",
                    data: {
                        advertise: myVal
                    }
                  }).done(function( response ) {
                    // response is equal to what advertise.php will echo/print
                    $('#message h2').html("Message sent to Chat!");
                      });
              });
          });
        </script>

    </body>
    </html>
3
phpajaxjquery-ui

3 Answers

1
votes

If you -submit- a form, the page will be refreshed. You have to stop or prevent default action for the submit event of your form. Here is a example using jquery:

$('#myForm').on('submit', function(e){
    e.preventDefault();
    // your ajax function
});
1
votes

Instead of using

<input type="submit" value="Advertise in Public Chat">

You can use

<input type="button" id="submit-btn" value="Advertise in Public Chat">

and for the ajax you can do like this:

$("#submit-btn").click(function(){
  $.ajax({
   type: "POST",
   url: "advertise.php",
   data: dataString,
   success: function() {
    $('#message').html("<h2>Message sent to Chat!</h2>")
   }
  });
});
});
0
votes

Like that you will be able to access $_GET['advertise'] in advertise.php

UPDATE

I forgot to put the curly braces in the data declaration in the first time, now it will work


    <script type="text/javascript">
    $('#myForm').on('submit', function(e){
        e.preventDefault();        
        var myVal = $('select[name="Type"]').val();
        $.ajax({
          type: "GET",
          url: "advertise.php",
          data: {
              advertise: myVal
          },
          success: function() {
            $('#message').html("<h2>Message sent to Chat!</h2>");
          }
        });
    });
    </script>

UPDATE 2 I just tested this in local and it works assuming that advertise.php is at the same level as this file.


    <!DOCTYPE html>
    <html>
    <body>
        <form id="myform" action="" method="post">
            <select name="Type">
                <option value="1">(1 on 1)</option>
                <option value="2">(2 on 2)</option>
                <option value="3">(3 on 3)</option>
                <option value="4">(4 on 4)</option>
            </select>
            <input type="submit" value="Advertise in Public Chat">
        </form>
        <div id="message"><h2>This will change when the request is sent</h2></div>

        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
        <script type="text/javascript">
            $(document).ready(function() {
              $('form').on('submit', function(event){
                  event.preventDefault();        
                  var myVal = $('select[name="Type"]').val();
                  $.ajax({
                    type: "GET",
                    url: "advertise.php",
                    data: {
                        advertise: myVal
                    }
                  }).done(function( response ) {
                    // response is equal to what advertise.php will echo/print
                    $('#message h2').html("Message sent to Chat!");
                      });
              });
          });
        </script>

    </body>
    </html>