La forma más fácil de hacer un formulario Enviar sin actualizar

Question

He estado tratando de crear una calculadora simple. Utilizando PHP logré obtener los valores de los campos de entrada y los menús de salto del POST, pero por supuesto el formulario se actualiza al enviar.

uso de JavaScript He intentado utilizar

function changeText(){ 
document.getElementById('result').innerHTML = '<?php echo "$result";?>' 

pero esto podría seguir dando una respuesta de "0" después de hacer clic en el botón, ya que no se pueden obtener valores de POST como el formulario no se había presentado.

así que estoy tratando de resolver, ya sea la forma más fácil de hacerlo a través de AJAX o algo similar

o para obtener los valores seleccionados en la de JavaScript con el menú de salto.

He leído algunos de los ejemplos ajax en línea, pero son bastante confuso (que no están familiarizados con el lenguaje)

Answer 1

Uso jQuery + JSON combinación de presentar una forma algo como esto:

prueba.php:

<script type="text/javascript" src="jquery-1.4.2.js"></script> 
<script type="text/javascript" src="jsFile.js"></script> 

<form action='_test.php' method='post' class='ajaxform'> 
<input type='text' name='txt' value='Test Text'> 
<input type='submit' value='submit'> 
</form> 

<div id='testDiv'>Result comes here..</div> 

_test.php:

<?php 
     $arr = array('testDiv' => $_POST['txt']); 
     echo json_encode($arr); 
?> 

jsFile.js

jQuery(document).ready(function(){ 

    jQuery('.ajaxform').submit(function() { 

     $.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         for(var id in data) { 
          jQuery('#' + id).html(data[id]); 
         } 
         } 
     }); 

     return false; 
    }); 

}); 

Answer 2

La mejor manera de hacerlo es con el Ajax y jQuery

después de que haya incluir su jQuery biblioteca en su cabeza, use algo como lo siguiente

$('#someForm').submit(function(){ 
    var form = $(this); 

    var serialized = form.serialize(); 

    $.post('ajax/register.php',{payload:serialized},function(response){ 
     //response is the result from the server. 
     if(response) 
     { 
      //Place the response after the form and remove the form. 
      form.after(response).remove(); 
     } 
    }); 
    //Return false to prevent the page from changing. 
    return false; 
}); 

Su php sería así.

<?php 
    if($_POST) 
    { 
     /* 
      Process data... 
     */ 


     if($registration_ok) 
     { 
      echo '<div class="success">Thankyou</a>'; 
      die(); 
     } 
    } 
?> 

Answer 3

que utilizan una nueva ventana. Al guardar, abro una nueva ventana que maneja el guardado y cierra la carga.

window.open('save.php?value=' + document.editor.edit1.value, 'Saving...','status,width=200,height=200'); 

El archivo php contendría un bodytag con onload = "window.close();" y antes de eso, el script PHP para guardar los contenidos de mi editor.

Probablemente no sea muy seguro, pero es tan simple como lo solicitó. El editor puede mantener su información de deshacer, etc.