Develop Reference

Comments system : open a complex form (editor) next to Reply button

I have written a comment system in PHP. Currently, the editor is on the top of the page:
<form method="POST" id="comment_form" enctype="multipart/form-data">
<input type="text" name="comment_name" id="comment_name" value="<?php echo $user ?>" placeholder="User" />
<textarea name="comment_content" id="comment_content" placeholder="Comment" rows="5"></textarea>
<input type="hidden" name="comment_id" id="comment_id" value="" />
<input type="submit" name="submit" id="save" class="btn" value="Send" />
</form>
Each comment look like that (simplified):
<div class="comment">
<b><?php echo $row["user"] ?></b>
<div>
<?php echo $row["comment"] ?>
</div>
<button type="button" class="btn reply" id="'.$row["comment_id"].'">Reply</button>
</div>
An small javascript function sets the focus on the editor when the Reply button is clicked:
$(document).on('click', '.reply', function(){
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
});
I would like that editor to open below any Reply button when one of the buttons is clicked.
I guess that adding the editor code after each comment with a "display: none" attribute is not the best solution.
Would you please help me to achieve that ?

If I understand correctly you want one form for all comments, rather than duplicating the form HTML inside every comment.
In which case you need to move it in the DOM via JavaScript. You don't show any attempt at this but it might look something like this:
$(document).on('click', '.reply', function() {
$('#comment_form').insertAfter(this); //<-- move form
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
Note also that your JS is syntactically invalid as you have double });.

I have created a dynamic checkbox using php, but when i use .checked() to check it, only first radio button is checked. how to check the rest?

<div id="pop2" class="box2" style="display: none">
<form action="" method="post">
<div class="second" style="margin-top:3px;margin-left:10px;font-size:100%">Add to</div>
<?php
$new2=array();
$new2=getlist();
foreach($new2 as $value){
echo'<input type="radio" id="qwerty" name="qwerty" value="'.$value.'" onclick="theLast()" />';
echo"$value";echo"<br>";}
?>
<hr>
<button type="button" id="add2" class="new" onclick="theFinal()" >Create new list</button>
</form>
</div>
and i used javascript to check in theLast() function
if (document.getElementById('qwerty').checked) {
window.lists=document.getElementById('qwerty').value;
}
only first radio button is working fine, rest are not detected in .checked()

Having the same id attribute for all the checkboxes can cause these kinds of issues. I would suggest using a commom class instead and iterating the checkboxes using the getElementByClassName function to check for "checked" boxes.

How to validate textarea and radio button in a loop

I need one help. I have some multiple textarea, radio button and dropdown list which are created by clicking on a button. I need to validate them for textarea has blank value, radio button check and dropdown select using JavaScript/jQuery. I am explaining my code below.
<div style="width:24%; float:left; padding:10px;">No of questions :
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" value="<?php if($_REQUEST['edit']) { echo $getcustomerobj->no_of_question; } else { echo $_REQUEST['no_of_question']; } ?>" type="text" onkeypress="return isNumberKey(event)">
</div>
<div style="padding-bottom:10px;">
Questions : <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();"><input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>
<script>
function addQuestionField(){
var get =$("#ques").val();
if(get==null || get==''){
alert('Please add no of questions');
}else{
var counter = 0;
if (counter > 0){
return;
}else{
counter++;
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
?>
<?php
$status=array("status"=>'1');
$feeddatascale=$db->kf_scale->find($ustatus);
?>
for(var i=1;i<get;i++){
$('#container').append('<div><div style="width:24%; float:left; padding:10px;"> <textarea class="form-control" name="questions'+ i +'" id="questions'+ i +'" placeholder="Questions" style="background:#FFFFFF;" rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea></div><div style="float:left;margin-top:37px;"><div style="float:left; margin-right:10px;"><?php foreach($feeddata as $v){?> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?> <?php }?></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option><?php } ?></select></div><div style="clear:both;"></div></div><div style="clear:both;"></div></div>');
}
}
}
}
</script>
Here when user will click on + button some multiple textarea, radio button and dropdown list dynamically. Here I need when my form will submit I need to check the validation of all whether those are not blank/checked. Please help me.

From what I can understand from the question, I have deduced that you have a form with input controls. The user can press '+' to replicate/clone a div containing all input thus providing an additional form filled with input controls. If this is the case, you can use the following for validation to ensure that all currently visible input controls have been filled with data.
Pre-requisite: Ensure that all forms are assigned the same class name.
Example:
var visibleDivs = $(".DisplayableDiv:visible"); // .DisplayableDiv name of all class containing form controls
var hasValue = true;
// loop over all visible divs
for(i = 0; i < visibleDivs.length; ++i)
{
$(visibleDivs[i]).find('input')
.each(function() { // iterates over all input fields found
if($.trim($(this).val()).length === 0) {
hasValue = false; // if field found without value
break;
}
});
}
if(hasValue === false) {
// handle validation logic here (prompt user to complete all input areas etc)
}

