We Keep Coding

Javascript function only works on the first call

I'm developing a Question&Answer website in php and I want to print the answer comments when I press the button. Everything works like a charm but only on the first button. I have an idea why this does't work, I guess it only takes into account the first id that it finds.
So , my question is, is there any way to name the element I want to call based on its id? For example:
<button class="btn icon-chat" title="Add a comment on this answer"
type="button" id="showarea . {answer['answerid']"} name="showarea" value="Show Textarea">
Comment</button>
<div id="textarea">
{include file="comment_form.tpl"}
</div>
But how would I call this PHP variable on my JS function?
$("#textarea, #textarea-ok").hide(); // or you can have hidden w/ CSS
$("#showarea").click(function(){
$("#textarea").show();
});
$("#textarea-ok, #cancel").click(function(){
$("#textarea").hide();
});
Is this the best approach? Any advise regarding to the JS code you can give?
Kind Regards

Live method should be ok
$("body").on("click", ".myClass", function(){
// do it again // or #myId
});
Don't forget about an event with an Id selector can be only on one element, and class on every one...
Edit with example
<div class="post-button clearfix">
// i changed this button as well
<button class="btn icon-chat show-textarea" title="Add a comment on this answer" type="button" data-answer="{$answer['publicationid']}">Comment</button>
<div class="textarea">
{include file="comment_form.tpl"}
</div>
</div>
// comment_form.tpl
// i added a master container
<div class="comment-form">
<form method="post" action="{$BASE_URL}controller/actions/comments/create_comment.php">
<textarea name="comment" rows="4" cols="40" class="qa-form-tall-text"></textarea>
// i deleted the wrong input here
<input type="hidden" name="answerid" value="{$answer['answerid']}" />
<input type="hidden" name="questionid" value="{$question['publicationid']}" />
// i changed these 2 buttons as well
<button type="button" class="textarea-cancel qa-form-tall-button qa-form-tall-button-comment">Cancel</button>
<button type="submit" class="textarea-ok">Ok</button>
</form>
</div>
Then you change the script with class in selector like :
...
$('.comment-form').hide();
$("body").on("click", ".show-textarea", function(){
$('.comment-form').show();
});
$("body").on("click", ".textarea-ok, .textarea-cancel", function(){
$('.comment-form').hide();
});
....
More about Jquery Selector : https://www.w3schools.com/jquery/jquery_ref_selectors.asp
More about live method wit .on() :
https://www.w3schools.com/jquery/event_on.asp
More about Html forms
https://www.w3schools.com/html/html_forms.asp
Read these docs to be ok with yourself ;)

Switch to different button on click

I want code to switch the buttons. If I pressed button1 first time, it must show button2 and vice versa.
<input type="submit" value="asc" name="button1" id="but1">
<input type="submit" value="desc" name="button2" id="but3">

One solution without the need for JQuery would be this one:
<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.display='';this.style.display='none';">
<input type="button" value="desc" name="button2" id="but3" style="display:none;" onClick="document.getElementById('but1').style.display='';this.style.display='none';">
You can also do it this way if you want to use the visibility:
<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.visibility='visible';this.style.visibility='hidden';">
<input type="button" value="desc" name="button2" id="but3" style="visibility:hidden;" onClick="document.getElementById('but1').style.visibility='visible';this.style.visibility='hidden';">
Using visibility preserves the buttons position. I changed the type from submit to button just out of demonstration reasons.
You can look at both JSFIDDLE demos of these solutions here and here.

Not sure what you're trying to achieve, but you can use:
$('input[type="submit"]').click(function() {
$(this).hide().siblings('input[type="submit"]').show();
});
Fiddle Demo

Simply Use .toggle() in jQuery
$('input[type="submit"]').click(function() {
$('input[type="submit"]').toggle();
});
Fiddle

I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch
$(this).find('.radio-switch-slider')

document.getElementById('but1').addEventListener('click', function() {
document.getElementById('but1').style.visibility = 'hidden';
document.getElementById('but3').style.visibility = 'visible'; }, false);
document.getElementById('but3').addEventListener('click', function() {
document.getElementById('but3').style.visibility = 'hidden';
document.getElementById('but1').style.visibility = 'visible'; }, false);
If you want to hide button and its placeholder completely, use style.display = 'none' and style.display = 'block'. If you put both buttons in div container with default static positioning, then both buttons will appear at the same position in container.

By default when page will load put following code so that your second button will be hide.
$(document).ready(function(e){
$('#but3').hide();
});
After that Put code that were
$('input[type="submit"]').click(function() {
$(this).hide().siblings('input[type="submit"]').show();
});

Try using the following functions:
$(element)click(callback) will handle the click of the element
$(element).show() will show the element
$(element).hide() will hide the element
so a semple code is:
//first hidden the second button
$('#but3').css('display','none')
// handle click of first button
$('#but1').click(function(){
$(this).hide()
$('#but3').show()
});
// handle click of second button
$('#but3').click(function(){
$(this).hide()
$('#but1').show()
});
Here is an example: http://jsfiddle.net/L7zux/1/

