How to get data from form in a modal into mysql
Goal: Allow users to click a button/link located on a page (call it host page), a modal appears containing a form. User fills out form and clicks on submit button, data is written to mysql. Modal closes and user is left looking at the 'host page'.
I have this 2/3 working. Clicking creates the modal loaded with the form. Data added to the form is written to the database. The modal closes after submit. The problem is at the end of the process. When the user submits, the modal closes and the user is shown the 'form' page in place of the 'host' page. In addition it appears that the form is inserting the form datab twice into the database.
Question Is what I want to do possible, and if so how would I change the process?
Code (host.php)
Host Page
<div>
<h2>Test Section</h2>
<p> This <a id="target" href="http://localhost/dialogExperiments/TESTsingleformfeedback.php" title="Test Form">LINK</a> opens the feedback form.</p>
</div>
Form Page (form.php)
<body>
<!-- Begin forms section --><div>
<h1> Form</h1>
<!-- First section is php script to process this particular form-->
<?php
$browser = get_browser(null, true);//get array of viewing browser information. Used in POST below.
//Address error handling
ini_set ('display_errors', 1);
error_reporting (E_ALL & ~ E_NOTICE);
if (isset ($_POST['submit'])) {//Handle the form
if ($dbc = @mysql_connect ('localhost','root','root')) {
if (!@mysql_select_db ('feedback1')) {
die ('<p>Could not select the database because <b>' . mysql_error() . '</b></p>');
}
}else{
die('<p>Could not connect to MySQL because <b>' . mysql_error() . '</b></p>');
}
//Define the query. Note in this query we use the table "errors"
$query0 = "INSERT INTO errors (ID, words_omitted, jumbled_text, other, description, url, date_recorded, user, browser, operating_system)
VALUES (0, '{$_POST['words_omitted']}', '{$_POST['jumbled_text']}', '{$_POST['other']}', '{$_POST['description']}','{$_POST['url']}',NOW(),'{$_POST['user']}','{$_POST['browser']}','{$_POST['operating_system']}')";
//Execute the query
if (@mysql_query ($query0)) {
print '<p>The First form feedback has been recorded.</p>';
}else{
print "<p>Could not add entry because <b>" . mysql_error() . "</b> The query was $query0.</p>";
}
mysql_close();
}
?>
<!-- End process script and next display form-->
<!-- Begin Form 1 Errors--><div id="hideCategory1" class="formFrame">
<h2>Errors in the text</h2>
<p>Please check all that apply and add any description you can.</p>
<form action="TESTsingleformfeedback.php" method="post" name="errorInText">
<p><input name="words_omitted" type="checkbox" value="Words Missing" />Words Missing</p>
<p><input name="jumbled_text" type="checkbox" value="Jumbled Words" />Jumbled Text</p>
<p><input name="other" type="checkbox" value="Other" />Other - Please add details in the "Description" Box.</p>
<em>Description</em>
<p>Please add as much descripton as you can about the problem you noticed</p>
<textarea name="description" cols="40" rows="5"></textarea>
<p>Page Address:<input name="url" type="text" value="" id="targetURL" /></p>
<p>Date Recorded</p>
<p>User<input name="user" type="text" size="40开发者_运维问答" maxlength="100" /> </p>
<p>Browser<input name="browser" type="hidden" value="<?php echo $browser['browser'] ?>" /></p>
<p>Operating System<input name="operating_system" type="hidden" value="<?php echo $browser['platform'] ?>"/></p>
<input type="submit" name="submit" value="Add To Records" />
</form>
</div>
</div>
</body>
The Javascript/jQuery script is
$(document).ready(function() {
$('#target').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 500
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
I'd appreciate any pointers on how to change the process so that I can use the modal form.
Thanks.
You have a number of errors there including your flow
$('#target').each(function() {should not have the each function because the IDs should always be unique and therefore should not be more than one id="target".- the reason you getting it twice is because your MySQL is not validated properly, you need
if(isset($_POST)){ /* mysql thingy goes here */ }thats why you get it posted twice Please please please, use mysql_real_escape_string($_POST['whatever']);
Well good luck and you should revise alot more :)
UPDATED
if (isset ($_POST['submit']) && $_POST['submit']=='Add To Records') {
// check if the form was submitted
//do db thing here
$link = mysql_connect('localhost', 'mysql_user', 'mysql_password');
if (!$link) {
die('Not connected : ' . mysql_error());
}
// make foo the current db
$db_selected = mysql_select_db('foo', $link);
if (!$db_selected) {
die ('Can\'t use foo : ' . mysql_error());
}
//insert into db here using mysql_query();
//if there was no mysql_error(); then show the successfully message else error message
// please also check mysql_real_escape_string() on php.net its important so people don't hack ur
//db, n potentially the whole website itset.
//http://www.php.net/manual/en/function.mysql-real-escape-string.php
}else{
?>
<form>.....</form>
<?php
}
so the above code, will check for the form, if it has been submitted first,then connect,select db name, then insert into the db, other wise if form was not submitted it will show the form.
Remember you can use $("#my_form_id").serialize() to get your form datas for $.ajax call.
Check out http://api.jquery.com/serialize/
加载中,请稍侯......
精彩评论