There are a number of problems with your code, but in particular you have the wrong approach.
Note that after the page is rendered and the DOM displayed, PHP has finished and no more PHP can run. So how do you do more stuff in PHP? Two options:
(1) Forms, or
(2) AJAX - it's pretty easy, see these simple examples
Ajax sends specified data to a backend PHP file. Note that you cannot post AJAX data to the same file that contains the AJAX javascript. You must use a second PHP file.
The backend PHP file receives the data, uses the incoming data (e.g. num of ques) to create new HTML in a $variable and then just echos that $variable back to the originating file, where it is received in the .done() function (aka the success function), as a variable (e.g. recvd). If you receive HTML code, then that code can be injected back into the DOM via methods like .append() or .html() etc.
Here is a rough approximation of how you might proceed.
$('#plus').click(function(){
addQuestionField();
});
$('#minus').click(function(){
deleteQuestionField();
});
function addQuestionField(){
var numques = $("#ques").val();
if(numques==null || numques==''){
alert('Please add no of questions');
return false;
}
var myAj = $.ajax({
type: 'post',
url: 'ajax.php',
data: 'numques=' + numques,
});
myAj.done(function(recvd){
$('#container').append(recvd);
});
}
<style>
#d1 {width:24%; float:left; padding:10px;}
#d2 {padding-bottom:10px;}
</style>
<div id="d1" style="">No of questions :
<input id="ques" class="form-control" placeholder="no of question" type="text" />
</div>
<div id="d2">
Questions :
<input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+">
<input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-">
</div>
Validating user-submitted data is a separate issue, but the basic idea is shown above when the $('#ques') value is validated -- if empty, we alert a message and return false to return control to the user.
Note that you can validate either client-side (jQuery) or server-side (PHP). The difference is that when you validate client-side, you can return control to the user without losing anything they typed. When you validate server-side, you must send back all the user-typed data and re-populate the controls manually (i.e. it's a lot more work)
Also note that if you validate client side, and you have ANY concern about hacking, then you must also re-validate server side because client-side validation can be easily hacked. But if it fails server-side validation you will know the user monkeyed with your validation and you can be less kind about re-populating their entries...
Here is a basic example of client-side field validation.

JQuery - count total of div after clone()

This is my continuation of my previous question: Modifying $i inside a form
So now I created the code like this:
<form method="post" action="actionhere">
<div id='clone_me'>
<?php
for($i=1; $i<=1;$i++) {
?>
<span id="title">Line <?php echo $i;?></span>
<input type='checkbox' name='ck[]'/>
<input type='text' name='tx[]'/>
<?php } ?>
</div>
<input type='submit' name='submit' value='Submit'/>
<input type="button" value="Add row" class="addrow" />
</form>
<script>
$(document).ready(function() {
$('.addrow').click(function(){
var n= $("#clone_me").length;
var new_n=n+1;
var new_line= $('#clone_me div:first').clone().append();
$("span#title", new_line).text("Line bet "+new_n+" ");
new_line.appendTo('#clone_me');
alert(new_n);
});
});
</script>
So I can add new row when I click the button, but I want to change the title inside span element, but I can't make it work. The 1st cloned, yes, the title is changed correctly (from 1 to 2), but the 2nd cloned still display "2", not "3".
What is the correct way?
EDIT
I only put $i=1 for testing purposes. In actual application I need to change it to 10 (so will loop 10 rows)

Two onclick on one element

I have a simple code to delete data from the database,and I want a warning message to appear before deleting. the code works fine when I put one onclick and when I put two only the first onclick works.
and I need to onclick one for the warning message and the other for delet.php page.
<form><input type="button" value="delete" onclick="return confirm('Really delete?');" onClick='window.location.href="delete.php?id= <?php echo $id; ?>"' ></form>

This is how I would handle it:
<input type="button" value="delete"
onclick="confirmDelete('<?php echo $id; ?>');">
Then elsewhere in the page:
<script type="text/javascript">
function confirmDelete(id) {
if(confirm('Really delete?')) {
window.location.href= "delete.php?id=" + id;
}
}
</script>
Notice I removed the <form> element. If this is the only context this is in, the <form> element is unnecessary since you're not actually filling out a form, just clicking a button. If there is more context you didn't include in your question, then it might be relevant to that.

Try using this with an if clause:
<form>
<input type="button" value="delete" onclick="
if(confirm('Really delete?')) {
window.location.href='delete.php?id=<?php echo $id; ?>';
}
else {
return false;
}
">
</form>

You can only use one onClick. But there's a way to do what you want in only one ;)
<form>
<input type="button" value="delete" onclick="
if(confirm('Really delete?')){
window.location.href=\"delete.php?id= <?php echo $id; ?>\"
}else{
return false;
}" />
</form>