jQuery Mobile使用不含AJAX和JavaScript的PHP提交

Question

Sorry, I consider myself as a real newbie around jQuery Mobile. I'm not good at all regarding JavaScript. Here's the thing. I want to build a jQuery Mobile site without using AJAX. Just want the nice design from jQuery Mobile and then use PHP to submit forms etc.

I tried to build a simple page that submit first and last name to a MySQL database. It will submit, tell the user that it's submitted and then the user can press [Page 2] to see all the results. Now I use if(isset()) to display the message and else to display the form. So, the user who enter the site will get the form, when press [Submit] he/she will get the message that first and last name was submitted. Then press the button [Page 2] to see all the first and last names.

PHP (index.php)

if(isset($_POST['send'])) {

    $insert = $db->prepare("INSERT INTO name (fname, lname) VALUES(:fname, :lname)");
    $insert_array = array(
        ":fname" => $_POST['fname'],
        ":lname" => $_POST['lname']
    );

    $insert->execute($insert_array);

    $db = NULL;

    echo $_POST['fname'] . ' ' . $_POST['lname'] . ' was added!<br><br>';
}

else {
    echo '
    <form method="post" data-ajax="false">

        First name:
        <input type="text" name="fname"><br>

        Last name:
        <input type="text" name="lname"><br>

        <input type="submit" name="send" value="Add">

    </form><br>';
}

<a href="page2.php" data-role="button">Page 2</a>

PHP (page2.php):

$query = $db->query("SELECT * FROM name");

while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo $row['fname'] . ' ' . $row['lname'] . '<br>';
}

$db = NULL;

echo '<a href="index.php" data-role="button">Index</a>';

Let's say I enter "Test" as first and last name. It will echo out "Test Test was added!". If I now press [Page 2] I will see that "Test Test" was added. BUT when I then press [Index] to go back I want it to display the form again, but the message "Test Test was added!" is displayed again instead of the form, why? I have to update the page to get the form. Now, if I enable data-ajax it's working with submitting and back-button. BUT then I have to press update at page2.php when I get there to see all the first and last names. Do I make myself understood what's the problem?

Sorry, really new at jQuery Mobile and I can't find the answer at Google. Everyone is using JavaScript to submit data. Is it possible this way or do I have to learn JavaScript to submit forms? Read somewhere that using buttons instead of submit-buttons affect it.

Thanks in advance! :)

Answer 1

I think you are looking to modify the DOM after the request? So post the form, add the user then display the results without having to click the button.

So on your ajax call use the done function to hide the form and show the results.

Take a look below and let me know if it helps.

EDIT: Added the .on click for the button. You may also want to look at adding a keypress checker to the inputs or an onsubmit on the form.

<div id="content">
<?php
if(isset($_POST['send'])) {

    $insert = $db->prepare("INSERT INTO name (fname, lname) VALUES(:fname, :lname)");
    $insert_array = array(
        ":fname" => $_POST['fname'],
        ":lname" => $_POST['lname']
    );

    $insert->execute($insert_array);

    $db = NULL;

    echo $_POST['fname'] . ' ' . $_POST['lname'] . ' was added!<br><br>';
}

else {
    echo '
    <form method="post" data-ajax="false" id="contentForm">

        First name:
        <input type="text" name="fname"><br>

        Last name:
        <input type="text" name="lname"><br>

        <input type="submit" name="send" value="Add" id="sendButton">

    </form><br>';
}
?>
</div>

<script type='text/javascript'>
<!-- https://api.jquery.com/jQuery.ajax/ -->
$('#sendButton').on("click", function(){ 
    $.ajax({
      type: "POST",
      url: "page2.php",
      data: $('#contentForm').serialize()
    })
      .done(function( msg ) {
        $('#content').html( msg );
    });
});
</script>