jQuery - why it's not working?

Question

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

$('#call').click(function() -- but dont see an element with id call? — Veeru, Oct 22 '14 at 13:23
Check your syntax — the first line of your code contains too much white space, and jQuery is not even loaded because of this problematic line: `< scriptsrc = "js/jquery.min.js" > ` — Terry, Oct 22 '14 at 13:23
Submitting a form will always reload page, instead of submitting form you need to just execute javascript on click. — Joel Harkes, Oct 22 '14 at 13:23
Please next time, use a more descriptive title regarding your issue — A. Wolff, Oct 22 '14 at 13:29

Davide Pastore · Accepted Answer · 2014-10-22T13:39:32.447

3

The id of the button is connect and not call.

$('#connect').click(function(){
   //Click on the button
});

edited Oct 22 '14 at 13:39

answered Oct 22 '14 at 13:24

Davide Pastore

8,317
10
37
49

score 2 · Answer 2 · answered Oct 22 '14 at 13:23

2

your script tag to include jquery seems incorrect

< scriptsrc = "js/jquery.min.js" > </script>

should be (missing space between script and src)

<script src = "js/jquery.min.js" > </script>

answered Oct 22 '14 at 13:23

Gal Ziv

5,344
9
29
41

score 1 · Answer 3 · edited May 23 '17 at 11:49

You need this:

// this is the id of the form
$("#idForm").submit(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
               //Or your own code to execute when response is successful
           }
         });

    return false; // avoid to execute the actual submit of the form.
});

From: https://stackoverflow.com/a/6960586/1275832

jQuery - why it's not working?

3 Answers3