I have a form that provides some input boxes and a link with text "Add more". Clicking on the link repeatedly adds the input boxes.
This is my code:
<div class="col-md-2" id="repeatDiv">
<label for="total" class="control-label sr_only"><?php echo lang('total_label'); ?></label>
<?php echo form_input('total',set_value('total'), 'id="total" class="form-control col-md- 4"'.'placeholder='.'"'.lang('placeholder_total').'"'."'");?>
<?php echo form_error('total'); ?>
</div>
<button class="col-md-offset-2 btn btn-primary" id="addmore"><?php echo lang('add_more_btn'); ? />
I want this code to be repeated when a button or the link with text "add more" is clicked.
$('#addmore').on('click', function() {
$('#repeatDiv').clone().insertAfter('#repeatDiv');
});
Related
I have been working on a comment system in php and jQuery. I am using jQuery to slide a form whenever you press reply but instead 2 buttons work for only one form.
I am using php to get the data from a mysql database and display the content it displays it in div tags with a button that says reply when I click on the second button the first div come's down.
PHP CODE:
<?php if(!isset($_SESSION['fname']) && !isset($_SESSION['username']) && !isset($_SESSION['email'])) {
echo "<h1>You must be logged in to comment</h1>";
} else { ?>
<div id="comment">
<form action="createcomment.php?videoid=<?php echo $_GET['id']; ?>" method="post">
Comment: <br /><textarea name="comment" placeholder="Your comment..."></textarea><br />
<input type="submit" name="submit" value="Post Comment" class="btn btn-warning">
</form>
</div>
<?php } ?>
<div id="comments">
<?php $sql = "SELECT * FROM comments WHERE videoid = " . $_GET['id'];
$result = mysqli_query($db, $sql);
while($row = mysqli_fetch_assoc($result)) {
if(!empty($result)) {
?>
<div class="comment">
<h5><?php echo $row['name']; ?></h5>
<p><?php echo $row['comment']; ?></p>
<button class="btn btn-primary btn-small">Reply</button>
<div id="reply">
<form action="replycomment.php?videoid=<?php echo $_GET['id']; ?>&commentid=<?php echo $row['id']; ?>" method="post">
Reply Message: <br /><textarea name="comment" placeholder="Your comment..."></textarea><br />
<input type="submit" name="submit" value="Post Reply" class="btn btn-warning">
</form>
</div>
</div>
<?php }else {
echo "<h1>There are no comments.</h1>";
}
}?>
</div>
jQuery code:
<script>
$(document).ready(function(){
$("#reply").hide();
$("#comments > div > button").click(function(){
$("#reply").slideToggle();
});
});
</script>
The jQuery is supposed to hide all of the reply divs and when you click reply the div opens instead the first button works but the last button opens the first one i have no idea what is going on.
Thank you.
There can only be one of each ID in the entire DOM. You have an element with the id of "reply". Since the database is looping through all of the comments, there will be multiple elements with the id of "reply". This syntax is not correct.
Now, if you click on a button to toggle the element with the id of "reply", all of them will toggle. That's not what you want. Change the HTML to:
<button class="btn btn-primary btn-small">Reply</button>
<div class="reply">
<form action="replycomment.php?videoid=<?php echo $_GET['id']; ?>&commentid=<?php echo $row['id']; ?>" method="post">
Reply Message: <br /><textarea name="comment" placeholder="Your comment..."></textarea><br />
<input type="submit" name="submit" value="Post Reply" class="btn btn-warning">
</form>
</div>
Note that I have removed the id, and added the class. There can be multiple classes in a DOM. And so, the jQuery needs to hide all of the classes, so:
$(document).ready(function(){
$(".reply").hide();
// Hides all the elements with class="reply"
});
Now all we need is the button click action. If we just change the hashtag to the dot and make it a class, it still will toggle ALL of the elements with the class of reply. We need to just toggle the element that is right after the clicked button... right?
And so:
$(document).ready(function(){
$("#comments > div > button").click(function(){
$(this).nextAll('.reply:first').slideToggle();
// Gets all the next sibling elements under the same parent, and selects the first one with the class="reply"
});
});
Hello Everyone I am new to php and doing a project. My Problem is I am working on review page and fetching data from 3 tables using while loop.
The problem is I want to create comment reply system. I am using text area for comment in loop and showing the text area on button click but when I am click on button, each text area gets visible which I don't want. I think problem is due to while loop.
Please suggest me a proper idea.
Thank u in advance.
Php part:
<div class="feedback-list">
<!--img class="doc-img"src="img/doc-img.png" alt="tempimg" height="100" width="100"/>
<div class="feedback-header"-->
<?php
while($row1=mysql_fetch_array($result1))
{
$username1=$row1['username'];
$rtitle=$row1['reviewtitle'];
$rexperience=$row1['experience'];
echo '<div class="feedback"><img class="doc-img" src="img/doc-img.png" alt="temp img" height="100" width="100"/><div class="feedback-header">Rivew by '.$username1.'
<span class="stars" id="star1"><img src="img/stars.png"/></span>
</div>
<p> '.$rtitle.'</p><br/>
<p> '.$rexperience.'</p>
<form action="submitcomment.php" method="post" name="frms">
<!--button type="submit" onclick="showCommentBox()">Reply</button><br/-->
<input type="button" value="Reply" onclick="showCommentBox('.$row1['reviewid'].')"><br/>
<div class="hidden" id="comment">
<!--p>Comments and suggestions:<br><textarea name="comments" rows="3" cols="30" ></textarea><br><br>
<input type="submit" name="sub" value="Confirm"></p-->
</div>
</form>
<span class="read-more">Read More</span>
<span class="added-by">added on 25 March</span>
</div>';}?>
Script:
<script type="text/javascript">
function showCommentBox(x){
//alert(x);
var div=document.getElementById('comment');
div.className='visible';
document.getElementById("comment").innerHTML =
'<br/><textarea maxlength="5000" cols="30" rows="3" name="comments"></textarea>' +
'<input type="submit" name="sub" value="Confirm">';
}
</script>
ALL of your comment boxes have the same DOM ID:
<div class="hidden" id="comment">
^^^^^^^^^^^^
This is not permitted. An ID must be unique across the entire page. Because of this, getElementById() will only ever return ONE element which matches, which is generally the FIRST matching element it finds - there is no point in continuing to search for something of which only one can exist, right?
You probably want something more like
<div class="hidden" id="comment{$id}">
<button onclick="showComment($id);" >
function showComment(id) {
foo = document.getElementById('comment' + id);
}
i have problem like this.
-text | button-
-text | button-
(and so on)
-text | button-
== TEXTAREA ==
eg. i have 20 sets of text and its button. when I press any button, I get the text associated with the button that i pressed, and append its text to textarea.
Here all pair of text and button using same id.
this is the code :
<div id="part" >
<form name='form1' id='form1'>
<div id="teks"> <?php echo $text; ?></div>
<button type="button" id="pos" name="pos" value="POS" onclick="addPOS();"/>POS</button>
</form>
</div>
<div id="part" >
<form name='form1' id='form1'>
<div id="teks"> <?php echo $text; ?></div>
<button type="button" id="pos" name="pos" value="POS" onclick="addPOS();"/>POS</button>
</form>
</div>
//and so on, up to 20 part text-button
<script type="text/javascript">
function addPOS()
{
document.getElementById("posbox").value+='<?php echo $text; ?>';
}
</script>
<div id="box" >
<textarea style="width:420px" name="posbox" id="posbox" rows="4" cols="70"></textarea>
</div>
I just want to add text (text beside button i press) to textarea. How to doing that?
any help will be greatly appreciated. thanks
you have to work with classes instead of ids. id must be unique . So get elements by class document.getElementsByClassName(''); and loop through array to change their values
Change everywhere id="" to class="" and do smth like this
var elements = document.getElementsByClassName('className');
for(var i=0; i<elements.length; i++) {
//your code elements[i].value=
}
I need to display Multiple combo boxes using AJAX...In my form displays only one combo box and it below combo box in text "add more courses".If i click "add more courses" then i need to open another combo box and like more combo box..Please any one Help me immediately
You can try something like this with jQuery to add a new Field.
<script type="text/javascript">
$(document).ready(function() {
$("#addCourse").click(function() {
var html = '<p><input type="text" name="course[]" value="" /></p>';
$("#courses").append(html);
});
});
</script>
<div id="courses">
<p>
<input type="text" name="course[]" value="" />
</p>
</div>
<a href="#" id="addCourse" onClick="javascript:addMore();">
add more courses
</a>
I have a page in where users can ask questions.
When they move on to the next page, I need to do a mysql query and post all the asked question into the database. I use jquery to hide the answers and show them when clicking the corresponding button.
The structure of the page looks like this:
<!-- questions.php -->
<form action="submitquestions.php" method="post">
<div>
<span>This is a question</span>
<button name="question" value="question1">Ask the question</button>
<span>This is the answer</span>
</div>
<div>
<span>This is a question</span>
<button name="question" value="question2">Ask the question</button>
<span>This is the answer</span>
</div>
<div>
....
</div>
<button name="submit">Go to the next page</button>
</form>
<!-- submitquestions.php -->
<?php if (isset($_POST['submit'])) {
var_dump($_POST);
} ?>
How can I put all the clicked buttons into the $_POST array and that way submit the data to my database?
Considered using checkboxes? You could style them nicely with jQuery as well. You really shouldn't use <button>s anyway.
Simply use <input type="checkbox" name="question1"> then the jQueryUI buttons and checkboxes to style it. Make sure your disable it once it has been checked so it doesn't get undone.
Then in PHP, check if(isset($_POST['question1'] )) { to see if a box has been checked.
Thanks for feedback from comments.
Here's my solution:
<form action="submitquestions.php" method="post">
<div>
<span>This is a question</span>
<input type="checkbox" name="question[]" value="question1" style="display:none">
<button>Ask the question</button>
<span>This is the answer</span>
</div>
<div>
<span>This is a question</span>
<input type="checkbox" name="question[]" value="question2" style="display:none">
<button>Ask the question</button>
<span>This is the answer</span>
</div>
<div>
....
</div>
<button name="submit">Go to the next page</button>
</form>
<script>
$(document).ready(function(){
$("form button").click(function(){
$(this).prev(":checkbox").attr("checked", true);
});
});
</script>
<!-- submitquestions.php -->
<?php if (isset($_POST['submit'])) {
if(!isset($_POST['question'])) $_POST['question'] = array(); //Just in the case no button is pressed
//$_POST['question'] will have an array of all clicked questions.
var_dump($_POST);
} ?>
As you can see, we use 'hidden' checkboxes 'behind' each button, that check when a button is pressed. And, as our buttons don't have name but checkboxes do, we send only the checked checkboxes to the server.
$_POST['question'] will have an array of all clicked questions. No 'isset' per question needed
If you use <button type="submit" name="this button's unique name goes here" value="1">Button text goes here</button> then you can check for the button that triggered the submit with $_POST ['this button's unique name goes here'] == 1
At least in theory you can. Internet Explorer prior to version 8 mishandles the <button> tag quite badly. In internet explorer 6 it is in fact basically impossible to determine which button was clicked if you use the <button> tag.
http://www.w3schools.com/tags/tag_button.asp