Make submit clickable when form is filled?

[LemonInflux]

I have a form like this:

 

<form action="test.php">
<input name="message" type="text" />
<input type="submit" name="Submit" value="Submit" />
</form>

 

My question is, is there a way to make the submit button be disabled until the text input box has something in it?

 

I know you can disable submits like this: document.formName.submitName.disabled=true;

And I could work out how to make the submit unclickable after form submit (onSubmit), but I can't think of a simple way of doing this.

 

Thanks in advance,

 

Tom

[php7Q]

 

Here you go Tom; try this out and see how it works out for you.

 

<script language="javascript">
function valsub()
{
var field = document.getElementById('msg').value;
if (field.length >= 1 && field != null && field != "")
{
document.getElementById('btn').disabled = false;
}
else {
document.getElementById('btn').disabled = true;
}
}
</script>

<form action="test.php">
<input id="msg" name="message" type="text" onkeyup="valsub()" />
<input id="btn" type="submit" name="Submit" value="Submit" disabled />
</form>

 

 

[LemonInflux]

Absolutely perfect! Thankyou!

 

Topic solved.

 

EDIT: Whatever happened to the topic solved button, anyway?

[php7Q]

 

I don't know; the moderators of this forum aren't to bright (but I have a personal beef with them - so others may few that differently)!

 

But I am glad I could help you out.

[php7Q]

 

But I cannot spell either

 

few = view

[LemonInflux]

ok 

 

One last question, however.

 

When checking for XHTML compliancy, it had an error.

 

<input id="btn" type="submit" name="Submit" value="Submit" disabled />

 

It needs to be disabled="something" apparently. What is the something?

[LemonInflux]

Never mind, fixed it.

 

disabled="disabled"

[php7Q]

 

Cool!

[brown2005]

with the above code if say you had 3 fields that needed to be filled before it became submitable. how would u do that?

[LemonInflux]

<script language="javascript">

function valsub()

{

var field = document.getElementById('msg').value;

var field2 = document.getElementById('field2').value;

var field3 = document.getElementById('field3').value;

if (field.length >= 1 && field != null && field != "" && field2.length >= 1 && field2 != null && field2 != "" && field3.length >= 1 && field3 != null && field3 != "")

{

document.getElementById('btn').disabled = false;

}

else {

document.getElementById('btn').disabled = true;

}

}

</script>

[php7Q]

 

You would then do a little something like this:

 

<script language="javascript">
function valsub()
{
var field = document.getElementById('msg').value;
var field2 = document.getElementById('msg2').value;
var field3 = document.getElementById('msg3').value;
if (field.length == 0 || field == null && field == "")
{
document.getElementById('btn').disabled = true;
}
else if (field2.length == 0 || field2 == null && field2 == "")
{
document.getElementById('btn').disabled = true;
}
else if (field3.length == 0 || field3 == null && field3 == "")
{
document.getElementById('btn').disabled = true;
}
else {
document.getElementById('btn').disabled = false;
}
}
</script>

<form action="test.php">
<input id="msg" name="message" type="text" onkeyup="valsub()" />
<input id="msg2" name="message2" type="text" onkeyup="valsub()" />
<input id="msg3" name="message3" type="text" onkeyup="valsub()" />
<input id="btn" type="submit" name="Submit" value="Submit" disabled />
</form>

 

I mean, there are other ways to go about do that; but using my original example above - you would do something like this.

[brown2005]

thanks very much

[php7Q]

 

Or you could go with LemonInflux's example.

[LemonInflux]

yay 

[php7Q]

 

Nice One Tom - Good Job - LOL

[LemonInflux]

Hooray for javascript. It's a great language, I'm enjoying learning it. My only problem with it, is I can't find an online manual (as in, full manual, like php.net for php). I seem to have to go trawling through google to find what I want. 

[php7Q]

 

Yeah man, I know what you mean. That's how I learned allot of stuff - "Googled It". Bought a book or two and hung-out on forums; kind of like this one (lol). Guess that is the price we pay to play the game.

[LemonInflux]

Yeah.  It'll be worth the trawling in the end.

[php7Q]

 

Yeah, Your Probably Right - Don't Let It Drive You Mad In The Process - LOL

 

Coding Can Become An Addiction - LOL

[LemonInflux]

OK, final question 

 

I'm doing a bit of ajax.

 

I want this form to submit to addComment.php without refreshing

 

I've figured out I'm probably going to pass the comments through the URL, so...

 

What I want to do is have my form so that when submit is clicked, the ajax goes to addComment.php?comment=myComment&user=userName or whatever it needs to go to. So, how do I get the value of input without submitting the form to another page?

[php7Q]

 

Check out this tutorial; it should get you on the right track:

 

http://www.tizag.com/ajaxTutorial/ajaxform.php

 

- Good Luck

[LemonInflux]

Yeah, there's one like that on w3schools. The only problem with it, is I do need a submit button. I don't want anything to be done with the input until it is submitted.

[php7Q]

 

You see where the function is being triggered; with the onchange() event, in the input text field? All you need to do is remove the onchange event from the input text field and add the "ajaxFunction()" to a button (that has an onclick event).

 

Example:

 

<input type="button" onclick="ajaxFunction()" value="Submit">

[LemonInflux]

oh yeah, duh  I should have guessed that one.

 

Thanks!

[php7Q]

 

No Problem