SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable / enable submit button prior to filling everything out?

    So I have a few inputs that the user must fill out before they can submit. How can this be done with the following text input and select element?

    Code:
    <input id="project_input" type="text" name="peer_project" onclick="this.value='';" onmousemove="enable_submit();" value="What project was this?" />
    <select name="peer_group"><option value="What group did you belong to?">What group did you belong to?</option><option value="group_1">Group 1</option><option value="group_2">Group 2</option></select>
    I had some JavaScript that I was working on for the "enable_submit()" function in the above text-box, but as can be expected, it didn't work. It would activate the submit upon mouseover regardless of what was in the input at that moment. I would love to know what I did wrong with it (see below):
    Code:
    function enable_submit(){
    	if((document.getElementById("project_input").value != 'What project was this?') || (document.getElementById("project_input").value != '')){
    		document.getElementById("submit").disabled = false;
    	}
    }

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You are testing if either the field is something other than "What project is this?" or is something other than "". The only time that isn't true is when the field contains both values at the same time and since it can only have one value at a time the condition you are testing for can never happen. You need && in place of the ||

    You should also use JavaScript to disable the submit button in the first place so that when JavaScript is disabled that it is still possible to submit the form.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stephen, you rock. :.)

    But I swore I tried that... Oh well, it's working now! Thanks!

    One more question: what if I have a bunch of inputs to check against? What would you advise as being the most efficient way to check them? Just add all of their conditions to the IF clause???

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    I would do it as separate if statements so that you can tell the person which field(s) need to be corrected.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •