Easiest Way To Make A Form Submit Without Refresh

问题:

I have been trying to create a simple calculator. Using PHP I managed to get the values from input fields and jump menus from the POST, but of course the form refreshes upon submit.

Using Javascript i tried using

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

but this would keep giving an answer of "0" after clicking the button because it could not get values from POST as the form had not been submitted.

So I am trying to work out either the Easiest Way to do it via ajax or something similar

or to get the selected values on the jump menu's with JavaScript.

I have read some of the ajax examples online but they are quite confusing (not familiar with the language)

回答1:

Use jQuery + JSON combination to submit a form something like this:

test.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;
    });

});

回答2:

The best way to do this is with Ajax and jQuery

after you have include your jQuery library in your head, use something like the following

$('#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;
});

Your php would be like so.

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


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

回答3:

I use a new window. On saving I open a new window which handles the saving and closes onload.

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

The php file would contain a bodytag with onload="window.close();" and before that, the PHP script to save the contents of my editor.

Its probably not very secure, but its simple as you requested. The editor gets to keep its undo-information etc.