user6779766 user6779766 - 3 months ago 13
jQuery Question

How to make Textarea and submit button in .php file hide for every row in database?

been working on some database data calling into a .php file.
The php file contains an "Add" button, a "textarea" and an "submit" button.

I did added some J Query script to it to make the "textarea and submit" button to hide until "add" button is clicked, and both "textarea and submit" to hide when "submit" button is clicked making "add" button reappear.

Ever thing is working fine but only glitch is, the script is only working for first row in the table, leaving the rest of rows uneffected.

I think i should use a loop or something.. spent couple of hours but couldn't able to figure it out by myself.

my script goes as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<?php
$servername = "localhost";
$username = "root";
$password = "*****";
$dbname = "the_database";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
$sql = "SELECT * FROM input";
$result = $conn->query($sql);
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js">
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$().ready = function() {
$('#text').hide();
$('#textsubmit').hide();
$("#addanswer").click(function() {
$('#addanswer').hide();
$('#text').fadeIn('slow').focus();
$('#textsubmit').fadeIn('slow');
});
$('#text').blur(function(){
$('#text').hide();
$('#textsubmit').hide();
$('#addanswer').fadeIn('slow');
});
}();
});//]]>
</script>
</head>
<body>
<?php
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<button class="addanswer" id="addanswer"><B>Add Answer</B></button>
<form name="answer" method="post" action="output.php">
<textarea type="text" class="text" name="text" required id="text" placeholder="Please type your question here.."></textarea>
<button type="submit" id="textsubmit" class="textsubmit"><B>Submit</B></button>

</form>

<?php }
} else {
echo "0 results";
}
$conn->close();
?>
</body>



Answer

Since you cannot have multiple occurrences of the same ID, you could do something like this.

<?php
foreach( $your_data as $index => $data ){
    echo '<button class="addanswer" id="addanswer_'.$index.'"><B>Add Answer</B></button>';
    echo '<form style="display:none;" name="answer_'.$index.'" method="post" action="output.php">'; // I dont think openning form from row to row would be nice!
    echo '<textarea style="display:none;"  type="text" class="text" name="text" required id="text_'.$index.'" placeholder="Please type your question here.."></textarea>';
    echo '<button style="display:none;" onClick="addanswer('.$index.');" type="submit" id="textsubmit_'.$index.'" class="textsubmit"><B>Submit</B></button>';
    echo '</form>';
}
... Other code stuff.

Now the each row is having a different ID because we have used $index variable. And also we pass the $index to the javascript function as well. So the javascript can do what ever based on the $index value.

You can have your javascript function, something like this.

<script type='text/javascript'>
function addanswer(index){
    $('#addanswer_' + index).hide();
    $('#text_' + index).fadeIn('slow').focus();
    $('#textsubmit_' + index).fadeIn('slow');
}
</script>

Note: I havent checked this code by running it. I think you will get some understanding with this.

Thanks

Comments