jQuery: Textbox value to Listbox and MySQL

Question

tanha -2 Posting Whiz in Training

17 Years Ago

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.

javascript:jquery mysql php

1 Contributor
1 Reply
277 Views
1 Day Discussion Span
Latest Post 17 Years Ago Latest Post by tanha

Dani AI

Generated 9 Months Ago

Short diagnosis — nothing mysterious: the empty box on first load is because your page never renders the category <select> when the page is first built. In ’s registry.php the <td id="cat"> is empty, and the only time a select appears is after the AJAX call that posts a new category and replaces #cat. Fixes fall into two simple options: render the select server‑side when registry.php is served, or fetch it on document ready with AJAX.

A minimal, safe client-side fix (no server restructure) is to make category.php stop inserting when there is no POST, then load the list on ready and post new items:

$(function(){
  // populate on page load (category.php must only INSERT when $_POST['bkCategory'] is set)
  $("#cat").load("category.php");

  $(".insertCategory").on("click", function(e){
    e.preventDefault();
    var v = $("#bkCategory").val().trim();
    if(!v){ alert("Please enter a category"); return; }
    $.post("category.php", { bkCategory: v }, function(html){
      $("#cat").html(html);
      $("#bkCategory").val("").focus();
    });
  });
});

A more robust approach: separate responsibilities. Create one endpoint (category_fetch.php) that only returns the <select> and another (category_add.php) that accepts a POST, inserts the category with a prepared statement, and returns JSON with the new id/name. Client-side can then append one <option> (faster and less brittle than reloading the whole select). Always escape category names when outputting (htmlspecialchars) and use mysqli or PDO prepared statements to avoid SQL injection.

Quick troubleshooting checklist:

Don’t nest forms — move the small forms out of form1. Nested forms break browsers.
Use .val() instead of .attr('value').
Prefer data: { fname: fname } (object form) for $.post / $.ajax.
Check the Network tab and console for the AJAX response and PHP errors.
Stop using mysql_* (deprecated); switch to mysqli/PDO and prepared statements.

These changes will make the list visible on load and more secure and maintainable.

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.

tanha -2 Posting Whiz in Training · Answer 1 · 2009-07-30T12:40:12+00:00

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>