This is the code of index.php that displays a form with a 'Connect Me' button. I suppose that when user will press that button, it will change to 'Connecting...' and will send the POST data to startTransaction.php script (that is in the same directory) and will show a message after the POST data is sent, or else will display an error message if any error occurs. But when I press "Connect Me" it just reloads the page. Contents of index.php are:
< !doctypehtml > < htmllang = "en" > < head > < metacharset = "UTF-8" / > < title > Freecalls, nosignuprequired! < / title > < linkrel = "stylesheet"href = "css/style.css" />
< scriptsrc = "js/jquery.min.js" > </script>
<script src="js/jquery.ui.shake.js"></script>
<script>
$(document).ready(function() {
$('#call').click(function()
{
var caller=$("#caller").val();
var receiver=$("#receiver").val();
var dataString = 'caller='+caller+'&receiver='+receiver;
if($.trim(caller).length>0 && $.trim(receiver).length>0)
{
$.ajax({
type: "POST",
url: "startTransaction.php",
data: dataString,
cache: false,
beforeSend: function(){ $("#call").val('Connecting...');},
success: function(data){
if(data)
{
$('#box').shake();
$("#call").val('Connect')
$("#error").html("<span style='color:#cc0000'>All set! </span> We'll call you in 5 minutes to connect you. ");
}
else
{
$('#box').shake();
$("#call").val('Connect')
$("#error").html("<span style='color:#cc0000'>Error:</span> An error occured.");
}
}
});
}
return false;
});
});
</script>
</head>
<body>
<div id="main">
<h1>Start making free calls now!</h1>
<div id="box">
<form action="" method="post">
<label>What's your number?</label>
<input type="text" name="caller" class="input" autocomplete="off" id="caller"/>
<label>And your friend's? </label>
<input type="text" name="receiver" class="input" autocomplete="off" id="receiver" />
<br/>
<input type="submit" class="button button-primary" value="Connect Me!" id="connect"/>
<span class='msg'></span>
<div id="error">
</div>
// html closing tags here
Please tell me where I am wrong :)
