CODEWITHSUNDEEP
javascriptjqueryhtml
Humty
Humty

Reputation: 1361

Event needs multiple clicks in Jquery

I am trying to get the response from the PHP scripts but the button takes multiple clicks on firing the event. I read about that on Google but unable to understand that why it is going to happen.

Html Code

<form action="javascript:MyResults()">  
     <input type="submit" value="Search" id ="button1"/>
</form>

Javascript Code

function MyResults(){
    $(document).ready(function(){
        $("#button1").click(function(){
            var searchData = $("#search").val();
            alert(searchData);
            $.ajax({
                url: "http://localhost/test.php",
                type:"POST",
                async:true,
                data:{
                    "search" : searchDat,
                },
                success: function(value){
                    alert( JSON.parse(value));
                    $.each(value, function(index, value1){
                            console.log(value1);
                    });
                }   
            });
        });
    });
}
</script>

Upvotes: 0

Views: 76

Answers (3)

brk
brk

Reputation: 50291

You are declaring $(document).ready(function() inside MyResult function . In first case it will execute the MyFunction & in second case it will execute the code inside the ready function.

Actually there is no need to the action here. Following change will work

HTML

<form id='target'>
      <input type="submit" value="Search" id="button1" />
    </form>

JS

  $(document).ready(function() {
  $("#target").submit(function() {
    event.preventDefault()
    var searchData = $("#search").val();
    alert(searchData);
    $.ajax({
      url: "http://localhost/test.php",
      type: "POST",
      async: true,
      data: {
        "search": searchData,
      },
      success: function(value) {
        alert(JSON.parse(value));
        $.each(value, function(index, value1) {
          console.log(value1);
        });
      }
    });
  });

})

Upvotes: 1

user7937158
user7937158

Reputation:

Here fired one event at two times.

  • First fired when form submit.

    action="javascript:MyResults()"

  • Second fired after form submit which you have defined in the function part.

    $("#button1").click(function(){});

Upvotes: 0

searlea
searlea

Reputation: 8378

The problem is that your current code doesn't set-up the click-handler for button until the form is submitted. That first click triggers the action attribute on the <form>, which sets up the handler. The second click then calls the button handler.

Instead of your current code, you probably want HTML like this:

<form>  
     <input type="submit" value="Search" id ="button1"/>
</form>

Use $(document).ready(...) without the wrapper function MyResults(), and be sure to cancel the click event to stop traditional form submission:

<script>
$(document).ready(function(){
    $("#button1").click(function(event){
        event.preventDefault();
        event.stopPropagation();
        var searchData = $("#search").val();
        alert(searchData);
        $.ajax({
            url: "http://localhost/test.php",
            type:"POST",
            async:true,
            data:{
                "search" : searchDat,
            },
            success: function(value){
                alert( JSON.parse(value));
                $.each(value, function(index, value1){
                        console.log(value1);
                });
            }   
        });
    });
});
</script>

Upvotes: 0

Related Questions