CODEWITHSUNDEEP
javascriptjqueryhtml
Yohan Blake
Yohan Blake

Reputation: 1318

Stop javascript firing when page is loaded

I'm calling this function onload on the body using <body onload="dis()">

function dis(){
    if($('#stname').val() == ""){
        $('#update').hide();
        $('#newstore').show();
    }
    else {
        $('#update').show();
        $('#newstore').hide();
    }
}

Basically I want to check if a particular input box is empty or not on load. If it's empty, newstore button should show. If not, it should show the update button. But this way, it works as I want when page loads, but when I type something in the stname, the buttons switch. What's the way to counter this? Is there a way to stop the javascript firing when the page is finished loading?

Upvotes: 2

Views: 772

Answers (5)

Shaggy
Shaggy

Reputation: 6796

To offer you an alternative solution you may not have considered: this can be achieved in CSS, without any JavaScript, using the adjacent sibling & attribute selectors and the negation pseudo-class, assuming the input element shares the same immediate parent as the button elements, or their parent element, like so:

#stname[value=""]~[#parent ]#update,#stname:not([value=""])~[#parent ]#newstore{
    display:none;
}

Upvotes: 0

channasmcs
channasmcs

Reputation: 1156

you can use DOM inteand of body load . A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

$( document ).ready(function() {
   $('#update').show();
   $('#newstore').hide();

  // run this if field empty
  if($('#stname').val() == ""){
      $('#update').hide();
      $('#newstore').show();
  }

});

for more https://learn.jquery.com/using-jquery-core/document-ready/

Upvotes: 0

Rohit Agre
Rohit Agre

Reputation: 1528

What you need to do is

$(window).on("load",function(){
    if($('#stname').val() == ""){
        $('#update').hide();
        $('#newstore').show();
    }
    else {
        $('#update').show();
        $('#newstore').hide();
    }
})

Upvotes: 2

JSchirrmacher
JSchirrmacher

Reputation: 3354

Additionally to set the visibility on page load, you must change it when the content of your field is changed. You could use the "change" event on this field like

var field = $("#stname");

field.on("change", function() {
    $("#update").toggle(field.val() === "");
    $("#newstore").toggle(field.val() !== "");
});

The toggle() works like hide() and show() together, taking a boolean parameter to either show (true) or hide (false).

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

Do the check when the document DOM is ready, which is easy to do since you are using JQuery:

$(document).ready(function(){
    if($('#stname').val() == ""){
        $('#update').hide();
        $('#newstore').show();
    }
    else {
        $('#update').show();
        $('#newstore').hide();
    }
});

Upvotes: 1

Related Questions