Last updated on January 10th, 2023 at 11:03 am
In this tutorial we are going to discuss about how to create a simple HTML form and submit values to a different page. These form values will be dynamically displayed in the same page itself without browser getting refreshed / reloaded.
Table of Contents
HTML Form
No need to explain anything here. This is just a simple HTML form named form.html with bunch of div elements.
<div class="wrapper">
<div id="container"></div>
<form name="awstats_form" autocomplete="on" class="awstats">
<div class="awstats_title">Please Provide The Details Below</div>
<div class="input">
<div class="inputtext"><b>Log File Path:</b> </div>
<div class="inputcontent"><input name="LogFile" id="LogFile" type="text" />(/usr/<app_name>)</app_name></div>
<div class="inputtext"><b>Log Type:</b> </div>
<div class="inputcontent"><input name="LogType" id="LogType" type="text" /></div>
<div class="inputtext"><b>Allow Update From Browser</b> </div>
<div class="inputcontent"><input name="AllowToUpdateStatsFromBrowser" id="AllowToUpdateStatsFromBrowser" type="text" /></div>
<div class="inputtext"><b>Error Messages</b></div>
<div class="inputcontent"><input name="ErrorMessages" id="ErrorMessages" type="text" /></div>
<div class="inputtext"><b>Website Title</b></div>
<div class="inputcontent"><input name="SiteDomain" id="SiteDomain" type="text" /></div>
<div class="inputtext"><b>Application Name</b></div>
<div class="inputcontent"><input name="urlname" id="urlname" type="text" /></div>
</div>
</form>
<div class="buttons">
<input class="orangebutton" type="submit" id="submit" value="Submit And Process" />
<input class="greybutton" type="reset" id="" value="Cancel" />
jQuery-Ajax
This is the code that is responsible for introducing dynamic experience within the browser. As you can see from the code below we are getting value from each ID tag of our HTML form and then doing an Ajax call with POST type to a page named “getvalues.php” . Add this code to the form.html header. This complete our Form page.
$('#container').html('<p>Loading</p>')
As you might have noticed there is a div with id container. The response from the page “getvalues.php” will be displayed inside this div. It also display Loading or any other message you like while the data is being loaded. Feel free to modify it according to your requirement.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#container').html('<p>Loading</p>')
var LogFile = $("#LogFile").val();
var LogType = $("#LogType").val();
var AllowToUpdateStatsFromBrowser = $("#AllowToUpdateStatsFromBrowser").val();
var ErrorMessages = $("#ErrorMessages").val();
var SiteDomain = $("#SiteDomain").val();
var urlname = $("#urlname").val();
var data = 'LogFile=' + LogFile + '&LogType=' + LogType + '&AllowToUpdateStatsFromBrowser=' + AllowToUpdateStatsFromBrowser + '&ErrorMessages=' + ErrorMessages + '&SiteDomain=' + SiteDomain + '&urlname=' +urlname;
$.ajax({
url: 'getvalues.php' ,
type: 'POST',
data: data,
success: function(result){
$('#container').html('<p>' + result + '</p>')
}
});
return false;
});
});
</script>
PHP Code
Last but not the least getvalues.php page look like this. As you can see below it is very simple script and just accepting the normal POST values using php.
<?php
$logfile = $_POST['LogFile'];
$logtype = $_POST['LogType'];
$ErrorMessages = $_POST['ErrorMessages'];
$allowupdate = $_POST['AllowToUpdateStatsFromBrowser'];
$domain = $_POST['SiteDomain'];
$urlname = $_POST['urlname'];
?><table border = '1'><tr><td>
<?php
echo "<h2>This Is Just A Demo</h2>";
echo "Log File Is ".$logfile."<br>Log Type Is ".$logtype."<br>Error Message Is ".$ErrorMessages."<br>Update From Browser Is ".$allowupdate."<br>Domain Is ".$domain."<br>URL Is ".$urlname;
?>
</td></tr></table>
admin