DaniWeb Forum Index > Web Development > PHP

jQuery: Textbox value to Listbox and MySQL

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2007

Posts: 199

Reputation: tanha is an unknown quantity at this point

Solved Threads: 0

tanha

Offline

Junior Poster

jQuery: Textbox value to Listbox and MySQL

Jul 29th, 2009

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.

•

Join Date: Aug 2007

Posts: 199

Reputation: tanha is an unknown quantity at this point

Solved Threads: 0

tanha

Offline

Junior Poster

Re: jQuery: Textbox value to Listbox and MySQL

Jul 30th, 2009

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

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
 
<?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;
?>
<?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

 Help with Code Tags 
 PHP Syntax (Toggle Plain Text) 
 
<?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>
<?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>