been working on database data calling .php file. php file contains "add" button, "textarea" , "submit" button.
i did added j query script make "textarea , submit" button hide until "add" button clicked, , both "textarea , submit" hide when "submit" button clicked making "add" button reappear.
ever thing working fine glitch is, script working first row in table, leaving rest of rows uneffected.
i think should use loop or something.. spent couple of hours couldn't able figure out myself.
my script goes 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 * 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 question here.."></textarea> <button type="submit" id="textsubmit" class="textsubmit"><b>submit</b></button> </form> <?php } } else { echo "0 results"; } $conn->close(); ?> </body>
since cannot have multiple occurrences of same id, this.
<?php foreach( $your_data $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">'; // dont think openning form row row nice! echo '<textarea style="display:none;" type="text" class="text" name="text" required id="text_'.$index.'" placeholder="please type 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 each row having different id because have used $index variable. , pass $index javascript function well. javascript can ever based on $index value.
you can have javascript function, this.
<script type='text/javascript'> function addanswer(index){ $('#addanswer_' + index).hide(); $('#text_' + index).fadein('slow').focus(); $('#textsubmit_' + index).fadein('slow'); } </script> note: havent checked code running it. think understanding this.
thanks
Comments
Post a Comment