You can try the code below:
$('input[type="submit"]').click(function(){
var valueOfButton = $(this).val();
if(valueOfButton == 'asc')
{
$('input[value="asc"]').show();
$('input[value="desc"]').hide();
}
else
{
$('input[value="desc"]').show();
$('input[value="asc"]').hide();
}
});

jQuery Popup submit not responding

I have created a popup which allows users to edit a value then they can submit it again
Html:
<body>
<input id="submit" type="submit" value="Submit" data-theme="b" data-icon="check" data-rel="popup"/>
<div id="success" data-role="popup">
</div>
<div id="fail" data-role="popup">
<p>Fail</p>
</div>
</body>
jQuery:
$('#submit').click(function(){
var doStuff = true;
if(doStuff === true){
$("#success").empty();
$("#success").append('<p> <input type="text" value="' + doStuff + '" /> <input type="submit" id="popupConfirm" value="Submit" /> </p>');
$("#success").popup("open");
}else{
$("#fail").popup("open");
}
});
$('#popupConfirm').click(function(){
console.log("jhasgd");
});
Currently the click is not working at all that's why I have gibberish in the console.log and also I am not sure how to get the value of the entered input.
So my question is first how can I get the submit click to work and then output what they wrote?
fiddle of the code

$(document).on('click', '#popupConfirm', function(){
console.log("jhasgd");
});

Where are you adding the jQuery code at? If you are adding it all above the HTML, it might be trying to bind the #submit input before it exists in the DOM. Can you try to wrap the code in a document ready so it won't do the click binding before the DOM gets filled up.
$( document ).ready(function()
{
$('#submit').click(function(){
console.log("clicked the button");
});
});
Edit: I just saw the comment where you figured this out above. You didn't really have a code solution provided, so I will just leave this as is.

Twitter bootstrap managing multiple radio buttons through Javascript in rails

I am using twitter bootstrap in my rails app, and I am constructing a form with multiple radio button inputs. In order to manage the form data, I have created a hidden field whose value is updated via Javascript.
Sample code below for any given input:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
<button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
</div>
<input type="hidden" id="ornamental_only" name="ornamental_only" value="">
Here is the Javascript to manage this event:
<script>
var btns = ['ornamental_only_yes', 'ornamental_only_no'];
var input = document.getElementById('ornamental_only');
for(var i = 0; i < btns.length; i++) {
document.getElementById(btns[i]).addEventListener('click', function() {
input.value = this.value;
});
}
</script>
My question: Is there a way to abstract the Javascript code in such a way as to apply to multiple radio button inputs simultaneously? (For instance, if I had 3 repetitions of the code block above with different id's)

Let's assume this is your HTML with multiple sets of buttons:
<div class="btn-group" id="btn_group_1" data-toggle="buttons-radio">
<button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
<button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_1" name="ornamental_only" value="">
<div class="btn-group" id="btn_group_2" data-toggle="buttons-radio">
<button type="button" class="btn" id="awesome_only_yes" name="awesome_only" value="yes">Yes</button>
<button type="button" class="btn" id="awesome_only_no" name="awesome_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_2" name="awesome_only" value="">
To dynamically listen for clicks on all button groups, you could do something like this (untested jQuery):
$('.btn-group .btn').on('click', function() {
var parentID = $(this).parent().attr('id');
$('#hidden_' + parentID.substr(parentID.length - 1)).val($(this).val());
});
This just targets the hidden input fields based on the number at the end of the id.

Try using this:
for(var i = 0; i <= btns.length; i++) {

Use jQuery.
var buttonObjs = $(".btn-group").find("button");
buttonObjs.click(function(){
$("#ornamental_only").val(this.value);
});
To apply this code to multiple blocks, all you need to do is assign a specific class to the btn-group element, something like,
<div class="btn-group js_radio_toggle">
In the js code just use,
var buttonObjs = $(".btn-group.js_radio_toggle").find("button");
now this code can be reused anywhere.
also in your js code. you can do this,
document.getElementsByClassName("js_radio_toggle").
But I would recommend you to use jQuery.

Return title of button being hovered on

I just want a bit of javascript to return the title of a button element that the user is hovering on. I don't want to use getElementById(...) because I am making a function that works without referring to an element but it's ID. Is this possible?
Many thanks :).

You can use this which refers to current element like this:
<input type="button" title="mytitle" onMouseOver='alert(this.title);'>
Working Example

Js
function showTitle(element){
alert( element.getAttribute('title') );
}
html
hover me
demo at http://jsfiddle.net/gaby/WKqMq/

Consider this HTML:
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />
<input type="button" value="Button 4" />
<input type="button" value="Button 5" />
<div id="txt"></div>
And your JavaScript that will work on any button present in the current page
$("input[type=button]").bind("hover", function() {
$("#txt").html($(this).val());
});
You may also consider looking at LIVE Example

You could also capture each button by using:
var buttons = document.getElementsByTagName("button");
for (var i=0; i < buttons.length; i++)
{
buttons[i].onmouseover = function()
{
alert(this.title);
}
}
Example: http://jsfiddle.net/2LP66/4/
This will alert the title of a button upon hovering off any button on the page.
The onmouseover function will only be run when you hover the button, but ofcourse you don't have to use an alert, you could also save the title in some more global scope and use this where you want to use the title