Using php form inside phonegap

Question

I have asked before for help to get my php form working inside an phonegap ipa. I did exactly as I was told and everything works just fine, even inside the ipa. Only problem I have is that I get this alert right at the moment when the page loads, obviously it should show up when client forgets to fill in a required field.

Here is what I did:

FORM in contact.html

 <form action="http://mobile.alicante-intermedia.com/submit_contact.php" method="get">
          <div class="form-element">
        <label for="txtfullname">Firstname</label>
        <input id="txtfullname" name="FirstName" type="text" placeholder="required" required />
      </div>
      <div class="form-element">
        <label for="txtemail">Lastname</label>
        <input id="txtemail" name="LastName" type="text" placeholder="required" required  />
      </div>
      <div class="form-element">
        <label for="txtcontact">Email</label>
        <input id="txtcontact" name="Email" type="email" placeholder="optional" />
      </div>
      <div class="form-element">
        <label for="txtmessage">Message</label>
        <textarea id="txtmessage" name="MessageText" placeholder="required" rows="5" required ></textarea>
      </div>
      <input type="button" onclick="submit()" value="submit contact"/>
      </form>

Then I created a jquery_form.js file which loads only inside the conatct.html

$.post('http://mobile.alicante-intermedia.com/submit_contact.php', {

    // These are the names of the form values

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

    // HTML function

    }, function (html) {
        // Place the HTML in a astring
        var response=html;

        // PHP was done and email sent
        if (response=="success") {
            alert("Message sent!"); 
        } else {

            // Error postback
            alert("Please fill all fields!"); 
        return false;
    }
});

And the php looks like this:

<?php

    // VARS
    $FirstName=$_GET["FirstName"];
    $LastName=$_GET["LastName"];
    $Email=$_GET["Email"];
    $MessageText=$_GET["MessageText"];
    $Headers = "From:" . $Email;

    //VALIDATION
    if(
    $FirstName=="" ||
    $LastName=="" ||
    $Email=="" ||
    $MessageText==""
    ) {
        echo "Error";
    } else {
        mail("[email protected]","mobile app message",$MessageText, $Headers);
        echo "Success";
    }
?>

Everything works fine except the alert screen. Anyone here who has an idea what went wrong?

Well your JavaScript code looks like it just immediately posts. — Pointy
– Pointy, Commented Oct 3, 2012 at 15:02

Michael Berkowski · Accepted Answer · 2012-10-03 18:55:36Z

4

Your JavaScript code is "bare", not wrapped in any function or attached to any event handler, and therefore executes as soon as it is loaded - so it immediately posts an empty form when the jQuery script is first parsed.

Place it into the onclick event handler for the submit button:

// When the document has loaded...
$(document).ready(function() {
  // Bind this action as a function to be executed when the button is clicked...
  $('input[type="button"][value="submit contact"]').click(function() {
    $.post('http://mobile.alicante-intermedia.com/submit_contact.php', {

      // These are the names of the form values
      // EDIT: You have the wrong ids on these...

      FirstName: $('#txtfullname').val(),
      LastName: $('#txtemail').val(),
      Email: $('#txtcontact').val(),
      MessageText: $('#txtmessage').val()

      // HTML function

      }, function (html) {
          // Place the HTML in a astring
          var response=html;

          // PHP was done and email sent
          if (response=="success") {
            alert("Message sent!"); 
          } else {

            // Error postback
            alert("Please fill all fields!"); 
            return false;
          }
    });
  });
});

Since it is bound in the JavaScript code, remove the onclick from the button in your markup:

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

Edit:

The PHP you have is looking for values in $_GET, but you have posted them from jQuery. Look instead in $_POST.

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

edited Oct 3, 2012 at 18:55

answered Oct 3, 2012 at 15:05

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

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

16 Comments

AlicaIM Over a year ago

Dreamweaver tells me that there is a syntax error at the end of the script. I tried it, but it´s not doing anything

Michael Berkowski Over a year ago

Appears to have been an unclosed } after the alert()

AlicaIM Over a year ago

ok, that did the trick, but now when i click on the button, nothing happens. have a look at mobile.alicante-intermedia.com/contact.html

Michael Berkowski Over a year ago

Ah, because the button is <input type='button'> rather than <button> as my JS expects. Change the selector to $('input[type="button"][value="submit contact"]')

AlicaIM Over a year ago

ok, i changed the js to

// When the document has loaded... $(document).ready(function() {   // Bind this action as a function to be executed when the button is clicked...   $('input[type="button"][value="submit contact"]').click(function().......

but it´s not working. Now i receive the alert that i need to fill in all fields, which i obviously did

|

Collectives™ on Stack Overflow

Using php form inside phonegap

1 Answer 1

Edit:

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit:

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related