Form Submit Javascript PHP not working, help please?

Question

I am having a hard time getting my form to work.

Can anyone take a look at this and tell me why nothing happens when I try it in a live environment? I managed to get the form to submit using "action" in the form tag whilst ditching the javascript altogether, with the PHP returning both Error and success depending on whether I filled out all fields and the email was successfully received.

However I want to use the javascript method so that I can prevent a page reload and use alert messages as this form will be used inside a packaged mobile app.

Any help is much appreciated.

    <form  method="post" name="form1" id="form1">
      <label for="textfield">Text Field:</label>
      <input name="FirstName" type="text" id="FirstName">
      <label for="textfield2">Text Field:</label>
      <input name="LastName" type="text"  id="LastName">
      <label for="textfield3">Text Field:</label>
      <input name="Email" t ype="text"id="Email">
      <label for="textfield4">Text Field:</label>
      <input name="MessageText" type="text"  id="MessageText">

    <input type="button" onclick="submit()" value="submit contact"/>
   </form>

    <script>
    $(document).ready(function(){
      event.preventDefault();
      $("form").submit(function(){
        $.post('http://************/requestform.php', {



        FirstName: $('#FirstName_input').val(),
        LastName: $('#LastName_input').val(),
        Email: $('#Email_input').val(),
        MessageText: $('#MessageText_input').val()



        }, function (html) {

            var response=html;


             if (response=="success") {
               alert("Message sent!"); 
            } else {


               alert("Sorry please fill all fields!"); 
            return false;
        }
       });

      });
    });

and the PHP part

    <?php


     $FirstName=$_POST["FirstName"];
     $LastName=$_POST["LastName"];
     $Email=$_POST["Email"];
     $MessageText=$_POST["MessageText"];
     $Headers = "From:" . $Email;


     if(
     $FirstName=="" ||
     $LastName=="" ||
     $Email=="" ||
     $MessageText==""
     ) {
         echo "Error";
     } else {
         mail("*******@gmail.com","mobile app message",$MessageText, $Headers);
         echo "success";
     }
 ?>

why you are calling submit function on button click...?? onclick="submit()" — Dipesh Parmar
– Dipesh Parmar, Commented Sep 12, 2013 at 10:09
The URL is to the same domain I assume? If not, you're likely running into violation of the Same Origin Policy. — MisterBla
– MisterBla, Commented Sep 12, 2013 at 10:09
Why do you even need a Form submit and preventdefault? Only $.post should work. If full refresh is what you want then why don't you do a regular submit with <input type="submit"/> — Nilesh
– Nilesh, Commented Sep 12, 2013 at 10:11
When I was using the regular method the browser would navigate away from the request page. I also needed a prevent default because each time the page loaded I would get the error message from the js because each field wasn't filled in. — OliverJ90
– OliverJ90, Commented Sep 12, 2013 at 10:33

q0re · Accepted Answer · 2013-09-12 10:53:29Z

2

Do not use $_GET to access the variables.

Use $_POST.

So change:

$FirstName=$_GET["FirstName"];
$LastName=$_GET["LastName"];
$Email=$_GET["Email"];

to:

$FirstName=$_POST["FirstName"];
$LastName=$_POST["LastName"];
$Email=$_POST["Email"];

UPDATE:

Change:

    FirstName: $('#FirstName_input').val(),
    LastName: $('#LastName_input').val(),
    Email: $('#Email_input').val(),
    MessageText: $('#MessageText_input').val()

To:

    FirstName: $('#FirstName').val(),
    LastName: $('#LastName').val(),
    Email: $('#Email').val(),
    MessageText: $('#MessageText').val()

Why do you add _inputto the input id?

UPDATE 2

Edit the HTML:

<input type="button" onclick="submit()" value="submit contact"/>

to

<input type="button" onclick="sendForm()" value="submit contact"/>

Javascript:

function sendForm() {
    $.post('http://************/requestform.php', {

    FirstName: $('#FirstName').val(),
    LastName: $('#LastName').val(),
    Email: $('#Email').val(),
    MessageText: $('#MessageText').val()

    }, function (html) {
         var response=html;

         if (response=="success") {
           alert("Message sent!"); 
         } else {
           alert("Sorry please fill all fields!");
         }
   });

}

Also see the change
$("form").submit(function(){
$("form1").submit(function(){
because the form id is #form1.

edited Sep 12, 2013 at 10:53

answered Sep 12, 2013 at 10:11

q0re

1,35919 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

OliverJ90 Over a year ago

Sorry, I had already changed that, my mistake for posting that incorrect version, I was still having no joy using POST.

q0re Over a year ago

why you are calling the function submit() on button click?

OliverJ90 Over a year ago

Thanks for your time, unfortunately neither of these seemed to fix the problem... the submit button does nothing

q0re Over a year ago

Yes because of the event.preventDefault();. And why are you calling the function submit() on button click?

OliverJ90 Over a year ago

The submit button doesn't work at all without the submit(), with on click submit the form empties, however no email is sent and no alert of success is triggered.

|

Alex · Accepted Answer · 2013-09-12 12:18:27Z

0

You have to make an ajax call when user clicks the button. To do that assign a click handler to your button.

Try this:

<form  method="post" name="form1" id="form1">
    <label for="textfield">Text Field:</label>
    <input name="FirstName" type="text" id="FirstName">
    <label for="textfield2">Text Field:</label>
    <input name="LastName" type="text"  id="LastName">
    <label for="textfield3">Text Field:</label>
    <input name="Email" type="text"id="Email">
    <label for="textfield4">Text Field:</label>
    <input name="MessageText" type="text"  id="MessageText">

    <input type="button" id="submitContactBtn" value="submit contact"/>
</form>

<script type="text/javascript">

    $(document).ready(function(){

        // we will perform an AJAX call when user clicks the button
        $('#submitContactBtn').click(function(){

            $.post('http://************/requestform.php', {

            FirstName: $('#FirstName').val(),
            LastName: $('#LastName').val(),
            Email: $('#Email').val(),
            MessageText: $('#MessageText').val()        

            }, function(response){

                var result = responce.replace(/\s/g, ''); // clear all whitespaces, just in case

                if( result == 'success' ){
                    alert("Message sent!"); 
                } else {
                    alert("Sorry please fill all fields!"); 
                }

            });     

        });

    });

</script>

Please note that I've added id to your button:

<input type="button" id="submitContactBtn" value="submit contact"/>

edited Sep 12, 2013 at 12:18

answered Sep 12, 2013 at 10:57

Alex

1,30411 silver badges20 bronze badges

4 Comments

OliverJ90 Over a year ago

Tried this also. I don't understand why this isn't working. I must be missing something really fundamental!

Alex Over a year ago

@OliverJ90 I reviewed the issue and made different code. Please try this

OliverJ90 Over a year ago

I really appreciate your time. This doesn't seem to work either though. I know the php script works but getting the javascript alerts to work is just not happening.

OliverJ90 Over a year ago

thanks for your help, I got this figured out eventually with $('input[type="button"][value="Send Request"]').click(function() {

Collectives™ on Stack Overflow

Form Submit Javascript PHP not working, help please?

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related