CODEWITHSUNDEEP
javascriptjqueryajax
Nick
Nick

Reputation: 236

Jquery Ajax Post Not Carrying Over Variables

I am trying to use Jquery Ajax to submit a simple form but the page looks to reload after I hit submit, the form values are being shown in the url string and the post variables never make it to the php page. It looks like it's being treated as a GET or something.

Form is as follows:

<form id = "textform">
Sent To: <input type="tel" name="number" id="name" placeholder="+1 999 999 9999" required>
<br>
<br>
Message:<textarea name="message" form="textform" placeholder="Enter text message here..." required></textarea>
<br>
<br>
<input type="submit" value="Submit">
</form>

Ajax code is as follows:

<script>

    $("textform").on("submit",function(e){
        e.preventDefault();

         let number = $(this).find("[name='number']").val();
         let message = $(this).find("[name='message']").val();

        $.post('/aws/sendtext.php', { number: number, message : message}),

            function(returnedData){
                document.getElementById("result").innerHTML = returnedData;

            }).fail(function(){

        document.getElementById("result").innerHTML = "Failed";
    });

    });

</script>

Not sure why data isn't coming from the form and it still gets treated as a GET.

UPDATE-Added order of html tags below:

<?php
?>
<html>
<head>
<title>
</title>
</head>
<body>
<div>
<form>
</form>
</div>
<div>
</div>
<script>
</script>
</body>
</html>

Upvotes: 0

Views: 51

Answers (1)

Roberto Maldonado
Roberto Maldonado

Reputation: 1595

You're not capturing the form in your jQuery, because you are using $("textform") instead of $("#textform"). That makes the form submits as default, with a GET method (since you didn't declare it in the <form> tag).

So, it would look something like this:

$("#textform").on("submit",function(e){
    e.preventDefault();

     let number = $(this).find("[name='number']").val();
     let message = $(this).find("[name='message']").val();

     $.post('/aws/sendtext.php', { number: number, message : message})
        .done(function(returnedData){
            document.getElementById("result").innerHTML = returnedData;
        }).fail(function(){
            document.getElementById("result").innerHTML = "Failed";
        });

});

and it should work properly

JSFiddle: http://jsfiddle.net/79t2bem1/8/

Upvotes: 1

Related Questions