Develop Reference

Same AJAX call for multiple button on clicks on the same page [duplicate]

I have multiple buttons containing different values.
My buttons :-
<button id="1" name="1" value="1">Button1</button>
<button id="2" name="2" value="2">Button2</button>
Now, if I click on Button1, I should get it's value. That is 1, and if I click Button2, I should get value 2.
I have written this code :-
<script type="text/javascript">
$("button").click(function() {
var fired_button = $("button").val();
alert(fired_button);
});
</script>
But it always alerts 1. What must I do to fix my code?

UPDATED
Use this instead of button in :
var fired_button = $("button").val();
You have to use this to target the current button clicked instead of button that will select all buttons in the DOM, .val() makes it to get the value of the first button.
$("button").click(function() {
var fired_button = $(this).val();
alert(fired_button);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" name="1" value="1">Button1</button>
<button id="2" name="2" value="2">Button2</button>

You need to use this variable in order to access the clicked button's value.
<script type="text/javascript">
$("button").click(function() {
var fired_button = $(this).val();
alert(fired_button);
});
</script>
This would return the value of the button.

You could try something as simple as:
$(this).val();
$(function(){
$("button").click(function() {
var fired_button = $(this).val();
alert(fired_button);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="1" name="1" value="1">Button1</button>
<button id="2" name="2" value="2">Button2</button>
Note: you should add your event listeners after the document is ready. This is why, I have enclosed the event handler in the
$(function{})
This is a shorthand of
$(document).ready(function(){})
For more information about this, please have a look here.

Use this inside the click handler
<script type="text/javascript">
$("button").click(function() {
var fired_button = $(this).val();
alert(fired_button);
});
</script>

this will give you the element that was clicked, $(this) to get a jquery version.
Update your code to:
$("button").click(function() {
var fired_button = $(this).val();
alert(fired_button);
});

Try with $(this).val();. It will return clicked button value.

If you're using jQuery, you're looking for the .attr() function.
$(this).attr("value")
That code will give you the value attribute of the html element designed by $(this) (or you precise the ID of the element).

Try $(this).val().
'this' always refers to the current object.

this will give you the element that was clicked, $(this) to get a jquery version.
Update your code to:
$("button").click(function() {
var fired_button = $(this).val();
alert(fired_button);
});

Plain JavaScript solution with ES6 syntax:
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', () => {
const fired_button = button.value;
alert(fired_button);
});
});

How to make new text lines in div stay on top?

I am stumped of how to make a new line appear on top of the div element, i.e. whenever the button is clicked, the new textline is on top and the previous goes below. Right now, the new textline is underneath the first one when I press another button and not above. So my question is: How do you make the new text lines stay on top and not underneath?
JavaScript:
var LineText=""
$(document).ready(function() {
$("#btnSubmit").click(function(){
$('.stashText').html(LineText+="<br><br>Line_No_1");
});
});
$(document).ready(function() {
$("#btn2Submit").click(function(){
$('.stashText').html(LineText+="<br><br>Line_No_2");
});
});
HTML:
<button type=button id="btnSubmit">S
</button>
<button type=button id="btn2Submit">S2
</button>
<br>
<br>
<div class="stashText">
</div>
JSFiddle

You can just use jquerys "prepend" function, look here:
$(document).ready(function() {
$("#btnSubmit").click(function(){
$('.stashText').prepend("<br><br>Line_No_1");
});
});
$(document).ready(function() {
$("#btn2Submit").click(function(){
$('.stashText').prepend("<br><br>Line_No_2");
});
});
https://jsfiddle.net/r09dsp1d/14/

Use prepend instead.
var LineText=""
$(document).ready(function() { $("#btnSubmit").click(function(){
$('.stashText').prepend("<br><br>Line_No_1"); }); });
$(document).ready(function() { $("#btn2Submit").click(function(){
$('.stashText').prepend("<br><br>Line_No_2"); }); });
JSFiddle: https://jsfiddle.net/r09dsp1d/15/

Change LineText+="<br><br>Line_No_1" to "<br><br>Line_No_1" + LineText:
var LineText = "";
$(document).ready(function() {
$("#btnSubmit").click(function() {
LineText = "<br><br>Line_No_1" + LineText;
$('.stashText').html(LineText);
});
$("#btn2Submit").click(function() {
LineText = "<br><br>Line_No_2" + LineText;
$('.stashText').html(LineText);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type=button id="btnSubmit">S</button>
<button type=button id="btn2Submit">S2</button>
<br>
<br>
<div class="stashText"></div>
Also, there's no need to call $(document).ready() twice.

Just use .prepend instead of .html
Here is your updated jsfiddle
https://jsfiddle.net/qcma197k/
$(document).ready(function() {
$("#btnSubmit").click(function() {
$('.stashText').prepend("<br><br>Line_No_1");
});
$("#btn2Submit").click(function() {
$('.stashText').prepend("<br><br>Line_No_2");
});
});

load html template on click jquery

have main html template and sub html template.
<button id="btn">Click Me...</button>
Main HTML:
<div id="main">
<label>Main</label>
</div>
Sub HTML:
<label>sub</label>
JQuery:
$(document).on("click", "#btn", function(e) {
e.preventDefault();
$("#main").load("main.html");
});
Scenario trying to achieve is I have a common button in all the pages. In default page i.e. Main.html I will show its label. once on click of the button I want to replace the label of main.html with sub.html, Again on click of the button I need to toggle it with the default label.
Can anyone help me out how to achieve this.

i think this Fiddle is what the OP wants to achieve
loading the html files alternatively :
var loadMain = true;
var loadSub = false;
$(document).on("click", "#btn", function(e) {
e.preventDefault();
if(loadMain){
$("#main").load("main.html");
alert("HERE");
loadSub = true;
loadMain = false;
}else{
$("#main").load("sub.html");
alert("THERE");
loadMain = true;
loadSub = false;
}
});

You can change label text with jquery:
Try this:
$(document).on("click", "#btn", function(e) {
$("#main").load("main.html");
if ($("#expanderSign").text() == "Main"){
$("#expanderSign").html("sub")
}
else {
$("#expanderSign").text("Main")
}
});
http://jsfiddle.net/wcd7N/

Here's a fiddle with your code:
$(document).on("click", "#btn", function (e) {
e.preventDefault();
$("#main").load("/echo/html/", {html: "<label>sub</label>"});
});
http://jsfiddle.net/cnnhg/2/
The only difference with yours is you don't need that data argument, you use a file. Something else is wrong, like adding the onclick before the button is ready.

Add multiple values in input field with jQuery

I want to add multiple input values in an input field with jQuery. So that everytime I hit the button, a new value is added in the same field along with the old value.
I am trying following code, but it does not add the value, it simply overwrites the previous value.
HTML:
<div class="wrap">
<button>Add value</button>
<input name="myinput[]" value="" />
</div>
jQuery:
$("button").click(function(e) {
e.preventDefault();
$(this).parent().find('input[name=myinput\\[\\]]').val("value+");
});
Demo:
http://jsfiddle.net/D97bV/

You add strings together with +
$("button").on('click', function(e) {
e.preventDefault();
var elem = $(this).parent().find('input[name=myinput\\[\\]]');
elem.val( elem.val() + 'add this' );
});
FIDDLE
Now you only need something useful to add ?

Try:
$("button").click(function(e) {
e.preventDefault();
var val = $(this).parent().find('input[name=myinput\\[\\]]').val();
$(this).parent().find('input[name=myinput\\[\\]]').val(val+"value+");
});
DEMO FIDDLE

try this:
$("button").click(function(e) {
e.preventDefault();
var myInput = $(this).parent().find('input[name=myinput\\[\\]]');
myInput.val(myInput.val() + "value+");
});

How to replace a button on click using jquery

I have a button currently available with an id :
<input type="button" id="show_button" value="Show" />
What I want is that..onclicking the button , the value of the button will be changed to "Hide" and it's id will be changed to "hide_button".. And on clicking the hide button it's value will be changed to "Show" and it's id will change to "show_button"..How can I achieve that?

i don't know why you want to change the id since we can get what you want without changing the ids..
try this
$('#show_button').click(function(){
var $this=$(this);
$this.val(($this.val()=="Show")?"Hide":"Show");
});
this is better since you don't have to use two click event handler for both the ids..
and if incase you need to change the ids.. then use on event delegation ..
$(document).on('click','#show_button',function(){
var $this=$(this);
$this.prop('id','hide_button');
$this.val("Hide"); //OR $this.val("Hide") //if you are using input type="button"
});
$(document).on('click','#hide_button',function(){
var $this=$(this);
$this.prop('id','show_button');
$this.val("Show"); //OR $this.val("Hide") //if you are using input type="button"
});
fiddle here

You can change value using
$('#show_button').val('hide');
You can change id using
$('#show_button').attr('id','hide_button');

$('body').on('click', '#show_button, #hide_button', function() {
var $this = $(this),
isShow = $this.attr('id') == 'show_button';
if (isShow) {
$this.attr('id', 'hide_button').val('Hide');
}
else {
$this.attr('id', 'show_button').val('Show');
}
});
jsFiddle: http://jsfiddle.net/sW49u/

Working example: http://jsfiddle.net/TjaBR/
$('body').on('click', '#process', function() {
$(this).toggleClass('hidden');
$(this).val($(this).hasClass('hidden') ? 'Hide' : 'Show');
});

Using Jquery Javascript library:
$('body').on('click', '#show_button', function() {
$(this).attr('id', 'hide_button').val('Hide');
});
$('body').on('click', '#hide_button', function() {
$(this).attr('id', 'show_button').val('Show');
});

One solution for your question is have 2 inputs, that you toggle between. I don't like changing/renaming id's principle.
Check this demo.
html
<input type="button" id="show_button" value="Show" />
<input type="button" id="hide_button" value="Hide" style="display:none;" />
jQuery
$('input').click(
function(){
$('input').toggle();
});