0

Dear sir my html file has following coedes

<Html>
<head>
<title>Add two numbers on same form</title>
<body>
<center>
<h1><font color="blue"> Sum Two Numbers</font></h1>
<form name="thisform" method="Get" action="getsum2.php">
<table cellpadding=3 cellspacing=3>
<tr>
<td>Enter First Number</td><td><input type="Text" name="text1"></td>
</tr>

<tr>
<td>Enter Second Number</td><td><input type="Text" name="text2"></td>
</tr>
<tr>
<td style="color: #ff0000">Result</td><td><input type="Text" name="text2" disabled></td>
</tr>

<tr>
<td colspan=2 align="center"><input type="Submit" Value="Result"></td>
</tr>
</table>
</center>
</body>
</html>

And getsum2.PHP file has these codes

<?php
$num1=$_GET['text1'];
$num2=$_GET['text2'];
$result=$num1+$num2;
echo "Result= $result";
?>

These both file works fine. The result is show in getsum2 php.
But I want to get result in sum2.html's text3.

Please help

3
Contributors
2
Replies
26
Views
3 Years
Discussion Span
Last Post by diafol
0

You can do this with ajax form submition. I have done some changes and it works.
Try the following example.

In your form page

<Html>
<head>
<title>Add two numbers on same form</title>
 <script src="http://code.jquery.com/jquery-1.8.1.js"></script>
<body>
<center>
<h1><font color="blue"> Sum Two Numbers</font></h1>
<form name="thisform" method="post" id="myForm" action="getsum2.php" >
<table cellpadding=3 cellspacing=3>
<tr>
<td>Enter First Number</td><td><input type="Text" name="text1"></td>
</tr>

<tr>
<td>Enter Second Number</td><td><input type="Text" name="text2"></td>
</tr>
<tr>
<td style="color: #ff0000">Result</td><td><input type="Text" name="text2" id="txtResult" disabled></td>
</tr>

<tr>
<td colspan=2 align="center"><input type="submit" Value="Result"></td>
</tr>
</table>
</center>
<script type="text/javascript">
$("#myForm").submit(function(e) {
    $.post('getsum2.php',$("#myForm").serialize(), function(data){
        $("#txtResult").val(data);
    });
     e.preventDefault();
});
</script>

</body>
</html>

& In your getsum2.php

<?php
$num1=$_POST['text1'];
$num2=$_POST['text2'];
echo $result=$num1+$num2;
?>
0
<body>
<form>
    <label for = "first">First Num:</label> <input type="number" name="first" id="first" value="0" min="-100" max="100" /><br />
    <label for = "second">Second Num:</label> <input type="number" name="second" id="second" value="0" min="-100" max="100" /><br />
    <label for = "result">Result:</label> <input name="result" id="result" value="0" readonly />
</form>

<script>
var first = document.getElementById('first');
var second = document.getElementById('second');
var result = document.getElementById('result');

first.addEventListener("change", addValues);
second.addEventListener("change", addValues);

function addValues(){
    result.value = parseInt(first.value) + parseInt(second.value);
}

</script>
</body>

This uses just javascript - no ajax, no php, no library, no obtrusive inline js. You could even hide away the js in a file, e.g.

<body>
<form>
    <label for = "first">First Num:</label> <input type="number" name="first" id="first" value="0" min="-100" max="100" /><br />
    <label for = "second">Second Num:</label> <input type="number" name="second" id="second" value="0" min="-100" max="100" /><br />
    <label for = "result">Result:</label> <input name="result" id="result" value="0" readonly />
</form>

<script src="myfile.js"></script>
</body>

Oh, did I mention that you don't need a submit button? If you really do, then just run the function on the button "click" event as opposed to the input "change". You could even take off the form tags, but I don't know how that would affect your sensibilities wrt semantics, but if you don't want to send any data to the server, then the html5 spec says it's ok to have form elements outside form tags. So...

<body>
    <label for = "first">First Num:</label> <input type="number" id="first" value="0" min="-100" max="100" /><br />
    <label for = "second">Second Num:</label> <input type="number" id="second" value="0" min="-100" max="100" /><br />
    <label for = "result">Result:</label> <input id="result" value="0" readonly />
    <script src="myfile.js"></script>
</body>

Would be acceptable and quite clean. Notice you don't need the 'name' attributes now either.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.