Develop Reference

How do I retrieve textblock value with onclick handler and show it using alert function in jQuery?

code:
<a class='link' href='javascript:void(0)' id='".str_replace(" ",'-',$sub_head)."'>
<i class='fa fa-angle-double-right'></i> ".$sub_head."
</a>
<input type='text' name='tag' class='tag' value='' />
<script>
$(document).ready(function(){
$(".link").bind("click", function() {
link = $(this).attr( 'id' );
tag = $(".tag").val(link);
alert(tag);
});
});
</script>
In this code I have create a link where class has to be define as link and inside id having dynamic value. Now what I want when I click on link then id of tag go to input field i.e tag. Now what happen When I click on link it show me [object Object] in alert box but I want value. So, How can I do this?Please help me.
Thank You

Because $(".tag").val(link) set value for $(".tag") and it return object you should use .val() to get value of $(".tag") or you can alert value directly with alert(link); it return same value as $(".tag").val()
$(document).ready(function() {
$(".link").bind("click", function() {
var link = $(this).attr('id');
$(".tag").val(link);
val = $(".tag").val();
alert(val);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='link' href='javascript:void(0)' id='5678'>
<i class='fa fa-angle-double-right'></i> Click
</a>
<input type='text' name='tag' class='tag' value='' />

You can use this code, it's working fine for your requirements.
$(document).ready(function(){
$(".link").on("click", function() {
var link = $(this).attr( 'id' );
var tag = $(".tag").val(link);
alert($(".tag").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='link' href='javascript:void(0)' id='id_1'>
<i class='fa fa-angle-double-right'></i> Sub Heading
</a>
<input type='text' name='tag' class='tag' value='' />

This line makes the input tag get a new value, but also returns just the input element:
tag = $(".tag").val(link);
Then the next line is actually alerting the entire input element object:
alert(tag);
To only alert the value of the input element, write:
tag = $(".tag")
tag.val(link);
alert(tag.val());
You can see the difference between val(arg) and val() in jquery's documentation at http://api.jquery.com/val/.

Using jQuery on an element created with jQuery

I am having a problem figuring out the correct way to do the following: Add a new form to my div when a button, 'add_skill', is clicked, disable the button to add a new form to my div,. Then when the person clicks the new button within the new form, 'button123', the form would submit the data through AJAX, and then remove the form, and re-enable the button, 'add_skill' so that another form could be added.
So far, I've been able to add the form to the bottom of the div. But when I click the 'button123' button in the new form, jQuery doesn't seem to recognize it, and no jQuery actions are done.
Am I even going about this the right way? I'm essentially trying to make something so you can keep adding new data to a bottom of a div, one after another, by clicking a '+' button. Think of adding items to a resume, one after another. That's is what I have in mind.
Here's my JS.
//dynamic add new skill form
var i = 0;
$(".add_skill").click(function(){
//inputs for Skill and Percentage
var skill = "<div class='new_skill_input' id='num" + i + "'> \
<label class='control-label'>Skill:</label> \
<input type='text' placeholder='SFML' class='ctrl-textbox'> \
<input type='hidden' class='hiddenObligatoire' value='false'> \
</div> \
<div class='new_skill_input'> \
<label class='control-label'>Percentage:</label> \
<input type='text' placeholder='85' class='ctrl-textbox'> \
<input type='hidden' class='hiddenObligatoire' value='false'> \
</div>\
<div class='new_skill_input'>\
<input class='button123' type='submit' value='Add'>\
</div>";
$(skill).appendTo(".skills"); //add form items to end of div
i++; //increment for identity
$(".add_skill").prop("disabled", true); //disable (add form), only 1 at a time
});
$(function() {
$("button123").click( function()
{
$(".add_skill").prop("disabled", false); //re-enable (add form)
}
);
});
And here is my HTML:
<div class="timeline-panel skills">
<h1>Skills</h1>
<div class="hr-left"></div>
<!--Add new skill start-->
<div class="new_skill">
<input class="btn add_skill" style="font-family:Helvetica" style="float:left;" type="submit" value="+">
</div>
<!--add new skill end-->
</div>
Any tips would be greatly appreciated. Thank you in advance.

This is a great use-case for event delegation:
Change:
$("button123").click(<handler>)
...to:
$(document).on('click', '.button123', <handler>);
Also, note that the selector should be .button123 with the '.' in front.

extending #jmar777's answer instead of $(document).on('click', '.button123', <handler>); one can use $(parent).on('click', '.button123', <handler>); where parent is button123's parent element which is present in DOM, as event doesn't need to bubble till document. event bubbling explained here

Possible to pass a value from HTML to javascript?

I have searched SO but i didnt really understand the answers related to this question and they were all related to JSP so im not sure if it applies to my usage.
I have a list of comments on a page and when a user click on "reply" the javascript code is executed, but the javascript function which is running needs to know which comment it is going to be working on in order to insert the reply form in the correct div. I have information about which comment im working on in the html code but i need to be able to access this information also in the external JS file.
Is there a way to send this information from html to javascript ?

[updated]
You can use data attribute of Jquery
See an example:
http://jsfiddle.net/9AJUJ/2/
html
<div id="div1"></div>
<button class="mydiv" data-info="1" >button 1</button>
<div id="div2"></div>
<button class="mydiv" data-info="2" >button 2</button>
js
//when document is load
$(function(){
$(".mydiv").click(function(){
$("#div" + $(this).data('info')).append('hello');
});
})

Asume this is your HTML code :
<article>
<header>
Posted by XYZ
</header>
<p>
This is a comment...
</p>
<footer>
<button type="button">
Reply
</buttuon>
</footer>
</article>
Here the JQuery code :
$(function() {
$('article>footer>button[type="button"]').click(function(){
$(this).parent().parent().append(/** HERE IS WHAT YOU APPEND **/);
});
});

Does each reply button have an ID that matches the comment ID? That would allow you to know which button was pressed (this.id or this.name) and would correspond to the related comments field.
your input would be
<input type="text" id="comments1">
and your button would be
<button type="button" id="button1">Click Me!</button>
in your button js you can do something like
var buttonID = this.id;
var commentID = 'comments' + buttonID.substring(6);
var commentObj = document.getElementById(commentID);

You need to edit the markup of the reply buttons.
<button class="reply-button" data-commentid="42">Reply</button>
<!-- ^ Add this attribute -->
In your event listener:
var commentId = this.dataset.commentid;

What I have done (so I don't know if it is the right way to do this), is I have create my html code by a php class and give and and id to each div like "div number" + "answers".
So my page htmml looks like:
<div id="0answers">
<h1 id="0title"> </h1>
<p id="0p"> </p>
</div>
<div id="1answers">
<h1 id="1title"> </h1>
<p id="1p"> </p>
</div>
<div id="2answers">
<h1 id="2title"> </h1>
<p id="2p"> </p>
</div>
And so have all the information you need for exemple modify the title n° 5 when someone click on the div n°3.
Is that that need?

So...
var i = 0;
var button = document.getElementById(i + 'button');
while(button){
var p = document.getElementById(i + 'p');
// and do what you want
++i;
var button = document.getElementById(i + 'button');
}

How to replace html button with plain text

How do you replace a button with whatever words were on the button before? I was looking at an answer to another similar question, which said to use something like:
var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);
but that had made what other buttons do change. Does anyone know another way to change a button to regular text?
I know that that code works just by itself, but it doesn't work with my code for some reason, so I don't really care what's wrong with that code. I'm just wondering if anyone knows another way to do it.
Thanks

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">
<input type="button" value="Change into Text" id="submit" onClick="change()"> <!--button input that will trigger an event named change-->
</div>
</body>
</html>
<script type="text/javascript">
function change(){ //function to run when you click on the button...
var buttonValue = document.getElementById("submit").value; //stores the button value
document.getElementById("myDiv").innerHTML = buttonValue; // displays the value as a plain text inside "myDiv" - removing the button input entirely
}
</script>
EDIT:
I've just noticed you had multiple buttons in your page, which will make my previous example wrong. heres something that will make you work easier i think in case you will add extra buttons:
first heres the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li id="id_1"><input type="button" value="Change into Text" onClick="change(1)" id="button_1"></li>
<li id="id_2"><input type="button" value="Change into Text" onClick="change(2)" id="button_2"></li>
<li id="id_3"><input type="button" value="Change into Text" onClick="change(3)" id="button_3"></li>
</ul>
</body>
</html>
<script type="text/javascript">
var id;
function change(id){
var buttonValue = document.getElementById("button_"+id).value;
document.getElementById("id_"+id).innerHTML = buttonValue;
}
</script>
In the HTML part, you can create a list (li) of buttons if that's your layout...
each list will have its own id, in this case id_x that will be used later when you replace its content. each button calls a function change(id) while id is just a unique number for each button.
In the JS part, the change(id) gets the id of the button that was clicked, takes its value, and replaces the innerHTML (content) of the relative list items with a plain text.
Let me know if you still need any other help.

Seems that you are looking for another way to replace the buttons with plain text, well I'll show you the jQuery way.
HTML
<div>
<button id="btn1" class="change-button">A button with some text 1</button>
<button id="btn2" class="change-button">A button with some text 2</button>
<button id="btn3" class="change-button">A button with some text 3</button>
</div>
jQuery
// When we click a button with a "change-button" class
$(".change-button").on("click", function(event){
// First we get the ID value of the clicked button
// example: "btn2"
var buttonId = $(this).attr('id');
// Then we get the html value of the clicked button
// example: "A button with some text 2"
var buttonText = $(this).html();
// We use the function replaceWith, to replace the button to a <span>
// with the buttonText variable we have
$('#' + buttonId).replaceWith("<span>" + buttonText + "</span>");
});
As you can see, it's a lot more cleaner with jQuery. You should try it!
Here is the fiddle so you can test it.

<html>
<script>
function fun()
{
var a = document.getElementById("hello").value;
document.getElementById("ad").innerHTML = a;
}
</script>
<body>
<div id="ad">
<input type="button" value="hello" id="hello" onClick="fun()">
</div>
</body>
</html>
sorry, edited the wrong post

Pass Info to form input when link is clicked

I have some html that looks as so:
<h3 class="basic left-top-border-radius">Basic<br /> 500<span>$25</span></h3>
<a class="signup colorbox" href="#text-signup-form">More Info</a>
When More Info is clicked a lightbox pops up with a simple info request form. Here is my problem. I would like when the link is clicked to have the text of the h3 header passed to a form input field that is hidden so I know which plan they clicked on for more info.
The input looks like so:
<input type="text" class="cat_textbox" id="CAT_Custom_440761" name="CAT_Custom_440761" maxlength="1024" />
How would I do this using jQuery? (I thought of using jQuery .text() method but I read that does not work with forms and I do not know how to pass the h3 text anyway.
NOTE There are multiple h3 elements on the page.

You can do the following with this code.
$('.signup').click(function(){
var planTitle = $('h3').text();
$('#CAT_Custom_440761').val(planTitle);
});
As you click on the button it will search for the h3 tag (would be better to attach an ID to the h3 tags) grab the text of that element and insert it into the value of the input field.
If you aren't able to attach an ID to the h3 tag you can search for the prev instance of h3 and take the text from that.
$('.signup').click(function(){
var planTitle = $(this).prev('h3').text();
$('#CAT_Custom_440761').val(planTitle);
});

You can try this:
$('a').click( function() {
var text = $(this).parent().find('h3').text();
$(this).parent().find('.cat_textbox').val(text);
})

perhaps you can use this code
<form action="test1.asp" id="testform">
<input type="hidden" id="test3" value="">
<input type="BUTTON" id="submit" onclick="modify_value()"/>
</form>
<script type="text/javascript">
function modify_value()
{
var hidden_field = document.getElementById('test3');
hidden_field.value = 'testvalue';
document.getElementById("testform").submit();
}
</script>