SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable Button until all forms have value

    Starts disabled:
    PHP Code:
    <form name="editbox" method="post" action="index.php?page=' . $name . '">
    <
    input type="text" name="name" />
    <
    input type="text" name="email" />
    <
    input disabled="disabled" type="submit" name="sub" />
    </
    form
    is this right i dont know how close it is

    for JS:
    Code JavaScript:
    if (document.getElementByName("name") != "" && document.getElementByName("email") != "") {
    enableField();
    }
     
    function enableField() {
        document.editbox.sub.disabled=false;
     
    }

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,096
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    You're quite close, however:

    - The script only gets run once, you should make it so that it runs every time a user inputs something (add an onkeyup handler on the input fields).
    - Once the button is enabled, it will not be disabled when I clear one of the fields (remember users are scumbags ) (if the if statement fails, disable the button)
    - getElementByName does not exist. There exists a function getElementsByName, which returns a collection of all nodes having the name you're looking for, but I won't advise you to use this. If you add some code before the form with an element that also has the name "name" or "email" the whole function breaks. It would be better to use getElementById (since id's must be unique.)

    This will work:

    PHP Code:
    <form name="editbox" method="post" action="index.php?page=' . $name . '">
    <
    input type="text" name="name" id="editbox_name" onkeyup="validateForm();"/>
    <
    input type="text" name="email" id="editbox_name" onkeyup="validateForm();" />
    <
    input disabled="disabled" type="submit" id="editbox_submit" name="sub" />
    </
    form
    is this right i dont know how close it is

    for JS:
    Code JavaScript:
    function validateForm() {
      if (document.getElementById("editbox_name") != "" && document.getElementById("editbox_email") != "") {
         setField(true);
      } else {
         setField(false);
    }
     
    function setField(bool) {
      document.getElementById("editbox_submit").disabled = bool;
    }

    Note I use onkeyup, and not onchanged. FireFox is running one keystroke behind when using onchange, but works correctly when using onkeyup
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks, Javascirpt is kind of tricky,
    I am wondering for the setField boolean what does that do?
    I see it says....

    ohh I see its nested in the other function, hey thats good


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •