Multiple record inputs with one Submit...

[Jim R]

A basketball coach choose his School from a drop down list, which needs to be a constant throughout the rest of the data input on this page.

 

Beneath that are Text Fields requesting a Player's name, class, height, and stats.  Just one set of fields.

 

Here is what I want.  I want the coach, when he is done inputting the player's information, to hit ADD PLAYER button and have a blank set of Text Fields appear on the page without having left the page.  It can show up just beneath it or in place of the old Text Fields. 

 

When he is done entering all the players, he hits the FINISHED button. 

 

 

 

 

I'm assuming the ADD PLAYER button is the one submitting the information to the database, and the FINISHED button just moves the coach beyond that screen or maybe submits the final player's information. 

 

I'm also assuming, as referred to above, the School selection stays constant throughout the whole process.  406 schools in a pre-populated drop down menu is not fun the scroll through 8-12 times. 

 

 

Easy enough, right?  Riiiiiiiiiiiiiiiiight.  : )

 

Can anyone help me with this or throw me in a great direction for help?

[facarroll]

Post some code so that I can get a better idea of what you are trying to do.

[Jim R]

Not really any code of my own.  I found an example online, copied it, made the changes to match my database, and it doesn't work.  It uses jQuery too.  Here is just the code on the page using the jQuery and the form:

 

<link href="/resources/live_test/live_entry.css" rel="stylesheet" type="text/css">

<?php
if(!$con = mysql_connect("localhost","######","######")) {
   die("Could not connect to database: ".mysql_error());
}
mysql_select_db("jwrbloom_wpHHR", $con);

?>


<script type="text/javascript" >
$(function() {

//Update Message...
$(".update_button").click(function() {

var boxval = $("#content").val();
var dataString = 'content='+ boxval;

if(boxval=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');

$.ajax({
type: "POST",
url: "update_data.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});

//Delete Message..

$('.delete_update').live("click",function()
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{

$.ajax({
type: "POST",
url: "delete_data.php",
data: dataString,
cache: false,
success: function(html){
$(".bar"+ID).slideUp('slow', function() {$(this).remove();});
}
});

}
return false;
});

});
</script>



<div>
<form method="post" name="form" action="">
<h3>What are you doing?</h3>
<textarea  name="content" id="content" maxlength="145" >
</textarea>
<input type="submit" value="Update" name="submit" class="update_button"/>
</form>
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>
<div id='old_updates'>
// Display old updates form messages table.
</div>

[Jim R]

Here is update_data.php

 

if(isSet($_POST['content']))
{
$content=$_POST['content'];
mysql_query("insert into messages(msg) values ('$content')");
$sql_in= mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$r=mysql_fetch_array($sql_in);
$msg=$r['msg'];
$msg_id=$r['msg_id'];
}

?>

<li class="bar<?php echo $msg_id; ?<">
<div align="left">
<span ><?php echo $msg; ?> </span>
<span class="delete_button"><a href="#" id="<?php echo $msg_id; ?>" class="delete_update">X</a></span>

</div>
</li>

 

Here is delete_data.php

 

 

if($_POST['msg_id'])
{
$id=$_POST['msg_id'];
$id = mysql_escape_String($id);
$sql = "delete from messages where msg_id='$id'";
mysql_query( $sql);
}

[Pikachu2000]

Can you be more descriptive of what about it doesn't work? At what point does it fail, are there error messages, etc.?

[Jim R]

I'm not getting any error messages on the screen.  It's not inserting to the database, so that much I know.  I have zero experience with jQuery beyond setting up their tab GUI.  Here is the site I took the sample from:

 

http://webcache.googleusercontent.com/search?q=cache:WJ0Gt6UUqZUJ:www.9lessons.info/2009/11/insert-delete-with-jquery-and-ajax.html+jquery,+live,+insert+database&cd=7&hl=en&ct=clnk&gl=us&client=firefox-a

 

Their demo works pretty well, which is linked on that page.

 

 

Here is my test page.  http://hoosierhoopsreport.com/live/