CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Benedict Lee
Benedict Lee

Reputation: 59

Execute ajax function when button is clicked

I am trying to create a webpage that could check if a url is good or bad. The webpage is simple. There should be only a button on the webpage. Whenever the button is clicked it will check the status of the url. As a test case let's say I am checking for google.com. The problem is how do I connect the ajax function parameter with the html parameter? Here is what I got so far.

<input type="button" id="home" onclick="validate()" value="Start"/>
<br>
<p>Google Status: %s</p>
<script>
$('#home').click(function(){
  var string;
  $.ajax({
     type:'get',
     url:"https://www.google.com/",
     cache:false,
     async:asynchronous,
     dataType:json,
     success: function(result) {
         string = 'Working';
     }
     error: functionfunction(result){
         string = 'Failed';
     }
  });
});
</script>

Upvotes: 0

Views: 1270

Answers (3)

Anoop
Anoop

Reputation: 23208

Update text after ajax response

<input type="button" id="home" onclick="validate()" value="Start"/>
<br>
<p id='status'>Google Status: %s</p><!-- >change<-->
<script>
$('#home').click(function(){
var string;
 $.ajax({
     type:'get',
     url:"https://www.google.com/",
     cache:false,
     async:asynchronous,
     dataType:json,
     success: function(result) {
         $("#status").html("Google Status: Working"); // change
    }
     error: functionfunction(result){
         $("#status").html("Google Status: Failed");// change
    }
    }
);
});
</script>

Upvotes: 1

Luke Benting
Luke Benting

Reputation: 168

There were many errors in the ajax call itself, but the main changes I have made are to update the html of the statusText paragraph inside the success and error handlers and removed the onClick event from the button since you are adding the event handler in javascript.

<input type="button" id="home" value="Start"/>
<br>
<p id="statusText">Google Status:</p>
<script>
$('#home').click(function(){
    $.ajax({
        type:'get',
        url:"https://www.google.com/",
        cache:false,
        async:true,
        dataType:'json',
        success: function(result) {
           $("#statusText").html("Google Status: Working");
        },
        error: function(result){
           $("#statusText").html("Google Status: Failed");
        }
    });
});
</script>

Upvotes: 0

Julio Elgueta
Julio Elgueta

Reputation: 11

You need to reference the HTML Controls with JQUery, And you are missing some commas, look at this fiddle:

https://jsfiddle.net/0g9zbzqr/3/

        $('#home').click(function(){
        $.ajax({
             url:$('#url').val(),
             type:'get',
             async:false,
             success: function(result) {
                 $("#lblResult").html($('#url').val()+': Working');
            },
             error: function(result){
                 $("#lblResult").html($('#url').val()+': Failed');
            }
            });

   });

Upvotes: 0

Related Questions