CODEWITHSUNDEEP
javascripthtmlformsonchange
roro
roro

Reputation: 723

I want to set maxLength of a textbox which depends on the users answer to a previous textbox

So basically the HTML form will ask what company they belong to, and if they pick for example:- 

<select name="catg" onchange='maxlength()'>
<option> Select..</option>
        <option value="stu">Uni Student</option>
        <option value="anothersstu">Student at another institution</option>
        <option value="staff">Uni Staff</option>
        <option value="other">other</option>

    </select><br />
    Student Number / Staff Number: <input type="text" name="ss"/> <br />

    function maxlength(){
    if(test.catg.selected=="stu"){
    test.ss.maxlength='8';
    .focus();
    .select();}
    return;
    }

If the user picks Uni student or Uni staff, the maxlength of the Student Number/Staff Number texbox needs to be 8.

How can i achieve that? i have tried onChange but cant get it to work.

Upvotes: 3

Views: 2157

Answers (5)

Akhil das
Akhil das

Reputation: 69

Try this 

   $(document).ready(function(){
    $("#sele").change(function(){
    var optext=$("#sele option:selected").text();
    if(optext=='Uni Student'||optext=='Uni Staff'){
     $("#tname").val("");
     $("#tname").attr('maxlength','8');
   }
   else{
       $("#tname").val("");
      $("#tname").attr('maxlength','');
   }
  });
 });




  <select  name="sele" id="sele" > <option> Select..</option>
  <option value="stu">Uni Student</option>
   <option value="anothersstu">Student at another institution</option>
  <option value="staff">Uni Staff</option>
  <option value="other">other</option>

 </select><br />
  Student Number / Staff Number: <input type="text" name="ss" id="tname"/>

Upvotes: 0

Mudassir Hasan
Mudassir Hasan

Reputation: 28741

<select name="catg" id="catg" onchange="maxLengthFunction()">
        <option> Select..</option>
        <option value="stu">Uni Student</option>
        <option value="anothersstu">Student at another institution</option>
        <option value="staff">Uni Staff</option>
        <option value="other">other</option>

 </select><br />

Student Number / Staff Number: <input type="text" name="ss" id="ss" />

And in Javascript

function maxLengthFunction()
{

   var ddl = document.getElementById("catg");
   var strOption = ddl.options[ddl.selectedIndex].text

   if(strOption == "Uni Student" || strOption == "Uni Staff" )
       document.getElementById("ss").maxLength="8";
   else 
      document.getElementById("ss").removeAttribute('maxLength');
}

Upvotes: 0

Anand Natarajan
Anand Natarajan

Reputation: 1162

<select id="selopt" onchange="maxlength()">
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select>

Student Number / Staff Number: <input type="text" id="ss" maxlength=""/> <br />

function maxlength(){
var x = document.getElementById("selopt").selectedIndex;
if(document.getElementById("selopt")[x].value=="stu"){
document.getElementById("ss").maxLength=8;
}
return;
}

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

You can do something like this:

HTML:

<select id="select">
<option>Select..</option>
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select>
<br />Student Number / Staff Number:
<input type="text" id="txt" name="ss" />
<br />

JS:

 document.getElementById('select').onchange = (function(){
    if(this.value=="stu"){
     document.getElementById('txt').maxLength=8;
    }else{
     document.getElementById('txt').removeAttribute('maxLength');
    }
});

So depending on your requirements, do if else if conditions

Demo: http://jsfiddle.net/AmitJoki/8ZewM/2

Upvotes: 1

Saritha.S.R
Saritha.S.R

Reputation: 800

<select name="catg" onchange='maxlength()'>
<option> Select..</option>
        <option value="stu">Uni Student</option>
        <option value="anothersstu">Student at another institution</option>
        <option value="staff">Uni Staff</option>
        <option value="other">other</option>

    </select><br />
    Student Number / Staff Number: <input type="text" name="ss" id="ss"/> <br />

Jquery:

$('select').change(function () {
        var value = this.value;
     if(value=='stu')
     {
          $("#ss").attr('maxlength','8');
     }
     else
     {
          $("#ss").attr('maxlength',''); // clear maxlength if not stu
     }
    });

Upvotes: 0

Related Questions