CODEWITHSUNDEEP
phpjqueryajax
Ali Khan
Ali Khan

Reputation: 37

AJAX isn't getting applied to form

I'm not sure what's wrong with my code but my AJAX isn't working. I've included the jQuery library file but the program just won't load up the PHP file when I call on AJAX. As you'll see below, the .ajax call has a URL to "mail.php" but on submit, this file never loads. I can manually name the action tag for the form to "mail.php" but that just loads up "mail.php", which defeats the point of AJAX. What am I doing wrong?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form method="post" name="myForm" action="tac.php">
    <label>Name:</label> <br /> 
    <input name="sender">
    <br /> <br /> 

    <label>Email address:</label><br />
    <input name="senderEmail">
    <br />
    <label>Message:</label> <br /> 
    <textarea rows="5" cols="20" name="message"></textarea>
    <br /> <br /> 

    <input type="submit" name="submit">
</form>
<script> 

    $(document).ready(function() { 

      $("#myForm").submit(function() {

    var roy = new Object();
    roy.sender = $('#sender').val();
    roy.senderEmail = $('#senderEmail').val();
    roy.message = $('#message').val();

    var jo = JSON.stringify(roy);

   $.ajax({

            type: "POST",
            url: "mail.php",
            data: {roy: jo},
            success: function(msg){
            alert(msg);
            }

      });
    return false;
    });
       });
</script>

Upvotes: 0

Views: 64

Answers (2)

Azrael
Azrael

Reputation: 193

It's not working because you are trying to trigger an event of an id that doesn't exist.

$("#myForm").submit(function() { the id "myForms" it doesn't exist on < form > tag

put id="myForm" in < form > and it will work fine.

Like this: <form method="post" id="myForm" action="tac.php"> and also remove the name="myForm" because it has no use on form tags ...

Upvotes: 0

Ayo Makanjuola
Ayo Makanjuola

Reputation: 628

Change 

<form method="post" name="myForm" action="tac.php">

To 

<form method="post" id="myForm" action="tac.php">

This code

$("#myForm")

is looking for an element with id="myForm" not name="myForm"

Cheers

Upvotes: 1

Related Questions