jdubwelch Posted December 9, 2007 Share Posted December 9, 2007 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"> </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"> </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"> </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> Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 9, 2007 Share Posted December 9, 2007 <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"> </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"> </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"> </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. Quote Link to comment Share on other sites More sharing options...
jdubwelch Posted December 9, 2007 Author Share Posted December 9, 2007 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? Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 9, 2007 Share Posted December 9, 2007 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.