Change input type through Javascript

Discussion in 'JavaScript' started by tobik999, Feb 28, 2010.

0
  1. #1
    HI,
    I want to have a form where the user have to type in text, if the text reaches a certain amount of words (10 for example) he will be allowed to submit. I am totally new to Javascript, so please do not be that ... with me. Here is something I have written, but as it does not work I guess it is completely stupid ;)
    <html>
<body>

<script type="text/javascript">
function countWords(){
	document.form1.wordcount.value = document.form1.inputString.value.split(' ').length;
var count=document.form1.inputString.value.split(' ').length;
}
if(count>10)
{
	document.form1.Send.type = 'button';
  }
else 
{
	document.form1.Send.type = 'hidden';
}
</script>

<form name="form1" method="post">
<textarea name="inputString" cols="50" rows="4">Text to count</textarea>
<br>
<input type="button" name="Convert" value="Count Words" onClick="countWords();"> 
<input name="wordcount" type="text" value="" size="6"><br />
<input type="" name="Send" value="Send"> 
</form>

</body>
</html>
    Code (markup):

     
    tobik999, Feb 28, 2010 IP
  2. Nyu

    Nyu Peon

    Messages:
    79
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Instead of changing the button type just add a onsubmit attribute to the form where you allow or deny to submit the form.

    
<form name="form1" method="post" onsubmit="countWords()">
... 
</form>
    Code (markup):
    Within the "countWords" function you can use your existing code to check for the word count and then return true if you want to submit to form, otherweise return false ;)
     
    Nyu, Mar 1, 2010 IP
  3. tobik999

    tobik999 Peon

    Messages:
    52
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Now it works the code looks like this ;) :
    <html>
<body>

<script type="text/javascript">
function countWords(){
	document.form1.wordcount.value = document.form1.inputString.value.split(' ').length;
}

function checkWords(){
var returnval;
var check;
	check = document.form1.inputString.value.split(' ').length;
if(check<10)
{
   alert("text needs at least x words");
	returnval = false;
  }
else 
{

	returnval = true;
}
return returnval;
}
</script>

<form name="form1" method="post" onsubmit="return checkWords()" action="">
<textarea name="inputString" cols="50" rows="4">Text to count</textarea>
<br>
<input type="button" name="Convert" value="Count Words" onClick="countWords();"> 
<input name="wordcount" type="text" value="" size="6"><br />
<input type="submit" name="Send" value="Send"> 
</form>

</body>
</html>
    Code (markup):
     
    Last edited: Mar 1, 2010
    tobik999, Mar 1, 2010 IP