CODEWITHSUNDEEP
javascript
Bear John
Bear John

Reputation: 3335

disable a form submit button until a textarea has been populated?

can someone please help because i have tried various javascripts to get my form submit button to stay disabled until a user enters text into the textarea but nothings working.

i want the submit button to be disabled until a user enters some text. any suggestions please?

  <form action="includes/welcomebio.php" method="post" id="form12" class="form12">          
 <textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="checkWordCount();" data-required="true"><?php echo htmlspecialchars($profile['bio']); ?></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>

    <script type="text/javascript"> 
function disable() 
{ 
if(document.textarea.bio.value=="") 
{ 
document.textarea.submit.disabled=true; 
} 
else 
{ 
document.textarea.submit.disabled=false;    
} 
} 
</script>

Upvotes: 1

Views: 2377

Answers (3)

polin
polin

Reputation: 2845

try this

     <body onload="disable()">
 <form action="includes/welcomebio.php" method="post" id="form12" class="form12">          
 <textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="disable();checkWordCount();" data-required="true"></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>
</body>
    <script type="text/javascript"> 
function disable() 
{ 
    if(document.getElementById("bio").value=="") 
    { 
    document.getElementById("submit").disabled=true; 
    } 
    else 
    { 
    document.getElementById("submit").disabled=false;    
    } 
} 
</script>

Upvotes: 0

musefan
musefan

Reputation: 48425

There are many things wrong with your code:

  1. Try not to use inline javascript
  2. your textarea onKeyUp calls a function that does not exist
  3. you are trying to set the disabled state of the wrong element (you actually have invalid javascript)
  4. you have some invalid html too

This is what you want:

HTML

<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
    <textarea id="bio" name="bio" data-id="bio" data-required="true" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales.">
        <?php echo htmlspecialchars($profile['bio']); ?>
    </textarea>
    <input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit" />
</form>

JAVASCRIPT

window.onload = function () {
    document.getElementById("bio").onkeyup = checkWordCount;
    checkWordCount();
};

function checkWordCount() {
    if (document.getElementById("bio").value == "") {
        document.getElementById("submit").disabled = true;
    } else {
        document.getElementById("submit").disabled = false;
    }
}

Here is a working example

Upvotes: 3

c.P.u1
c.P.u1

Reputation: 17094

You are trying to disable the textarea instead of the submit button. Your code isn't valid JavaScript. Keep the submit button disabled initially and enable it only when the textarea has something in it. Also, since you're using a placeholder for the textarea, your textarea would never be empty, so a check for

document.getElementById("bio").value = ""

would always return false unless the user changes it.

Upvotes: 0

Related Questions