AJAX and/or JQUERY form POST?

Question

Hi Masters Of Web Programming, here I come with another stupid question, hoping someone will answer me. I'm not very good in AJAX programming but due some situations I must build a completely non-refreshable site. Next question is how to make this form to send a request and return the result, WITHOUT reload of current page?

    <?PHP

function mobio_checkcode($servID, $code, $debug=0) {

    $res_lines = file("http://www.mobio.bg/code/checkcode.php?servID=$servID&amp;code=$code");

    $ret = 0;
    if($res_lines) {

     if(strstr("PAYBG=OK", $res_lines[0])) {
      $ret = 1;
     }else{
      if($debug)
       echo $line."\n";
     }
    }else{
     if($debug)
      echo "Unable to connect to mobio.bg server.\n";
     $ret = 0;
    }

    return $ret;
}


$servID = 29;
$code = $_REQUEST["code"];
$ok = $_REQUEST["ok"];

if($ok) {
    if(mobio_checkcode($servID, $code, 0) == 1) {
     echo "The SMS code is correct!";
    }else{
     echo "Wrong SMS code.";
    }
}else{
?>



<form method="post" name="smscode">
SMS code: <input type="text" size="20" name="code"/>
<input type="submit" name="ok" value=" Submit "/>
</form>
<?PHP } ?>

This form sends request to verify SMS code. It is what providers of this service gave to me. But it's simple php file. I included it to my non-refreshable site but when I press SUBMIT button it refreshes whole current page and then shows the predefined echo.

Answer 1

This helped me a lot when i started doing some ajaxing:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Answer 2

Instead of submit use simple button and bind ajax event to it. Here's the rough example.

    $(document).ready(function(){
       $("#btnId").click(function(){
         $.ajax({
           type: "GET",
            url: "test.js",
           dataType: "script"
         });

       });
     });

Answer 3

Sounds like you need the jquery form plugin.

it will get you the behavior you are describing.

$(document).ready(function() { 
    var options = { 
        // other options left out
        success:       showResponse  // post-submit callback 
    }; 
    $('#myForm1').ajaxForm(options); 
}); 


// post-submit callback 
function showResponse(responseText, statusText)  { 
    alert('response: ' + responseText); 
}

Answer 4

Any one? I'm totally stack over here...

Answer 5

All solutions are not working in my case. Either they don't POST to server or I can't make them show the reply from server, which as you might see is inside the same file

if($ok) {
    if(mobio_checkcode($servID, $code, 0) == 1) {
        echo "The SMS code is correct!";
    }else{
        echo "Wrong SMS code.";
    }

So in this situation can anyone tell me how to reload only the div that contains this file included in it, on SUBMIT button click? Or any other solution will be welcome...