I have a main HTML page that uses jQuery mobile UI. Somewhere on the HTML page, I have a form that looks 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 form action parameter calls my php file that 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 local WAMP server, and this PHP code is written to the database depending on which version of the radio is selected and sent from the form. These echoes in php are never reached.
The problem is that when I click the "Submit" button, I get a white screen with the word "undefined" in the upper left corner, after which nothing is written to the database. I found that if I delete the line that calls jQuery mobile at the top of the html page everything works fine and the data is written to the database (echoes in php are reached). JQuery mobile seems to be incompatible with my PHP code. How can I fix this? Thank you in advance!
UPDATED (I earned): Here is what I changed in the form:
<form id = "ContactForm" onsubmit="return submitForm();">
The php file with the database remains unchanged. Other than that, I also added 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 a div with data-role = "page") can be sent ONLY via AJAX. This will not work otherwise. I will change the topic to my question in order to attract more people.