If textbox value ==, then enable the disabled submit button

Forum Moderators: open

Message Too Old, No Replies

If textbox value ==, then enable the disabled submit button

enabling submit button if valued entered is correct

rjpowell

7:47 pm on Feb 19, 2010 (gmt 0)

Howdy!

I'm trying to create a situation where, a submit button is disabled by default. To enable that button, you need to enter the correct text value (a discount code). Below is what I have so far, and yes I don't know much JS.


function checkEnableSubmit() {
 if (text1.value,"GOLD10") 
  {document.getElementById("2").disabled = false;}
 else 
  {document.getElementById("2").disabled = true;}
}


<form action="xx" method="post" name="test">
<input type="text" name="text1">

<input type="button" value="Apply" name="apply" onclick=javascript:checkEnableSubmit() >


<input type="submit" disabled="disabled" id="2" value="Buy Now" name="submit">
</form>

Fotiman

9:17 pm on Feb 19, 2010 (gmt 0)

Welcome to WebmasterWorld!

1. It's not a good idea to disable the submit button by default. Users with JavaScript disabled will never be able to enabled that button.

2. Is this an attempt to prevent form spam (sort of CAPTCHA approach)? If so, you should seek an alternate path. This will may work to prevent average Joe from submitting, but spammers may bypass your form entirely.

3. Fix your onclick handler. There is no such thing as a "javascript:" protocol, so don't include those in your HTML. It should just be:
onclick="checkEnableSubmit();"

4. You can't have id values that begin with a number. so id="2" is invalid. Change it to something like id="submitBtn"

5. Avoid giving submit buttons a name or id of "submit" because the form DOM object already has a submit method, and this can cause problems. Change it to something like name="submitBtn"

6. You should give your text1 input an id value (for example, use the same value as the name). So add this:
id="text1"

6. Your function should look like this:


function checkEnableSubmit() {
  var text1 = document.getElementById('text1'),
    submitBtn = document.getElementById('submitBtn');
  submitBtn.disabled = (text1.value != "GOLD");
}

Hope that helps.

rjpowell

9:47 pm on Feb 19, 2010 (gmt 0)

Wow, I just learned a lot from your reply, thanks so much!

I changed the code based on your recommendations and still can't get it to work, here's what I've got now:

<script type="text/javascript">
function checkEnableSubmit() { 
 var text1 = document.getElementById('text1'), 
 submitBtn = document.getElementById('submitBtn'); 
 submitBtn.disabled = (text1.value != "GOLD"); 
} 
</script>

</head>
<body>

<form action="xx" method="post" name="test">
<input type="text" name="text1">
<input type="button" value="Apply" name="apply" onclick="checkEnableSubmit();" >
<input type="submit" disabled="disabled" id="submitBtn" name="submitBtn" value="Buy Now">
</form>

rjpowell

9:52 pm on Feb 19, 2010 (gmt 0)

Nevermind, I just saw I had to assign an id="text1" to the input box!

FYI, the reason I'm doing this is because the button is actually going to be a buy it now paypal button. Paypal does not provide the functionality to enter discount codes (with their hosted buttons) so I'm putting two paypal buttons on my site, and if you enter the correct "coupon code" the paypal button that is discounted is enabled.

Thanks again!