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 });.

hide div with javascript

Why doesn't this work. What should i do with the js to hide me the s_login div? pls help
<?php
define("INSTALLING", true);
$hide = true;
if(INSTALLING == true): ?>
<script type="text/JavaScript">
<?php if (isset($hide)){if($hide == true){echo "
document.getElementById('s_login').style.visibility = 'hidden';
";}} ?>
</script>
<div id="s_login">
<form action="index.php" method="GET">
<input type="text" name="s_host" placeholder="MySQL Host" />
<input type="text" name="s_user" placeholder="MySQL Username" />
<input type="password" name="s_password" placeholder="MySQL Password" />
<input type="submit" name="submit" value="Log In" />
</form>
</div>
<?php else: ?>
<?php endif; ?>

The best way is to wrap the function within
$(document).ready(function() {
// script here
}
using jQuery, or
document.addEventListener("DOMContentLoaded", function(event) {
// script here
});
without jQuery.
This ensures the DOM is loaded before the script is fired.

Put the hiding element script code inside dom ready or window onload method. Your script is executed first and at that time the dom i.e you s_login element isn't available inside the DOM.
With the current code check this and you'll get null. I.e you don't have an element at hand which you hide.
var element = document.getElementById('s_login');
console.log(element);
if you are using jquery you can do this:
$(document).on("ready",function(){
document.getElementById('s_login').visibility = "hidden"
});
else natively
window.onload = function(){
document.getElementById('s_login').visibility = "hidden"
}
Didn't use DOMContentLoaded Listener as that can have some cross browser concerns.

javascript subscribe form change

I have this code for form output, but I want to change the result so that it will load two buttons which will subscribe and unsubscribe, how do I do that?
Tried
<div><a onclick="$('div#newsletter_message').load('index.php?route=module/newsletter/callback&subscribe=' + $('input[name=\'subscribe\']:checked').val(1) + '&email=' + escape($('input[name=\'newsletter_email\']').val()) + '&name=' + escape($('input[name=\'newsletter_name\']').val()), function() { $('div#newsletter_message').hide(); $('div#newsletter_message').show('slow'); });" class="buttons"><span style="float:left; clear:both;">Subscribe</span></a></div>
and
<div><a onclick="$('div#newsletter_message').load('index.php?route=module/newsletter/callback&subscribe=' + $('input[name=\'subscribe\']:checked').val(0) + '&email=' + escape($('input[name=\'newsletter_email\']').val()) + '&name=' + escape($('input[name=\'newsletter_name\']').val()), function() { $('div#newsletter_message').hide(); $('div#newsletter_message').show('slow'); });" class="buttons"><span style="float:left; clear:both;">Unsubscribe</span></a></div>
But no effect
<div class="box">
<!-- <div class="box-heading"><?php echo $heading_title; ?></div> -->
<h3><?php echo $heading_title; ?></h3>
<div class="box-content">
<div id="newsletter_message" class="content" style="display:none; background: #FFFFCC; border: 1px solid #FFCC33; padding: 10px; margin-top: 2px; margin-bottom: 15px;"></div>
<form action="<?php echo $action; ?>" method="post" id="module_newsletter" name="module_newsletter">
<div style="text-align: left;">
<span class="required">*</span><b><?php echo $entry_email; ?></b><br />
<input style="width:90%;" type="text" name="newsletter_email" required placeholder="<?php echo $entry_email; ?>"/><br />
<?php if ($name == 'optional') { ?>
<b><?php echo $entry_name; ?></b><br />
<input style="width:90%;" type="text" name="newsletter_name" placeholder="<?php echo $entry_name; ?>"/>
<?php } elseif ($name == 'required') { ?>
<span class="required">*</span><b><?php echo $entry_name; ?></b><br />
<input style="width:90%;" type="text" name="newsletter_name" placeholder="<?php echo $entry_name; ?>"/>
<?php } else { ?>
<input type="hidden" name="name" value="" />
<?php } ?>
<br />
<input name="subscribe" value="1" type="hidden" />
</div>
<table style="align:left;">
<tr>
<td style="width: 100%;">
<table>
<tr>
<td><input type="radio" style="vertical-align: middle;" id="subscribe" name="subscribe" value="1" checked="checked"/><label style="font-size:10px; vertical-align: middle;" for="subscribe"><?php echo $text_subscribe; ?></label></td>
</tr>
<tr>
<td><input type="radio" style="vertical-align: middle;" id="unsubscribe" name="subscribe" value="0" /><label style="font-size:10px; vertical-align: middle;" for="unsubscribe"><?php echo $text_unsubscribe; ?></label></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<div><a onclick="$('div#newsletter_message').load('index.php?route=module/newsletter/callback&subscribe=' + $('input[name=\'subscribe\']:checked').val() + '&email=' + escape($('input[name=\'newsletter_email\']').val()) + '&name=' + escape($('input[name=\'newsletter_name\']').val()), function() { $('div#newsletter_message').hide(); $('div#newsletter_message').show('slow'); });" class="buttons"><span style="float:left; clear:both;"><?php echo $button_go; ?></span></a></div>
</form>
</div>
</div>

Replace this...
$('input[name=\'subscribe\']:checked').val()
With this...
$('input[name=subscribe]:radio:checked').val()
You need the :radio selector as you also have a hidden form input with the same name. Bear in mind what this fact may do to your form for non-javascript users.

As requested, here is a more thorough answer. I can't help you fix all your code, as that is outside of the scope of Stack Overflow, however here is something to help you get started.
Basic working example: http://jsfiddle.net/jeb2x/
Let's say you have a form...
<form id="SubscribeForm">
<input type="radio" name="subscribe" value="1" checked="checked" />
<input type="radio" name="subscribe" value="0" />
Alert selected value
</form>
You can subscribe to the click event of the link with id alert and have it alert the selected radio button value. This Javascript code should be in a separate file to your html, and included in the head using a script tag.
<script type="text/javascript" src="/pathtofile/scripts.js"></script>
...
$(document).ready(function(){
$('#SubscribeForm').on('click', 'a#alert', function(){
var selectedValue = $('input[name=subscribe]:checked').val();
alert(selectedValue);
});
});
There are a few principles you need to learn about in order to understand the code here.
Firstly, it is subscribing to the ready event of the document. This ensures that the code only runs when the DOM has finished loading, and therefore, your form is definitely ready to be used. There is also a shorthand way of subscribing to document ready, which is to pass an anonymous function to jQuery, and it knows to run it on DOM ready
$(function(){
//...code here
});
It is then subscribing to the click event of the form. This code uses a principle called event delegation, which is worth reading up on. It's not really needed for this simple example, but is advantageous if you need to bind to multiple events within the same div for example. The code could in this case be simplified to...
$('a#alert').on('click', function(){
var selectedValue = $('input[name=subscribe]:checked').val();
alert(selectedValue);
});
...or even just $('a#alert').click(function(){
The code then uses my original solution (minus the :radio selector, which isn't needed as there is only one group of inputs with the name 'subscribe'), to alert the selected value.
In your case, you are trying to call an external script in order to subscribe or unsubscribe users. One way to do this is to use an AJAX request. You could use any of a number of methods to do this. You are using the load method above, which will send a request to the url supplied, and insert the response into the selected element.
$("#result").load( "test.html" );
In the example here, the response from test.html will be inserted into the element with id result. If you wanted to do something more complex with the response, you could use one of jQuery's AJAX methods, such as $.ajax() or $.get()
Hope this helps :)

Adding and removing dom sections with javascript

I want to be able to add new sections (via the 'add' link) and remove them (via the 'x' button) like seen in the image.
The HTML for the image:
<fieldset>
<legend>Legend</legend>
<div id="section0">
<input type="text" name="text1" value="Text1" />
<input type="text" name="text2" value="Text2" size='40' />
<input type="button" value="x" style="width: 26px" /><br />
</div>
add<br />
</fieldset>
I guess I could add new sections as needed (i.e. section1, section2) and delete those sections according to which button was pressed. There would be a javascript function that would inject sections in the DOM everytime the 'add' link was clicked and another for deleting a section everytime the 'x' button was clicked.
Since I have so little experience in HTML and Javascript I have no idea if this is a good/bad solution. So, my question is exactly that: Is this the right way to do it or is there a simpler/better one? Thanks.
P.S.: Feel free to answer with some sample code

Here's one way to do it:
<script type="text/javascript">
function newrow() {
document.getElementById("customTable").innerHTML += "<tr><td><input type='text'></td><td><input type='text'></td><td><button onclick='del(this)'>X</button></td></tr>";
}
function del(field) {
field.parentNode.parentNode.outerHTML = "";
}
</script>
<body onload="newrow()">
<fieldset>
<legend>Legend</legend>
<table>
<tbody id="customTable">
</tbody>
</table>
<button onclick="newrow()">Add</button>
</fieldset>
</body>
You could add IDs to them if you wanted, or you could call them by their position document.getElementsByTagName("input")[x].value The inputs would start at 0, so the left one is 0, right is 1, add row: left is 2, right is 3, etc.
If you delete one, the sequence isn't messed up (it re-evaluates each time), which is better than hard-coded IDs.

I just answered a nearly identical question only a few minutes ago here using jQuery: https://stackoverflow.com/a/10038635/816620 if you want to see how it worked there.
If you want plain javascript, that can be done like this.
HTML:
<div id="section0">
<input type="text" name="text1" value="Text1" />
<input type="text" name="text2" value="Text2" size='40' />
<input type="button" value="x" style="width: 26px" /><br />
</div>
add<br />
Javascript:
function addSection(where) {
var main = document.getElementById("section0");
var cntr = (main.datacntr || 0) + 1;
main.datacntr = cntr;
var clone = main.cloneNode(true);
clone.id = "section" + cntr;
where.parentNode.insertBefore(clone, where);
}​
Working demo: http://jsfiddle.net/jfriend00/TaNFz/

http://pastebin.com/QBMEJ2pq is a slightly longer but robust answer.

Form submit problem using JavaScript in Internet Explorer 6

I have just done the code for submit the form using JavaScript.
It works in all browsers except in Internet Explorer 6.
I have pasted my HTML form and JavaScript code below.
Can you please find what's the problem with it?
JavaScript:
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
}
</script>
HTML Code:
<form name="del_form" id="del_form" method="post">
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
Function Call Code:::
<p class="video">
<a href="javascript:void(0)" onclick="dodelete('<?php echo $row['image_id']?>')">
<img src="<?php echo $cfg->admin_image_path; ?>/delete_icon1.gif" border="0" alt="Delete"/>
</a>
</p>

What is returned by:
document.getElementById('image_id')
It returns one INPUT element of collection of elements?
Try to replace:
document.getElementById('image_id').value=image_id;
with:
document.del_form.image_id.value=image_id;

OnSubmit call for javascript would help.
<form name="del_form" id="del_form" onsubmit="dodelete(value);" >
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>

There are two things I'd like to try, I'm not sure why or when this doesn't work it seems random, first try to set a timeout for the submit :
document.doSubmit = function() {
document.del_form.submit();
}
setTimeout("document.doSubmit();", 100);
Sometimes, just return something after the click works :
<input type="hidden" name="image_id" id="image_id" onclick="submitFormFunction(); return false;” />

What happens if you replace:
document.del_form.submit();
with:
document.getElementById('del_form').submit()

Try to move method='POST' to the beginning of form element definition.
I mean -- method attribute should be the first attribute of form element.
If I remember well, this fixed some problems with submitting forms on IE6.

I have edited your code a little bit.
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
return false;
}
</script>
and the HTML with some test Image ID and it works in IE6
<form name="del_form" id="del_form" method="post" onSubmit="return(dodelete('2'));">
<input name="do" id="do" value="delete" />
<input name="image_id" id="image_id" />
<input type="submit" value="Submit">
</form>

Let's try again :).
What happen after replacing:
onclick="dodelete('<?php echo $row['image_id']?>')">
with:
onclick="dodelete('<?php echo $row['image_id']?>'); return false;">
What exactly doesn't work with your code? Throw JS error, there is no server request, values in request are empty?
And (maybe the most important question) -- where is action attribute for your del_form form?

replace
<a href="javascript:void(0)"
with
<a href="#"
IE have problem with that for the dom that fires the JS submit.