Solved

ENABLE/DISABLE TEXT BOX

Posted on 2004-10-04
14
9,020 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 100 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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now