CODEWITHSUNDEEP
javascriptjquery
Punit khandelwal
Punit khandelwal

Reputation: 119

I want to compare the input value in javascript

I made a dynamic table with addon button which has three inputs, I want to compare that the first input value is not greater than the second input and Third input value is not greater than First and Second..please help me to solve this out...


<table id="myTable" class="form-group" cellpadding="10" table align="center">
  <tbody>
    <tr>
      <td><input type='text' name='from[]' onkeyup='compare();' placeholder='From'id='first'></td>
      <td><input type='text' name='to[]' onkeyup='compare();' placeholder='To' id='second'></td>
      <td><input type='text' name='gap[]' onkeyup='compare();' placeholder='Gap' id='third'></td>

    </tbody>

</table>
<center>
<button type="button" class="btn btn-primary" onclick="myFunction()">+Addmore</button>
<br><br>
<button type="submit" class="btn btn-warning">Submit</button>

</center>



<script type="text/javascript">
function f(e){
  document.getElementById('myForm').action=`/create/${e.value}`;
  document.getElementById('pro').value=e.options[e.selectedIndex].text;
}

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow();
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = "<input type='text' placeholder='From' name='from[]'>";
  cell2.innerHTML = "<input type='text' placeholder='To'  name='to[]'>";
  cell3.innerHTML = "<input type='text' placeholder='Gap'name='gap[]'>";
}
</script>

<script type="text/javascript">
var first=document.getElementById('first').value;
var second=document.getElementById('second').value;

if(parseInt(first)&lt;parseInt(second))
alert('Second Value is Greater than first');

else if(parseInt(first)&gt;parseInt(second))
alert('First Value is Greater than second');

else if(parseInt(first)==parseInt(second))
alert('First Value and second value is equal');
</script>

Upvotes: 0

Views: 1035

Answers (2)

oleedd
oleedd

Reputation: 446

but i also want that when these conditions are not true Submit button are disable... when true Submit button are not disable

Better to add id="button" to the button to shortly get it. This code works:

function compare() {
    if(parseInt(first.value) < parseInt(second.value)) {
        alert('Second Value is Greater than first');
        button.removeAttribute("disabled");
    }

    else if(parseInt(first.value) > parseInt(second.value)) {
        alert('First Value is Greater than second');
        button.removeAttribute("disabled");
    }

    else if(parseInt(first.value) == parseInt(second.value)) {
        alert('First Value and second value is equal');
        button.removeAttribute("disabled");
    }

    else button.disabled = "true";
}

Also we can hide it instead of blocking.

Upvotes: 1

oleedd
oleedd

Reputation: 446

Need to put the checking code into the "compare" function and use correct comparison signs (<>). This works:

function compare() {
    var first = document.getElementById('first').value;
    var second = document.getElementById('second').value;

    if(parseInt(first) < parseInt(second))
    alert('Second Value is Greater than first');

    else if(parseInt(first) > parseInt(second))
    alert('First Value is Greater than second');

    else if(parseInt(first) == parseInt(second))
    alert('First Value and second value is equal');
}

Also you can get elements just by their id (if no variables with such names), so the next code is shorter but also works:

function compare() {
    if(parseInt(first.value) < parseInt(second.value))
    alert('Second Value is Greater than first');

    else if(parseInt(first.value) > parseInt(second.value))
    alert('First Value is Greater than second');

    else if(parseInt(first.value) == parseInt(second.value))
    alert('First Value and second value is equal');
}

Upvotes: 1

Related Questions