HTML form with JQuery effect does not post to MySQL

Question

dennishall 0 Junior Poster in Training

13 Years Ago

Hi:

I'm having an issue posting to MySQL using the animated_form.html below.

My objective is to have 4 db entries posted to MySQL when the user clicks on the <a href="javascript: submitform()"><input alt="Show Results" id="btn_results" src="a_data/form_btn_show_results.png" type="image"></a> image.

The form uses jquery and it produces 0 results in MySQL.
Using the simple_form.html file (see very bottom code), my process populates the MySQL data.

MySQL Table:

CREATE TABLE IF NOT EXISTS `dbtablename` (
  `software` varchar(30) NOT NULL,
  `patients` int(11) default NULL,
  `reimbursement` int(11) default NULL,
  `rejection` int(11) default NULL,
  KEY `software` (`software`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

HTML form = animated_form.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Claim Calculator</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<link rel="stylesheet" href="a_data/master.css" type="text/css">
<link rel="stylesheet" href="a_data/print.css" type="text/css" media="print">
<script src="a_data/jquery.js" type="text/javascript"></script>
<script src="a_data/jquery_002.js" type="text/javascript"></script>
<script src="a_data/jquery_003.js" type="text/javascript"></script>
<script type="text/javascript">
function addCommas(nStr){
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
}
function mailpage(){
	var mail_str = "";
	mail_str += "mailto:"+$("#email").val()+"?subject=Your Claim Calculator Results";
	mail_str += "&body=" + $("#content").html();
	location.href = mail_str;
}
function processStats(){
	var pat = $("#patients").val();
	var rmb = $("#reimbursement").val();
	var rej = $("#rejection").val();
	//alert(pat+" "+rmb+" "+rej);
	var pn = $("#software").val() == "" || $("#software").val() == "Practice Name" ? "National Average" : $("#software").val(); 
	var rev = pat*rmb
	//National Average / Practice Stats
	var avg_rj = Math.round((pat*rmb)*(rej/100));
	var avg_rwc = Math.round(avg_rj*.5);
	var avg_revcap = Math.round((rev - avg_rj) + avg_rwc);
	var avg_revlost = rev - avg_revcap;
	//AMD Averages
	var amd_rj = Math.round((pat*rmb)*(5/100));
	var amd_rwc = Math.round(amd_rj*.5);
	var amd_revcap = Math.round((rev - amd_rj) + amd_rwc);
	var amd_revlost = rev - amd_revcap;
	var pcnt = Math.round(avg_revcap * .01);
	$("#practice_name").html(pn);
	$("#avg_rev, #amd_rev").html("$"+addCommas(rev));
	$("#avg_rj").html("-$"+addCommas(avg_rj));
	$("#avg_rwc").html("+$"+addCommas(avg_rwc));
	$("#avg_revcap").html("$"+addCommas(avg_revcap));
	$("#avg_revlost").html("$"+addCommas(avg_revlost));
	$("#avg_revlostyr").html("$"+addCommas(avg_revlost*12));
	$("#amd_rj").html("-$"+addCommas(amd_rj));
	$("#amd_rwc").html("+$"+addCommas(amd_rwc));
	$("#amd_revcap").html("$"+addCommas(amd_revcap));
	$("#amd_revlost").html("$"+addCommas(amd_revlost));
	$("#amd_revlostyr").html("$"+addCommas(amd_revlost*12));
	$("#amd_save_mo").html("$"+addCommas(amd_revcap - avg_revcap));
	$("#amd_save_yr").html("$"+addCommas((amd_revcap - avg_revcap)*12));				
	$("#improvement").html("$"+pcnt+" ");
}
$(function(){
	$("#roi_calculator").submit(function(event){
		event.preventDefault();
		if($(this).valid()){				
			processStats()
			$("#results").slideDown("slow",function(){
				$("#btns_1").fadeOut("slow",function(){
					$("#btns_2").fadeIn();						
				}
			)
		}
	)
	$("#fs_software").slideUp();
}
}
)
$("#results, #btns_2, #btns_3, .amd_col, #amd_rate, .amd_savings, #instructions").hide();
$("#software").bind("focus",function(){	
	$("#fs_software").slideDown();
	if($(this).val() == "Current Software"){
		$(this).val("");
	}
}
)
$("#software").bind("blur",function(){
	if($(this).val() == ""){
		$(this).val("Current Software");					
		}else if($(this).val() !== "" && $(this).val() !== "Current Software"){
			$("#fs_software").slideUp();
		}
	}
)
$("#btn_compare").click(function(){
	/* $("#fs_client").slideUp("slow",function(){ */
	$(".amd_col, #amd_rate, .amd_savings").fadeIn();	
/*	}
); */
$(this).parent("#btns_2").fadeOut("slow",function(){
	$("#btns_3").fadeIn();
/*
	$("#email").rules("add", {
		required: true,
		email:true
	}
);
*/
}
);
}
)
/*
$("#btn_email").click(function(){
	if($("#roi_calculator").valid()){	
}
}
)
*/
$("#btn_print").click(function(){
	window.print();
}
)
$("a[title]").qtip();
$("#roi_calculator").validate(
	{
		rules:{
			patients:{
				required:true,
				digits:true
			},
			reimbursement:{
				required:true,
				digits:true
			}
		},
		messages:{
			patients:{
				required: "Please enter an average amount of patients seen each month."
			},
			reimbursement:{
				required: "Please enter a dollar amount for claim reimbursement."
			}
		},
		errorLabelContainer:("#instructions"),
		errorElement: "p",
		errorPlacement: function(error, element){
			error.appendTo($("div.form_btns"));
		}
	}
)
}
)	
</script>
</head>
<body>
<div id="container">
	<div id="header">
		<h1><span class="link"><a href="http://www.products-and-services.ca/roi/a.php">Reset Form</a></span>Claim Calculator</h1>
	</div>
	<div id="content">
		<form name="myform" id="roi_calculator" action="insert.php" method="post">
			<fieldset id="fs_software" class="iefix">
				<p>
					<input name="software" id="software" value="Enter your software here" type="text">
				</p>
			</fieldset>
			<fieldset id="fs_client">
				<legend>Practice Statistics</legend>
				<p>
					<span class="patients"><input name="patients" id="patients" size="4" tabindex="1" type="text"></span>
					<label for="patients">Average Patients Seen in a Month?</label>
					<br class="clear">
				</p>
				<p>
				    <span class="money"><input name="reimbursement" id="reimbursement" size="4" tabindex="2" type="text"></span>
					<label for="reimbursement">Average $ Reimbursement per Claim?</label>
					<br class="clear">
				</p>
				<p>
				    <span class="percent"><input name="rejection" id="rejection" size="2" tabindex="3" type="text"></span>
					<label for="rejection">% of Submitted Monthly Claims Rejected?<a href="#" title="The MGMA† states that the national average claim rejection rate is 30%" class="help "></a></label>							
					<br class="clear">
				</p>
				<br class="clear">
			</fieldset><!-- end #client_answers -->				
			<div style="display: none;" id="results">
				<h1>Results</h1>
				<h2>1% Claim Acceptance Improvement = <span id="improvement"></span> a month.</h2>
				<h2 style="display: none;" id="amd_rate">We guarantee a 95% first-pass claim acceptance rate.</h2>
					<table id="results_table" width="100%" border="0" cellpadding="0" cellspacing="0">
						<tbody>
                        	<tr>
                                <th></th>
                                <th class="avg_col" id="practice_name">Report name</th>
                                <th style="display: none;" class="amd_col">Advanced Claim Calculator</th>
							</tr>
							<tr>
								<td class="result_type">Monthly Revenue Earned</td>
								<td class="avg_col" id="avg_rev"></td>
								<td style="display: none;" class="amd_col" id="amd_rev"></td>
							</tr>
							<tr>
								<td class="result_type">First-Pass Rejected Claims</td>
								<td class="avg_col" id="avg_rj"></td>
								<td style="display: none;" class="amd_col" id="amd_rj"></td>
							</tr>
							<tr>
								<td class="result_type">Reworked Claims</td>
								<td class="avg_col" id="avg_rwc"></td>
								<td style="display: none;" class="amd_col" id="amd_rwc"></td>
							</tr>
							<tr class="total">
								<td class="result_type">Monthly Revenue Captured</td>
								<td class="avg_col" id="avg_revcap"></td>
								<td style="display: none;" class="amd_col" id="amd_revcap"></td>
							</tr>
<!--							<tr class="total">
								<td class="result_type">Monthly Revenue Lost</td>
								<td class="avg_col" id="avg_revlost"></td>
								<td style="display: none;" class="amd_col" id="amd_revlost"></td>
							</tr> -->
							<tr>
								<td class="result_type">Annual Revenue Lost</td>
								<td class="avg_col" id="avg_revlostyr"></td>
								<td style="display: none;" class="amd_col" id="amd_revlostyr"></td>
							</tr>
							<tr style="display: none;" class="amd_savings">
								<td class="result_type" colspan="2">Additional Monthly Revenue Captured</td>
								<td style="display: none;" class="amd_col" id="amd_save_mo"></td>
							</tr>
							<tr style="display: none;" class="amd_savings">
								<td class="result_type" colspan="2">Additional <strong>Annual</strong> Revenue Captured</td>
								<td style="display: none;" class="amd_col" id="amd_save_yr"></td>
							</tr>
						</tbody></table>		
					</div><!-- end #results -->
					<div style="display: none;" id="instructions"></div>
					<div class="form_btns">
						<p id="btns_1">
							<a href="javascript: submitform()"><input alt="Show Results" id="btn_results" src="a_data/form_btn_show_results.png" type="image"></a>
						</p>
						<p style="display: none;" id="btns_2">
							<img src="a_data/form_btn_compare.png" id="btn_compare">
						</p>
						<p style="display: none;" id="btns_3">
							<img src="a_data/form_btn_print_results.png" id="btn_print">
						</p>
					</div><!-- end #form_btns -->					
				</form>
                <script type="text/javascript">
				function submitform()
				{
					if(document.myform.onsubmit && 
					!document.myform.onsubmit())
					{
						return;
					}
				 document.myform.submit();
				}
				</script>
			</div>
		</div>
		<div qtip="0" class="qtip qtip-defaults" style="-moz-border-radius: 0pt 0pt 0pt 0pt; position: absolute; width: 178px; display: none; top: 230.267px; left: 565.5px;">
	    	<div class="qtip-wrapper" style="position: relative; overflow: hidden; text-align: left;">
	        	<div class="qtip-contentWrapper" style="overflow: hidden; background: none repeat scroll 0% 0% white; border: 1px solid rgb(211, 211, 211);">
	            	<div style="background: none repeat scroll 0% 0% white; color: rgb(17, 17, 17); overflow: hidden; text-align: left; padding: 5px 9px;" class="qtip-content qtip-content">Patients per day <br>x Days worked a month
    	            </div>
        	    </div>
	        </div>
	    </div>
	<div id="footer">
	</div>
<p>&nbsp;</p>
</body>
</html>

JQuery scripts are:
jQuery JavaScript Library v1.3.2 - file is named: jquery.js
jQuery validation plug-in 1.6 - file is names jquery_002.js
jquery.qtip. The jQuery tooltip plugin Version : 1.0.0-rc3 - file is named jquery_003.js

My submit buttons are image buttons.

My processor = insert.php

<?php

ini_set('display_errors',1);
error_reporting(E_ALL);

$con = mysql_connect("localhost","dbuser","dbpassword");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("dbname", $con);

$sql="INSERT INTO dbtablename (software, patients, reimbursement, rejection) VALUES ('$_POST[software]','$_POST[patients]','$_POST[reimbursement]','$_POST[rejection]')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }

mysql_close($con)
?>

I am confident in my insert.php file as using this simple form works fine as follows:
simple_form.html

<html>
<body>
<center>
<form name="myform" action="insert.php" method="post">
Software: <input type="text" name="software" /><br/>
Patients: <input type="text" name="patients" /><br/>
Reimbursement: <input type="text" name="reimbursement" /><br/>
rejection: <input type="text" name="rejection" /><br/>
<input alt="Show Results" id="btn_results" src="a_data/form_btn_show_results.png" type="image">
</form>
</center>
</body>
</html>

I know the issue is JQuery related, however, I have no idea how it is blocking the MySQL output of the form in my animated_form.html

Any help would be greatly appreciated.

Best Regards and happy and safe holidays,
dennishall

html-css jquery mysql php

Edited 13 Years Ago by dennishall because: n/a

2 Contributors
6 Replies
203 Views
6 Days Discussion Span
Latest Post 13 Years Ago Latest Post by dennishall

pritaeas 2,194 ¯\_(ツ)_/¯

13 Years Ago

$("#roi_calculator").submit(function(event) {
  event.preventDefault();

This prevents the actual submit to take place.

dennishall commented: Excellent JQuery skills. +2

Reply to this topic

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.

dennishall 0 Junior Poster in Training · Answer 1 · 2010-12-24T17:45:38+00:00

Thanks a million pritaeas:

You solved this. I was originally using this for debug and forget to comment it out.

Have a great, safe, and happy holiday season.

All the best,
dennishall

dennishall 0 Junior Poster in Training · Answer 2 · 2010-12-24T19:51:02+00:00

pritaeas: I have one other issue now and hope you could maybe assist again.

When I submit my form, it now writes to the DB, however, because I'm now successfully calling insert.php I'm not retaining my form so a user can see statistical results upon submit.

I know that AJAX is the solution, however, I have never combined AJAX with JQuery in this environment - so I'm lost (go figure) :)

I appended the end of the last SCRIPT in the head so it now looks as follows:

$("#roi_calculator").validate(
	{
		rules:{
			patients:{
				required:true,
				digits:true
			},
			reimbursement:{
				required:true,
				digits:true
			}
		},
		messages:{
			patients:{
				required: "Please enter an average amount of patients seen each month."
			},
			reimbursement:{
				required: "Please enter a dollar amount for claim reimbursement."
			}
		},
		errorLabelContainer:("#instructions"),
		errorElement: "p",
		errorPlacement: function(error, element){
			error.appendTo($("div.form_btns"));
		}
	}
)
}
)
// inserted new form submission code
			submitHandler: function(form) {
				// do other stuff for a valid form
				$.post('insert.php', $("#myform").serialize(), function(data) {
					$('#results').html(data);
				});
			}

and removed the insert.php from my form action=""
The result is that the form redisplays with emty information and I no longer write to the DB.

Your input did correct the issue, but I actually need the form to expand and show the results div after Show Results is clicked.

Have you any idea how / where in the script I can implement AJAX to allow me to send info to the DB and still have the Results div display?

Your time and skills are greatly appreciated.

Best Regards,
dennishall

dennishall 0 Junior Poster in Training · Answer 3 · 2010-12-29T00:50:40+00:00

pritaeas: No need for help, I resolved this by changing my AJAX script in the head to the following:

$(document).ready(function(){
	// Email Signup
	$("form#roi_calculator").submit(function() {
		var dataStr = $("#roi_calculator").serialize();
		$.ajax({
			type: "POST",
			url: "insert.php",
			data: dataStr,
			success: function(del){
				$('form#roi_calculator').hide();
				$('#instructions').fadeIn();
				}
			});
			return false;
		});
	});

and then added s sleep(3in seconds) command in my insert.php

Best Regards,
dennishall

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 4 · 2010-12-29T02:44:07+00:00

Sorry. Since you had already marked this thread solved, I no longer followed this. Glad to see you fixed it yourself (+1).

dennishall 0 Junior Poster in Training · Answer 5 · 2010-12-30T08:35:25+00:00

I ran into another snag with MySql UPDATE so thjought I would reference that post in this one...
http://www.daniweb.com/forums/thread334540.html

I have furthered my code as now I have a registration process and session vars being passed (session vars - I'm sure - are my issue) in this matter.