Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Creating a multi-part form that submits to db
- Thread starter yaknowss
- Start date
assuming you want a nice user experience, this is best achieved with a mix of javascript and php.
essentially you create a number of 'pages' and on each page have a button. that button hides the current page and shows the next page.
e.g.
then in your receiving script you would get address the following superglobals
essentially you create a number of 'pages' and on each page have a button. that button hides the current page and shows the next page.
e.g.
Code:
<!DOCTYPE HTML>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
var pages = new Array;
$(document).ready(function(){
numPages = $('fieldset.page').length;
$('button.next').on('click', function(e){
e.preventDefault();
$('fieldset.page').hide();
$(this).closest('fieldset.page').next().show();
});
$('button.prev').on('click', function(e){
e.preventDefault();
$('fieldset.page').hide();
$(this).closest('fieldset.page').prev().show();
});
//set to the first
$('fieldset.page:gt(0)').hide();
$('fieldset.page:eq(0) input').focus();
});
</script>
</head>
<body>
<form method="post" action="sompage.php">
<fieldset class="page">
Enter your name: <input name="name" type="text" /><br/>
<button class="next">Next</button>
</fieldset>
<fieldset class="page">
Enter your email: <input name="email" type="text" /><br/>
<button class="prev">Prev</button>
<button class="next">Next</button>
</fieldset>
<fieldset class="page">
All Done
<button class="prev">Prev</button>
<input type="submit" name="xSubmit" value="Save" />
</fieldset>
</form>
</body>
</html>then in your receiving script you would get address the following superglobals
Code:
<?php
if(isset($_POST['xSubmit'])):
mysql_connect($dbHost, $dbUser, $dbPassword) or die(mysql_error());
mysql_select_db($databaseName) or die(mysql_error());
$sql = "Insert into sometable (id, name, email) values (NULL, '%s', '%s')";
$query = sprintf($sql, mysql_real_escape_string(trim($_POST['name'])), mysql_real_escape_string(trim($_POST['email'])));
mysql_query($query) or die(mysql_error());
echo 'All Saved';
else:
echo 'nothing to do as no data submitted';
endif;
?>- Thread starter
- #3
that's up to you. the way the above was scripted assumed that the php would be on a separate landing page but there is absolutely no reason why that would be the case. it's a matter of coding preference only. Self-processing form pages are entirely usual.
- Thread starter
- #5
it is all on the page but the completed bits are hidden. to see them you press prev.
if you want not to hide completed parts of the form then comment out the Libes with hide() in the prev and next functions. not a good user experience though.
if you want not to hide completed parts of the form then comment out the Libes with hide() in the prev and next functions. not a good user experience though.
- Thread starter
- #7
- Thread starter
- #8
Okay... so I'm kind of working off what I already had set up as far as the HTML form goes. I did use your .php to submit data. However, the data is not showing up in table.. any idea why? Here is what I have for my HTML form
and here is my php code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Employee User Form</title>
<script type="text/javascript" src="js/employee-user-form.js"></script>
</head>
<body>
<form name="employee_info" id="employee_info_frm" method="post" action="submit.php">
<div><strong>General Information:</strong><br />
First Name: <input type="text" name="first_name" id="emp_first_name" />
Last Name: <input type="text" name="last_name" id="emp_last_name" />
<br />
Date of Birth: <input type="text" name="dob" id="emp_dob" /><br />
Address1: <input type="text" name="address1" id="emp_address1" /><br />
Address2: <input type="text" name="address2" id="emp_address2" /><br />
City: <input type="text" name="city" id="emp_city" /> State: <input type="text" name="state" id="emp_state" width="35" /> Zip: <input type="text" name="zip" id="emp_zip" width="75" />
<br />
Phone: <input type="text" name="phone" id="emp_phone" /><br />
Department: <input type="text" name="dpt" id="emp_dpt" />
Job Title: <input type="text" name="title" id="emp_title" /><br />
Date of Hire: <input type="text" name="doh" id="emp_doh" />
</div><input type="submit" name="submit" value="Submit" /></form>
</body>
</html>and here is my php code:
Code:
<?php
if(isset($_POST['xSubmit'])):
mysql_connect($sqldev, $pmwebuser, $pnms55120) or die(mysql_error());
mysql_select_db($IntranetWeb) or die(mysql_error());
$sql = "Insert into emp_user_form_gen (id, emp_first_name, emp_last_name, emp_dob, emp_address1, emp_address2, emp_city, emp_state, emp_zip, emp_phone, emp_dpt, emp_title, emp_doh, emp_supervisor) values (NULL, '%emp_first_name', '%emp_last_name', '%emp_dob', '%emp_address1', '%emp_address2', '%emp_city', '%emp_state', '%emp_zip', '%emp_phone', '%emp_dpt', '%emp_title', '%emp_doh', '%emp_supervisor')";
$query = sprintf($sql, mysql_real_escape_string(trim($_POST['emp_first_name'])), mysql_real_escape_string(trim($_POST['emp_last_name'])), mysql_real_escape_string(trim($_POST['emp_dob'])), mysql_real_escape_string(trim($_POST['emp_address1'])), mysql_real_escape_string(trim($_POST['emp_address2'])), mysql_real_escape_string(trim($_POST['emp_city'])), mysql_real_escape_string(trim($_POST['emp_state'])), mysql_real_escape_string(trim($_POST['emp_last_name'])), mysql_real_escape_string(trim($_POST['emp_last_name'])), mysql_real_escape_string(trim($_POST['emp_zip'])), mysql_real_escape_string(trim($_POST['emp_phone'])), mysql_real_escape_string(trim($_POST['emp_dpt'])), mysql_real_escape_string(trim($_POST['emp_title'])), mysql_real_escape_string(trim($_POST['emp_doh'])), mysql_real_escape_string(trim($_POST['emp_supervisor'])));
mysql_query($query) or die(mysql_error());
echo 'All Saved';
else:
echo 'nothing to do as no data submitted';
endif;
?>Sure. You have called your submit button 'submit' rather than xSubmit.
Due to JavaScript naming clashes if you are going to use JavaScript on a page it is better not to call your submit buttons 'submit'. So change the name of the control and try again.
Due to JavaScript naming clashes if you are going to use JavaScript on a page it is better not to call your submit buttons 'submit'. So change the name of the control and try again.
Sure. You have called your submit button 'submit' rather than xSubmit.
Due to JavaScript naming clashes if you are going to use JavaScript on a page it is better not to call your submit buttons 'submit'. So change the name of the control and try again.
Due to JavaScript naming clashes if you are going to use JavaScript on a page it is better not to call your submit buttons 'submit'. So change the name of the control and try again.
- Status
Similar threads
