I have been following this simple tutorial found here. However, I want to modify it so that the calculator is only invoked when the client clicks submit. However, when I click the submit button, no action is observed. I am not even seeing the alert.
EDIT:
I have modified the code per Ojay's suggestions. However, I am getting this error when I try to debug. I am getting this exact issue except I have VS13 Update 3. Multiple things going on here?
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Sample Calculator</title>
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#my-calc').on('submit', function () {
alert("This button is working?");
calculate();
});
function calculate()
{
alert('hi');
//Add
try {
$('#sum').val((parseInt($('#num1').val())) + parseInt($('#num2').val()));
} catch (e) {
}
//Subtract
try {
$('#sub').val((parseInt($('#num1').val())) - parseInt($('#num2').val()));
} catch (e) {
}
//Multiply
try {
$('#mul').val((parseInt($('#num1').val())) * parseInt($('#num2').val()));
} catch (e) {
}
//Divide
try {
$('#div').val((parseInt($('#num1').val())) / parseInt($('#num2').val()));
} catch (e) {
}
}
});
</script>
</head>
<body>
<div><h4>Sample Calculator</h4></div>
@using (Html.BeginForm())
{
<p> @Html.Label("Input 1") : @Html.TextBox("num1","0")</p>
<p> @Html.Label("Input 2") : @Html.TextBox("num2", "0")</p>
<p> @Html.Label("Sum ") : @Html.TextBox("sum")</p>
<p> @Html.Label("Sub ") : @Html.TextBox("sub")</p>
<p> @Html.Label("Mult ") : @Html.TextBox("mul")</p>
<p> @Html.Label("Div ") : @Html.TextBox("div")</p>
<button id="my-calc" type="button">Calculate</button>
}
</body>
</html>
Edit: I had something originally like the tutorial I was looking at. I had:
$(document).ready(function(){
$('#my-calc').on('submit', function (){ //stuff}
}
I don't understand why my function is not being invoked? My form id is correct. All I want to do is invoke this calculator method so my label's sum, sub, mult, and div display the results.
Please pardon the simplistic nature of this question, but I feel it would be useful for others doing .NET MVC tutorials who might also be having this problem. As a result of this question, I decided to obtain a book on jQuery. Thanks for your assistance.
It looks as though there are multiple issues here.
Firstly your selector must be '#my-calc' to correctly select the submit form. Your jQuery code must be wrapped in a document ready handler (as per your added code), or the code needs to appear after the form. Also when you add a submit event handler then you need to return false to stop the form submitting. And lastly (and perhaps the most important), you cannot nest forms. The @using (Html.BeginForm()) creates a form, and then you are creating another one inside it <form id="my-calc">, this is not valid. What the browser will do is just ignore the inner one, so in other words, there will never be a submit event of the my-calc form, becuase the parent form is what is submitted.
Also because you are just doing a calculation on the page with JavaScript, there is no real need for a form anyway, perhaps just a <button type="button" id="my-calc">Calculate</button> would be better with a click event.
Now your calculate function also has errors
every calculation line is missing a $ in the attempt to get the num1 value
so
$('#sum').val((parseInt(('#num1').val())) + parseInt($('#num2').val()));
should be
$('#sum').val((parseInt($('#num1').val())) + parseInt($('#num2').val()));
and there is an additional issue with the multiplication one, the input is not #mult its #mul as per your @Html.TextBox("mul").
So all of that together, something like the following should resolve your issues
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Sample Calculator</title>
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#my-calc').on('click', function () {
calculate();
});
function calculate() {
//Add
try {
$('#sum').val((parseInt($('#num1').val())) + parseInt($('#num2').val()));
} catch (e) {
}
//Subtract
try {
$('#sub').val((parseInt($('#num1').val())) - parseInt($('#num2').val()));
} catch (e) {
}
//Multiply
try {
$('#mul').val((parseInt($('#num1').val())) * parseInt($('#num2').val()));
} catch (e) {
}
//Divide
try {
$('#div').val((parseInt($('#num1').val())) / parseInt($('#num2').val()));
} catch (e) {
}
}
});
</script>
</head>
<body>
<div><h4>Sample Calculator</h4></div>
<p> @Html.Label("Input 1") : @Html.TextBox("num1", "0")</p>
<p> @Html.Label("Input 2") : @Html.TextBox("num2", "0")</p>
<p> @Html.Label("Sum ") : @Html.TextBox("sum")</p>
<p> @Html.Label("Sub ") : @Html.TextBox("sub")</p>
<p> @Html.Label("Mult ") : @Html.TextBox("mul")</p>
<p> @Html.Label("Div ") : @Html.TextBox("div")</p>
<button id="my-calc" type="button">Calculate</button>
</body>
</html>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加