?
Solved

ENABLE/DISABLE TEXT BOX

Posted on 2004-10-04
14
Medium Priority
?
9,031 Views
Last Modified: 2009-07-29
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
Comment
Question by:yourbudweiser
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
  • +1
14 Comments
 
LVL 15

Expert Comment

by:justinbillig
ID: 12218349
why not just have one text box?
0
 
LVL 3

Author Comment

by:yourbudweiser
ID: 12218381
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
 
LVL 15

Expert Comment

by:justinbillig
ID: 12218433
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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12218457
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
 
LVL 8

Expert Comment

by:RozanaZ
ID: 12218484
<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
 
LVL 3

Author Comment

by:yourbudweiser
ID: 12218560
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
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12218636
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
 
LVL 3

Author Comment

by:yourbudweiser
ID: 12218657
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
 
LVL 8

Accepted Solution

by:
RozanaZ earned 400 total points
ID: 12218659
<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
 
LVL 3

Author Comment

by:yourbudweiser
ID: 12218729
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
 
LVL 15

Expert Comment

by:justinbillig
ID: 12218757
budweiser put this in your form tag

onsubmit="if( OnlyOne( ) > 1 ){ alert( 'Only change one text box' ); return false; }"
0
 
LVL 3

Author Comment

by:yourbudweiser
ID: 12218805
justinbillig, when I test, I get an error, expected {
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12218913
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
 
LVL 3

Author Comment

by:yourbudweiser
ID: 12219356
Thanks guys! Although all answers were great, RozanaZ hit the nail on the head!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question