Home/ Questions/Q 7832699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T12:21:33+00:00

I have a HTML main page which is using jQuery mobile’s UI. Somewhere on

  • 0

I have a HTML main page which is using jQuery mobile’s UI. Somewhere on the HTML page I have a form which is something like a voting form:

<form name = "vote" action = "logicDB.php" method = "post">
                    <center>
                        <h3>Watch our videos above and share your opinion which manufacturer produces the best sport sedans</h3>                
                        <fieldset style = "width:60%;">
                            <legend>Choose a car:</legend>
                            <input type = "radio" name = "rc1" id = "radio-choice-1" value = "Audi"/>
                            <input type = "radio" name = "rc1" id = "radio-choice-2" value = "BMW"/>
                            <input type = "radio" name = "rc1" id = "radio-choice-3" value = "Mercedes"/>           
                        </fieldset>                 
                        <input value = "SUBMIT" type = "submit" />
                    </center>
</form>

The action parameter of the form is calling my php file which has this logic:

<?php
$connection = mysql_connect("localhost","root","myPassword");
if(!$connection){ die('Could not connect: ' . mysql_error()); }

mysql_select_db("mydatabase", $connection);

if ($_POST['rc1'] == 'Audi')
{   
    mysql_query("
    UPDATE carvote
    SET votes = votes + 1
    WHERE Brands = 'Audi'
    ",$connection);

    echo "success Audi within if";
}

if ($_POST['rc1'] == 'BMW')
{
    mysql_query("
    UPDATE carvote
    SET votes = votes + 1
    WHERE Brands = 'BMW'
    ",$connection);

    echo "success BMW within if";
}

if ($_POST['rc1'] == 'Mercedes')
{
    mysql_query("
    UPDATE carvote
    SET votes = votes + 1
    WHERE Brands = 'Mercedes'
    ",$connection);

    echo "success Mercedes within if";
}
mysql_close($connection);
?>

I have a database created on my WAMP localhost server and this php code is writing to the database depending on which radio option is chosen and submitted from the form. These echoes in the php are never reached.

The problem is that when I click submit I get a white screen saying “undefined” in the top left corner and after that nothing is written to the database. I have found that if I remove the line which calls the jQuery mobile at the top from the html main page
everything is working fine and data is written to the database (the echoes in the php are reached).
It seems that jQuery mobile is not compatible with my php code. How should I fix this?
Thank you in advance!

UPDATED (I made it work):
Here is what I changed in the form:

<form id = "ContactForm" onsubmit="return submitForm();">

The php file with the database remains the same. Other than that I have also added an Ajax code:

function submitForm()
    {
        $.ajax({type:'POST', url: 'logicDB.php', data:$('#ContactForm').serialize(), success: function(response)
        {
            $('#ContactForm').find('.form_result').html(response);
        }});
        return false;
    }

To summerize: jQuery Mobile pages (pages inside div with a data-role = “page”) can be submited ONLY via AJAX. It won’t work otherwise.
I will change the topic to my question, so that more people can reach it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I copied your code and inserted jquery mobile and after making a couple minor changes I am getting data posted. I ran it through echo commands, not DB inserts.

    Take a look at the following:

    Call on Jquery Mobile:

    <!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

    Rest of index.php page:

    <div data-role="page">
<center>
    <h3>Watch our videos above and share your opinion which manufacturer produces the best sport sedans</h3>                
    <form name="vote" action="logicDB.php" method="post" data-ajax="false">
        <fieldset style = "width:60%;" data-role="controlgroup">
            <legend>Choose a car:</legend>
            <input type = "radio" name="rc1" id = "radio-choice-1" value = "Audi"/>
            <label for="radio-choice-1">Audi</label>

            <input type = "radio" name="rc1" id = "radio-choice-2" value = "BMW"/>
            <label for="radio-choice-2">BMW</label>

            <input type = "radio" name="rc1" id = "radio-choice-3" value = "Mercedes"/>
            <label for="radio-choice-3">Mercedes</label>                            
        </fieldset>                 
        <input value = "SUBMIT" type = "submit" />
    </form>
</center>

    And finally the logicDB.php

    if ($_POST['rc1'] == 'Audi') {
 echo "Audi <br>";
}
if ($_POST['rc1'] == 'BMW') {
 echo "BMW <br>";
}
if ($_POST['rc1'] == 'Mercedes') {
 echo "Mercedes <br>";
}

    The primary changes were to the 

    <fieldset style = "width:60%;" data-role="controlgroup">

    and the data-ajax="false" I mentioned prior.

    See if that works for you.

    • 0