I have html like this:
<html>
<input type='button' name='button1' id='button1'>
<input type='button' name='button2' id='button2'>
</html>
What I want to do that when User click button2, it should remove button1 element and show a message on its place. It will look like this after button2 click event.
<html>
Button1 Removed
<input type='button' name='button2' id='button2'>
</html>
If you use jquery, you can do that:
$('#button2').click(function() {
$('#button1').replaceWith('Button1 Removed')
});
$(document).ready(function(){
$("#button1").click(function(){
$("#button1").replaceWith("<div>Hi der</div>");
});
});
If you were using jquery then this solution:
$('#button2').click(function(){
$('#button1').replaceWith('<p>Button1 Removed</p>');
});
$('#button1').click(function() {
$('this').remove().html('<p>Button 1 Removed</>')
alert('button1 removed');
});
$(document).ready(function(){
$("#button2").click(function(){
$("#button1").replaceWith("Button1 Removed");
});
});
Using jQuery with an embedded function that can also do other things.
$('#button2').click(function() { $('#button1').remove().html('<p>Button 1 Removed</>') });
Remember its good practice to always enclose text in some tags like etc
Related
I want to display the alert() after a new row is appended.
This is my code, but delegation is not working.
$(".tweet").each(function() {
alert("tweet alert");
});
$("button").click( function(){
$("#container").append("<div class='tweet'>tweet</div>");
});
$(document).delegate('click', function(){
$(this).addClass("tweet");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
Im using a basic jquery version 1.4
In my code, the alert doesnt display at all! what am doing wrong? thank you.
You can add the alert inside the click handler like so:
$("button").click(function() {
$("#container").append("<div class='tweet'>tweet</div>");
alert("tweet alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
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();
});
Ok, if i have jQuery like this:
$(document).ready(function(){
$('#btn1').click(function(){
//Add stuff to table
$('#items_table tr:last').after('<tr><td><input type="button" id="btn2" value="second button" /></td>/tr>');
});
//Created button above is triggered
$('#btn2').click(function(){
alert('btn 2 was clicked');
});
});
Nothing will happen when i click on the "btn2". I guess that's becaouse it's not there when $(document).ready() ? If i send that js for btn2 into the table row, it works fine. something like this:
$(document).ready(function(){
$('#btn1').click(function(){
//Add stuff to table
$('#items_table tr:last').after('<tr><td><input type="button" id="btn2" value="second button" /><script type="text/javascript ..... BLAH $(\'#btn\').click BLAH </script>;
});
});
Ideas?
Use on to let the table delegate the event to elements that may appear later :
$('#items_table').on('click', '#btn2', function(){
alert('btn 2 was clicked');
});
Attach an event handler to a parent element using .on(), and pass the selector as an argument. This works for dynamically added elements as well...
$('#items_table').on('click', '#btn2', function(){
alert('btn 2 was clicked');
});
I want to put the radio button value in the status div. The text of status div should change, according to the radio button selected by the user.
The code that I used bellow is not working. Please help. Thanks!
HTML code:
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<div id="status"></div>
</form>
JS code:
$(document).ready(function () {
RadioStatus="";
$("input[type='radio']:checked").each( function()
{
if ($(this).attr('checked');)
RadioStatus=$(this).val();
$("#status").text(RadioStatus);
});
$("input[type='radio']").change(function()
{
RadioStatus= $('input[type='radio']:checked').val()
$('#status').text(RadioStatus);
});
});
This should work:
$("input[type='radio']").click(function() {
$('#status').text($(this).val());
});
A few minor adjustments to your code got it to work just fine:
$(document).ready(function () {
RadioStatus="";
$("input[type='radio']:checked").each( function()
{
if ($(this).attr('checked'))
RadioStatus=$(this).val();
$("#status").text(RadioStatus);
});
$("input[type='radio']").change(function()
{
RadioStatus= $('input[type="radio"]:checked').val();
$('#status').text(RadioStatus);
});
});
see: http://jsfiddle.net/f6Tru/
..or you can really simplify it by using techfoobar's:
$(document).ready(function () {
$("input[type='radio']").click(function() {
$('#status').text($(this).val());
});
});
instead. see: http://jsfiddle.net/RrhYM/
You have a problem in your single quotes '
Change:
RadioStatus= $('input[type='radio']:checked').val()
To:
RadioStatus= $('input[type="radio"]:checked').val()
Try this code
$('input[name ^=sex]').click(function() {
$('#status').text($(this).val());
});
demo
$("input:radio").click(function() { //use $("input:radio[name='sex']").click if more radio buttons there
$('#status').text($(this).val());
});
Simply use change to determine that a radio button is selected. Then use html or text to append the value of chosen radio button to your <div id="status">.
$(document).ready(function () {
$('input[type=radio]').on("change", function() {
$('#status').html($(this).val());
// Alternative
// $('#status').text($(this).val());
});
});
DEMO
You may achieve that with the following JS code :
$("input").click(function(e){
var selectedValue = e.currentTarget.value;
$('#status').html(selectedValue );
});
I have a <input type="text"> and if user clicks inside it I want to make the content (value) of that box selected. How would I do that?
<input type="text" onclick="select()"/>
Try select method:
document.getElementById("myinput").onclick = function() {
this.select();
};
You can try following code inside a javaScript method, and call the method onClick event of the textbox...
function calledOnClick(){
document.getElementById('test').select();
}
You can try following jQuery code which automatically call on page load
<script>
$(document).ready(function(){
$('input').each(function(){
$(this).click(function() {
this.select();
});
});
$("#return_date").focus();
});
</script>