Hi.
Suppose I have a list box, which is filled out from mysql, and I have a text box and a submit button.
I want to add the text box data into list box and at the same time I want to have the text box data into mysql as well.
so how can I do this using jquery?
I did many search but still i don't have the clue.
I did a bit and it is working, but the list box does not appear when the page load, after after inserting new data the list box with having new data is showing correctly. I did this example just for the category now.
how can I display the list box onload as well? look the code:
category.php
<?php
$con = mysql_connect("localhost", "root", "sherzad");
mysql_select_db("db_student", $con);
$category_name = $_POST['bkCategory'];
$sql = "INSERT INTO tbl_category (category_name) VALUES('$category_name')";
mysql_query($sql);
$category_sql = "SELECT * FROM tbl_category order by category_name";
$result_category = mysql_query($category_sql);
$out = "<select name='selectCategory' size='6' multiple='multiple' id='selectCategory'>";
while($row_category = mysql_fetch_array($result_category)){
$out.= "<option value=" . $row_category['category_id'] . ">". $row_category['category_name'] . "</option>";
}
$out.= "</select>";
echo $out;
?>registry.php
<?php
include("conn.php");
$author_sql = "SELECT * FROM tbl_author order by first_name";
$result_author = mysql_query($author_sql);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Book Registration Form</title>
<style>
label{
font-weight: bold;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function() {
$(".insertCategory").click(function() {
var test = $("#bkCategory").val();
var dataString = 'bkCategory='+ test;
if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$.ajax({
type: "POST",
url: "category.php",
data: dataString,
cache: false,
success: function(html){
$("#cat").html('');
$("#cat").html(html);
document.getElementById('bkCategory').value='';
document.getElementById('bkCategory').focus();
}
});
} return false;
});
$(".insertAuthor").click(function() {
// we want to store the values from the form input box, then send via ajax below
var fname = $('#first_name').attr('value');
var lname = $('#last_name').attr('value');
if(fname=='' || lname=='')
{
alert("Please Enter Author First Name and Last Name");
}
else
{
$.ajax({
type: "POST",
url: "author.php",
data: "fname="+ fname +"& lname="+ lname,
cache: false,
success: function(){
document.getElementById('first_name').value='';
document.getElementById('last_name').value='';
document.getElementById('first_name').focus();
}
});
} return false;
});
});
</script>
</head>
<body>
<center><h1>Book Registration Form</h1></center>
<form id="form1" name="form1" method="post" action="">
<table width="800" border="0" align="center" cellpadding="3" cellspacing="3">
<tr>
<td>Book Title </td>
<td><label>
<input name="bkTitle" type="text" id="bkTitle" size="80" value="<?php echo $_POST['bkTitle']; ?>" />
</label></td>
</tr>
<tr>
<td>Book Language </td>
<td><label>
<select name="selectLanguage">
<option value="Persian">Persian</option>
<option value="English">English</option>
<option value="German">German</option>
</select>
</label></td>
</tr>
<form id="category" onsubmit="return false;">
<tr>
<td>Book Category (if not exist) </td>
<td><label>
<input name="bkCategory" type="text" id="bkCategory" value="New Category" size="50" />
<input type="button" value="submit" class="insertCategory">
</label></td>
</tr>
</form>
<tr>
<td>Select Category </td>
<td id="cat">
</td>
</tr>
<form id="author">
<tr>
<td valign="top">Author Full Name (if not exist) </td>
<td><label>
<input name="first_name" type="text" id="first_name" value="New Author First Name" size="40" />
<br />
<br />
<input name="last_name" type="text" id="last_name" value="New Author Last Name" size="40" />
<input type="button" value="Save Author" class="insertAuthor">
</label>
</td>
</tr>
</form>
<tr>
<td>Select Author </td>
<td><select name="select2" size="6" multiple="multiple" id="select">
<?php
while($row_author = mysql_fetch_array($result_author)){
?>
<option value="<?php echo $row_author['author_id']; ?>" ><?php echo $row_author['first_name'] . " , " . $row_author['last_name']; ?></option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<td>Book Edition </td>
<td><label>
<input name="bkEdition" type="text" id="bkEdition" size="10" value="<?php echo $_POST['bkEdition']; ?>" />
</label></td>
</tr>
<tr>
<td colspan="2"><label>
<input name="cmdRegister" type="submit" id="cmdRegister" value="Register Book" />
</label></td>
</tr>
</table>
</form>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.