I have 3 files:
f1.php
<?php
echo 'dis';
?>
f2.js
$.ajax({
url: "scripts/f1.php",
success: function (rsp){
// if its not exist
if(rsp == "dis"){
$("#sbmt_a").attr("disabled", "disabled"); //Disable Button
//return = true;
}
else{
$("#sbmt_a").removeAttr("disabled");
// return = false;
}
}
})
p1.php
//include f2.js - this is removed. code from f2.js is added at the bottom just before </body>
<body>
<form>
...
<button id="sbmt_a" name="sbmt_a" class="eee">Submit</button>
</form>
$(document).ready(function(){
$.ajax({
url: "scripts/f1.php",
success: function (rsp){
// if its not exist
if(rsp == "dis"){
$("#sbmt_a").attr("disabled", "disabled"); //Disable Button
//return = true;
}
else{
$("#sbmt_a").removeAttr("disabled");
// return = false;
}
}
})
});
</body>
Now if I add in my js file something like form.submit(function(){ I can use the $.ajax code and do whatever I like.
But is there a way to run the $.ajax code when someone visits my page? I mean when my page loads/reloads and the echo in f1.php is "dis" the form button becomes disabled.
Yes. Simply run the ajax code when page finishes loading
$(function(){
$.ajax({
url: "scripts/f1.php",
success: function (rsp){
// if its not exist
if(rsp == "dis"){
$("#sbmt_a").attr("disabled", "disabled"); //Disable Button
//return = true;
}
else{
$("#sbmt_a").removeAttr("disabled");
// return = false;
}
}
});
});
Just put the $.ajax call in your document.ready function like:
$(document).ready(function(){
$.ajax({
url: "scripts/f1.php",
success: function (rsp){
// if its not exist
if(rsp == "dis"){
$("#sbmt_a").attr("disabled", "disabled"); //Disable Button
//return = true;
}
else{
$("#sbmt_a").removeAttr("disabled");
// return = false;
}
}
}) });
You may put in your AJAX call within in the page p1.php
$(document).ready(function() {
// Handler for .ready() called.
});
In most cases, this event triggers as soon as the DOM hierarchy has been fully constructed.