Jquery Ajax form submit
Jquery Ajax form submit
Here is a simple script that help developers to submit HTML form values and post it to a PHP web page with the help of Jquery and Ajax.
Here is how the Jquery / Ajax part looks like.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/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>
Here is the HTML Form
<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" />
The entire code look like this and lets name it as htmlform.php
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/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> <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" /> </div>
The getvalues.php file 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>Jquery Ajax form submit,