I've been looking for an answer to this issue but cannot find one. I'm attempting to input a number into a html input tag with the type being 'text'. I then need that value that's placed into that input multiplied by 2 and the answer displayed into another input.
My table looks like this. This is then repeated multiple times and closed with the appropriate table tag.
<table class="left-table" style="width:50%">
<th><u>Expense</u></th>
<th><u>Weekly</u></th>
<th><u>Fortnightly</u></th>
<th><u>Yearly</u></th>
<tr>
<td class="options">
<select class="expense-option">
<option>- Select Option -</option>
<option>Car Insurance</option>
<option>Car Loan</option>
<option>Car Park</option>
<option>Car Registration</option>
<option>Car Servicing</option>
<option>Clothes</option>
<option>Credit Card</option>
<option>Dining Out</option>
<option>Donation</option>
<option>Entertainment</option>
<option>Groceries</option>
<option>Health Insurance</option>
<option>Internet</option>
<option>Mobile Phone</option>
<option>Petrol</option>
<option>Rent / Mortgage</option>
<option>Spending / Pocket Money</option>
<option>Sport</option>
<option>Utilities</option>
</select>
</td>
<td><input class="amount" id="input10" type="text" placeholder="Weekly $"></td>
<td><input class="amount" id="output10" type="text" placeholder="Fortnightly $" readonly></td>
<td><input class="amount" id="output20" type="text" placeholder="Yearly $" readonly></td>
</tr>
My JS is like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$("#input10").keyup(function(){
var input1 = parseInt($("#input10").val());
if(!isNaN(input1)){
$("#output10").val(input1 * 2);
}
else{
$("#output10").val("");
alert("Please enter a valid number");
}
});
</script>
But still nothing works.
$("#input1").keyup(function(){ var input1 = parseInt($("#input1").val()); if(!isNaN(input1)){ $("#output1").val(input1 * '2'); } else{ $("#output1").val(""); alert("Please enter a valid number"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input class="amount" id="input1" type="text" placeholder="Weekly $"></td> <td><input class="amount" id="output1" type="text" placeholder="Fortnightly $" readonly></td> </tr> </table>
$("#input1").keyup(function(){ var input1 = parseInt($("#input1").val()); if(!isNaN(input1)){ $("#output1").val(input1 * '2'); } else{ $("#output1").val(""); alert("Please enter a valid number"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input class="amount" id="input1" type="text" placeholder="Weekly $"></td> <td><input class="amount" id="output1" type="text" placeholder="Fortnightly $" readonly></td> </tr> </table>
you have a typo in the first line (also assuming you have a table structure of this :
<td><input class="amount" id="input1" type="text" placeholder="Weekly $"></td>
<td><input class="amount" id="output1" type="text" placeholder="Fortnightly $" readonly></td>
remove the ' characters around the 2 in the line:
$("#output1").val(input1 * '2');
this makes it a string you need (in order to keep it a number that can be used for the calculation:
$("#output1").val(input1 * 2);
The corrected working code is (table structure added):
<table>
<tr>
<td><input class="amount" id="input1" type="text" placeholder="Weekly $"></td>
<td><input class="amount" id="output1" type="text" placeholder="Fortnightly $" readonly></td>
</tr>
</table>
<script>
$("#input1").keyup(function(){
var input1 = parseInt($("#input1").val());
if(!isNaN(input1)){
$("#output1").val(input1 * 2);
}
else{
$("#output1").val("");
alert("Please enter a valid number");
}
});
</script>
Here you have parsed the string to int
var input1 = parseInt($("#input1").val());
But in appending the value , you are trying to multiple with string 2 as it is enclosed inside '' . So solution of this is very simple, u need to multiple with int value .ie. 2 only.
var result = input1 * 2 ;
$("#output1").val(result);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.