Jump to content


Photo

[SOLVED] help with disabling submit button


  • Please log in to reply
3 replies to this topic

#1 jdubwelch

jdubwelch

    Advanced Member

  • Members
  • PipPipPip
  • 85 posts

Posted 08 December 2007 - 07:21 PM

Ideally, I would like my submit button to be disabled until all the fields are filled in.

I had a go at it by having a "check" button (which i think is unneccessary, but I don't know how to do it otherwise).  I followed a tutorial on disabling submit, but it wasn't exactly what I am trying to do and it's not enabling my submit button.

I need help with:
1. Having the submit button being disabled until all the forms are filled in.
2. If it can be done without my lame  "check" button that'd be awesome too.

<form action="" method="post" name="myForm">
<table width="752" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="135">AWAY</td>
    <td width="133">HOME</td>
    <td width="132">WINNER</td>
    <td width="132">&nbsp;</td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" onClick="setWinner('Oregeon State',0);" id="linkaway0">Oregon State</a></td>
    <td><a href="javascript:void(0);" onClick="setWinner('Oregon',0);" id="linkhome0">Oregon</a></td>
    <td id="row0">&nbsp;</td>
	<td><input name="ot0" type="text" id="ot0" size="3" /></td>
	<input type=hidden id="winner0" name="winners[]" value="">
  </tr>
  <tr>
    <td><a href="javascript:void(0);" onClick="setWinner('Washington',1);" id="linkaway1">Washington</a></td>
    <td><a href="javascript:void(0);" onClick="setWinner('Washington State',1);" id="linkhome1">Washington State</a></td>
    <td id="row1">&nbsp;</td>
	<td><input name="ot1" type="text" id="ot1" size="3" /></td>
	<input type=hidden id="winner1"  name="winners[]" value="">
  </tr>
  <tr>
    <td colspan="4"><div align="center"><input name="checkForm" type="button" id="checkForm" onClick="checkForm()" value="Check" />
      <input name="Submit" type="submit" disabled value="submit" id="submitButton" /></div></td>
    </tr>
</table>
</form>

<script language="JavaScript" type="text/javascript">
<!--
	function setWinner(clickedObjId,row)
	{
		document.getElementById('row'+row).innerHTML = clickedObjId;
		document.getElementById('winner'+row).value = clickedObjId;
	}
	
	function checkForm () {
		
		for (var i=0; i<=1; i++) {
			
			if ( document.getElementById('winner' + i).value == "" ) {
				alert ( "Please enter your zip." );
				document.getElementById('row' + i).focus();
				return false;
			}
		}
		
		if (true) {
			myForm.Submit.disabled = true;
		}
	}
// -->
</script>


#2 phpQuestioner

phpQuestioner

    Advanced Member

  • Members
  • PipPipPip
  • 1,485 posts

Posted 08 December 2007 - 09:44 PM

<script language="JavaScript" type="text/javascript">

	function setWinner(clickedObjId,row)
	{
		document.getElementById('row'+row).innerHTML = clickedObjId;
		document.getElementById('winner'+row).value = clickedObjId;
	}
	
	function checkMyForm () {
	
		for (var i=0; i<=1; i++) {
			
			if ( document.getElementById('winner' + i).value == "" ) {
				alert ( "Please enter your zip." );
				document.getElementById('row' + i).focus();
				return false;
			}
		}
		
		if (true) {
			document.getElementById('submitButton').disabled = false;
		}


	}

</script>

</head><body>

<form action="" method="post" name="myForm">
<table width="752" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="135">AWAY</td>
    <td width="133">HOME</td>
    <td width="132">WINNER</td>
    <td width="132">&nbsp;</td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" onClick="setWinner('Oregeon State',0);" id="linkaway0">Oregon State</a></td>
    <td><a href="javascript:void(0);" onClick="setWinner('Oregon',0);" id="linkhome0">Oregon</a></td>
    <td id="row0">&nbsp;</td>
	<td><input name="ot0" type="text" id="ot0" size="3" /></td>
	<input type=hidden id="winner0" name="winners[]" value="">
  </tr>
  <tr>
    <td><a href="javascript:void(0);" onClick="setWinner('Washington',1);" id="linkaway1">Washington</a></td>
    <td><a href="javascript:void(0);" onClick="setWinner('Washington State',1);" id="linkhome1">Washington State</a></td>
    <td id="row1">&nbsp;</td>
	<td><input name="ot1" type="text" id="ot1" size="3" /></td>
	<input type=hidden id="winner1"  name="winners[]" value="">
  </tr>
  <tr>
    <td colspan="4"><div align="center"><input name="checkForm" type="button" id="checkForm" onclick="checkMyForm()" value="Check" />
      <input name="Submit" type="submit" disabled value="submit" id="submitButton" /></div></td>
    </tr>
</table>
</form>

You will need the "Check" button or some other object/element process the "checkMyForm()" function. You could use any element/object and most any event (doesn't necessarily have to be an "onclick" event) to trigger the "checkMyForm()" function.

#3 jdubwelch

jdubwelch

    Advanced Member

  • Members
  • PipPipPip
  • 85 posts

Posted 09 December 2007 - 02:30 AM

would it be possible to make a function that would count everytime they "changed" and input box and say there are 15 input boxes on the page.  When the function got to 15 it would enable the submit button.

Ideas?

#4 phpQuestioner

phpQuestioner

    Advanced Member

  • Members
  • PipPipPip
  • 1,485 posts

Posted 09 December 2007 - 03:11 AM

yeah - but they could just change the same input field 15 times and not fill out the other 14 input fields. your best off to go with the way you got it now.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com