Stacker Stacker - 6 months ago 19
Javascript Question

How can I change keyup value length based on dropdown option?

This is based on each row, so I've it loaded on document like below:

$(document).on('keyup','.myNumber',function(){
var $this = $(this);
var lengthA == 16;
var lengthB == 8;
var lengthC == 8;
var lengthD == 10;
var lengthE == 15;
var lengthG == 15;
var lengthH == 10;

var $row = $this.closest("tr").find('.dropDownSelect');
if ($row.val() == "Credit Card") { // use $this.val()
if ($this.val().length == lengthA){
return true;
} else {
return false;
} else if ($row.val){}
} else
$row.removeAttr("disabled");
});


HTML:

<html>
<table>
<tr>
<td>
<select>
<option value="1">1</option> //If this is selected, then #myNumber must have 16 digits
<option value="2">2</option> //If this is selected, then #myNumber must have 8 digits
<option value="3">3</option> //If this is selected, then #myNumber must have 8 digits
<option value="4">4</option> //If this is selected, then #myNumber must have 10 digits
<option value="5">5</option> //If this is selected, then #myNumber must have 15 digits
<option value="6">6</option> //If this is selected, then #myNumber must have 15 digits
<option value="7">7</option> //If this is selected, then #myNumber must have 10 digits
</select>
</td>
<td>
<input type="text" id="myNumber"/> //onkeyup of this the function will run and find out how much integers it has
</td>
</tr>
</table>
</html>


If dropdown value is lengthA then
myNumber
needs to be 16 characters.
LengthB = 8 characters
and so on.

If they put in a number over or under, I just need an alert saying that.
I'm trying to make a long function like above but I don't think it's going to work at all.

Answer

As was mentioned in the comments. To assign a value you should use = instead of == when you define the variables.

This following will work for one of your lengths. You should edit the code to make it work for multiple lengths as you need. I have added curly brackets arround the jQuery $ selectors.

Eg: $row becomes $(row).

$(document).on('keyup','#myNumber',function(){
var input = $(this); 
var lengthA = 16; // <-- Not == Should be =
var lengthB = 8;
var lengthC = 8;
var lengthD = 10;
var lengthE = 15;
var lengthG = 15;
var lengthH = 10;

var row = $(this).closest("tr").find('.dropDownSelect');
if ($(row).val() == "1") { // use $this.val()
    if ($(input).val().length == lengthA){
        alert('true');
        return true;
    } else {

        return false;
    } 
} else
    $(row).removeAttr("disabled");
});

HTML

<html>
<table>
<tr>
<td>
<select class="dropDownSelect">
    <option value="1">1</option> //If this is selected, then #myNumber must have 16 digits
    <option value="2">2</option> //If this is selected, then #myNumber must have 8 digits
    <option value="3">3</option> //If this is selected, then #myNumber must have 8 digits
    <option value="4">4</option> //If this is selected, then #myNumber must have 10 digits
    <option value="5">5</option> //If this is selected, then #myNumber must have 15 digits
    <option value="6">6</option> //If this is selected, then #myNumber must have 15 digits
    <option value="7">7</option> //If this is selected, then #myNumber must have 10 digits
</select>
</td>
<td>
<input type="text" id="myNumber"/> //onkeyup of this the function will run and find out how much integers it has
</td>

Comments