2012-04-19 5 views
7

Tengo una página principal HTML que utiliza la interfaz de usuario de jQuery mobile. En algún lugar de la página HTML Tengo una forma que es algo así como un formulario de votación:¿Cómo enviar un formulario dentro de una página de jQuery Mobile?

<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> 

El parámetro de acción de la forma está llamando mi archivo php que tiene esta lógica:

<?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); 
?> 

tengo una base de datos creada en mi servidor localhost WAMP y este código php está escribiendo en la base de datos dependiendo de la opción de radio que se elija y envíe desde el formulario. Estos ecos en el php nunca se alcanzan.

El problema es que cuando hago clic en enviar, aparece una pantalla en blanco que dice "indefinido" en la esquina superior izquierda y después de eso, nada se escribe en la base de datos. He encontrado que si elimino la línea que llama al móvil jQuery en la parte superior de la página principal html , todo está funcionando bien y los datos se escriben en la base de datos (se alcanzan los ecos en el php). Parece que jQuery mobile no es compatible con mi código php. ¿Cómo debo solucionar esto? ¡Gracias de antemano!

actualizado (Me hizo trabajar): Esto es lo que ha cambiado en la forma:

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

El archivo PHP con la base de datos sigue siendo el mismo. Aparte de eso, también han añadido un código de Ajax:

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

Para summerize: Páginas jQuery Mobile (páginas interiores div con un data-role = "página") se puede submited SOLAMENTE a través de AJAX. No funcionará de otra manera. Cambiaré el tema a mi pregunta, para que más personas puedan alcanzarlo.

+0

Busque una instrucción 'echo' /' print_r' en su archivo 'logicalDB.php', además de lo que ha proporcionado anteriormente. –

+0

No veo tu jQuery? Sin esto no podemos ver lo que está sucediendo. –

+0

Hola Bibhas, no tengo esto incluido en mi archivo php.Editaré mi pregunta con todo el código php. –

Respuesta

6

He copiado tu código e insertado jquery mobile y después de hacer un par de cambios menores estoy obteniendo datos publicados. Lo ejecuté a través de comandos de eco, no inserciones DB.

Tome un vistazo a la siguiente:

llamada en 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> 

resto de la página index.php:

<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> 

Y, finalmente, el logicDB. php

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

Los cambios primarios fueron a la

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

y la data-ajax="false" he mencionado antes.

Ver si eso funciona para usted.

+0

Ya probé los datos-ajax = "falso" y recibí la pantalla en blanco otra vez sin la palabra indefinida (pantalla en blanco), y no se volvió a escribir en la base de datos ... Leí en algún lado que jQuery Mobile redirige a sus propias páginas y que debería incluir algo más en mi código php, pero no sé qué ... Gracias por su respuesta, de todos modos. –

+0

Sugerencia rápida más allá de mi respuesta más reciente: cambie la sintaxis 'if' por' 'switch',' case'. Los cheques pequeños como el tuyo en realidad no importan, pero en cheques más grandes 'switch',' case' se ejecutan más rápido y se cierran después del éxito, en lugar de recorrer cada 'si' si el primero es correcto o no. – jnthnjns

+1

Hola Asok, gracias por tu sugerencia. Sin embargo, encontré la solución a mi problema. Envié el formulario con AJAX y eliminé la paz del código data-ajax = "false". Editaré mi pregunta con el código que cambié y agregué. –

Cuestiones relacionadas