Member Avatar for tqmd1

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
  • 154 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for Bachu

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;
?>
Member Avatar for diafol 
<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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.