• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9036
  • Last Modified:

ENABLE/DISABLE TEXT BOX

I have a page with many text boxes. I want to limit the user to submitting info from only one text box.

The script should either disable all text boxes except for the one the user is typing into or it should check the values of all text boxes to make sure only one of them has data entered.

The script should also be generic in form and apply to all text boxes on the page.

Hope you can help! Thanks.
0
yourbudweiser
Asked:
yourbudweiser
  • 6
  • 4
  • 2
  • +1
1 Solution
 
justinbilligCommented:
why not just have one text box?
0
 
yourbudweiserAuthor Commented:
Well, I am reading values from a database and there are 17 entries. I give the user the option of changing any one of those entries.

Example:

ABC     Current Setting:123     Change to: _____
DEF     Current Setting:231     Change to: _____
GHI      Current Setting:1.2     Change to: _____    

Etc....
0
 
justinbilligCommented:
well that isnt very scalable, but to make sure only one text box has a value in it

function OnlyOne( )
var intIndex = 0;
var intTextCount = 0;

for( intIndex =0; intIndex < formname.elements.length; intIndex++ )
{
    // text box?
    if( formname.elements[ intIndex ].type.toLowerCase( ) == "text" )
    {
          // Yes
         if( formname.elements[ intIndex ].value != "" )
         {
              intTextCount++;
         }
     }
}

return intTextCount;


if the value is zero, they didnt enter anything
if value is 1, only 1 thing is enterd
anything else, more than one
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
cLFlaVACommented:
function:

<script language="JavaScript">
<!--
function lockOut(t) {
    var e = document.forms['the_form'].elements;
      for (var i = 0; i < e.length; i++) {
        if (e[i].name != t && e[t].value != '') {
            e[i].disabled = true;
            } else {
            e[i].disabled = false;
            }
      }
}
-->
</script>

call it like this:

<form action="stuff.html" method="post" name="the_form">
<input type="text" name="the_text_1" onkeyup="lockOut(this.name);"><br>
<input type="text" name="the_text_2" onkeyup="lockOut(this.name);"><br>
<input type="text" name="the_text_3" onkeyup="lockOut(this.name);"><br>
<input type="text" name="the_text_4" onkeyup="lockOut(this.name);"><br>
<input type="text" name="the_text_5" onkeyup="lockOut(this.name);"><br>
<input type="text" name="the_text_6" onkeyup="lockOut(this.name);"><br>
</form>



Might have to change this slightly if there are other form elements in your form (button, etc.).
0
 
RozanaZCommented:
<HTML>
<HEAD>
<TITLE></TITLE>

<script>
      function test()
      {
            allElements = document.forms[0].elements;
            size = allElements.length;
            for (i = 0; i < size; i++)
            {
                  temp = allElements[i];
                  if(temp.type == "text" && temp.value == "")
                  {
                        temp.disabled = true;
                  }
            }
      }
</script>

<style>
</style>

</HEAD>

<BODY>

<table>
      <tr>
            <td>
                  <form name="f1" id="f1" action="http://1.1.1">
                  <input type="text" onChange="test()"><br>
                  <input type="text" onChange="test()"><br>
                  <input type="text" onChange="test()"><br>
                  <input type="text" onChange="test()"><br>
                  <input type="text" onChange="test()"><br>
                  <input type="text" onChange="test()"><br>
                  </form>
            </td>
      </tr>
</table>

</BODY>
</HTML>
0
 
yourbudweiserAuthor Commented:
Thanks for getting back so fast!

justinbillig, not sure how to implement...

cLFlaVA, can you modify this script so the buttons don't get disabled also? Also, can you allow the backspace key?

RozanaZ, if I enter a value into one text box and then delete it, there's no way to change to another text box

Thanks!
0
 
cLFlaVACommented:
This will only disable text boxes:

<script language="JavaScript">
<!--
function lockOut(t) {
    var e = document.forms['the_form'].elements;
      for (var i = 0; i < e.length; i++) {
          if (e[i].type == 'text') {
            if (e[i].name != t && e[t].value != '') {
                e[i].disabled = true;
                } else {
                e[i].disabled = false;
                }
        }
      }
}
-->
</script>

Not sure what you mean by backspace.  If I enter a value in the textbox, then backspace until the value is blank, all the textboxes will once again be available.
0
 
yourbudweiserAuthor Commented:
cLFlaVA, so far great. However, backspace key doesn't work in the enabled text box. Also, is there any way to disable all other buttons EXCEPT for the one that goes with the enabled text box?

Once again, thanks alot!
0
 
RozanaZCommented:
<HTML>
<HEAD>
<TITLE></TITLE>

<script>
     function test(obj)
     {
            
          allElements = document.forms[0].elements;
          size = allElements.length;
          for (i = 0; i < size; i++)
          {
                        if (obj.value == "")
                        {
                              allElements[i].disabled = false;
                        }
                        else
                        {
                     temp = allElements[i];
                       if(temp.type == "text" && temp.value == "")
                         {
                                temp.disabled = true;
                     }
                        }
          }
     }
</script>

<style>
</style>

</HEAD>

<BODY>

<table>
     <tr>
          <td>
               <form name="f1" id="f1" action="http://1.1.1">
               <input type="text" onChange="test(this)"><br>
               <input type="text" onChange="test(this)"><br>
               <input type="text" onChange="test(this)"><br>
               <input type="text" onChange="test(this)"><br>
               <input type="text" onChange="test(this)"><br>
               <input type="text" onChange="test(this)"><br>
               </form>
          </td>
     </tr>
</table>

</BODY>
</HTML>
0
 
yourbudweiserAuthor Commented:
cLFlaVA, for some reason, the change we made to exclude the submit button from being disabled broke the script :-)

RozanaZ, thanks for fixing that. For some reason, again, the backspace key doesn't work in the text box? Crazy!

I see the light at the end of the tunnel!


0
 
justinbilligCommented:
budweiser put this in your form tag

onsubmit="if( OnlyOne( ) > 1 ){ alert( 'Only change one text box' ); return false; }"
0
 
yourbudweiserAuthor Commented:
justinbillig, when I test, I get an error, expected {
0
 
justinbilligCommented:
then do this


onsubmit="return Validate( );"


then make a function


function Validate( )
{
       var intTextBoxValues = OnlyOne( );
       var blnReturn = true; // assume ok

      // did the use enter a vlaue
     if( intTextBoxValues > 1 )
     {
          alert( "Please enter only one." );
         blnReturn = false;
     }

    return blnReturn;
}
0
 
yourbudweiserAuthor Commented:
Thanks guys! Although all answers were great, RozanaZ hit the nail on the head!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 6
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now