I have a right sidebar that slides out and shows content. The sidebar can be opened from multiple buttons (button1, button2, button3, etc.) The content needs to be different in the sidebar when certain buttons are clicked? What is the most efficient way to do this? I tried using .html() but it overrides the styles. For example, if the content triggered by button1 is "Test" and button2 shows "Test2", if I click button1 again, it'll show "Test2". Is there a way to efficiently maintain consistency of data across each click event?
Try this code:
$("input").click(function() {
var value = this.getAttribute('data-dynamicContent');
document.getElementById('dynamicContent').innerHTML = value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" data-dynamicContent="This is your content" value="button one">
<input type="button" data-dynamicContent="This is your content 2" value="button two">
<input type="button" data-dynamicContent="This is your content 3" value="button three">
<div id="dynamicContent"></div>
Here is one that isn't as clean but offers better browser support:
$('input').click(function() {
document.getElementById('dynamicContent').innerHTML = this.name;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="your content one" value="button one">
<input type="button" name="your content two" value="button two">
<input type="button" name="your content three" value="button three">
<div id="dynamicContent"></div>
Here is one that has more code but has the best browser support:
$('input').click(function() {
document.getElementById('dynamicContent').innerHTML = this.nextElementSibling.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="button" value="button one">
<input type="hidden" value="your content one">
</div>
<div>
<input type="button" value="button two">
<input type="hidden" value="your content two">
</div>
<div>
<input type="button" value="button two">
<input type="hidden" value="your content three">
</div>
<div id="dynamicContent"></div>
see this example: http://jsfiddle.net/kevalbhatt18/2mmvjf9c/
$('button').click(function(){
console.log($(this)[0].innerText)
if($(this)[0].innerText === "button 1"){
$('span').html('test 1')
} else if($(this)[0].innerText === "button 2"){
$('span').html('test 2')
}else{
$('span').html('test 3')
}
})
Related
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I need specific jquery or js function to display onclick:
<div id="resultTab">
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
</div>
It can be repeated 50-100 times.
So when I click button it has to show only <div> which is written after that <button> not all <div>s
Note: all button and div's created by jquery so I can't give specific id to use in function.
Please help me to solve this problem. I'm totally stack, if its possible I want to display that <div> in the middle of page like popup window.
UPDATE: The function is working, but in this situation its not working, what can I do?
Don't use the same ID everywhere, ID need to be uniqe. I changed your ID's to Class
$('input.help_button').click(function () {
$(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
$("button").on("click", function() {
$(this).next().show();
});
if you use toggle(), you can hide and show the div
$('input.help_button').click(function () {
$(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
You should not have the same ids attached to multiple elements. You can use next() to select he next element after the button and slideToggle() to show/hide the div:
$('input[type="button"]').on('click', function(){
$(this).next('.help').slideToggle();
});
.help{
display: none;
}
input[type='button']{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultTab">
<input id="help_button_1" type="button" value="Full Info">
<div id="help_1" class="help">Table with data</div>
<input id="help_button_2" type="button" value="Full Info">
<div id="help_2" class="help">Table with data</div>
<input id="help_button_3" type="button" value="Full Info">
<div id="help_3" class="help">Table with data</div>
</div>
I am having trouble detecting a button click using Node.js, Bootstrap and Jade.
I have the following Jade code but I am not seeing the log from the onclick method and there is no change to the button. So the method never gets called.
extends layout
block content
.jumbotron
.container
h1= title
p Enter the url of the file to be sent
form#formInputURL(name="chooser",method="post",action="/chooser",)
input#inputURL(type="text", placeholder="insert url", name="chooseurl")
button#btnSubmit(type="submit") submit
p
.btn-group(data-toggle='buttons')
label.btn.btn-primary.active
input#option1(type='checkbox', autocomplete='off', checked='')
| Radio 1 (preselected)
|
label.btn.btn-primary
input#option2(type='checkbox', autocomplete='off')
| Radio 2
|
label.btn.btn-primary
input#option3(type='checkbox', autocomplete='off')
| Radio 3
script.
$('#option2').on('click', function () {
console.log("clicked")
$(this).button('toggle')
})
your code is working fine,
make sure you're clicking on the right element (checkbox).
have a look at this example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">
<div class="container">
<h1></h1>
<p>Enter the url of the file to be sent</p>
<form id="formInputURL" name="chooser" method="post" action="/chooser">
<input id="inputURL" type="text" placeholder="insert url" name="chooseurl" />
<button id="btnSubmit" type="submit">submit</button>
<p></p>
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-primary active">
<input id="option1" type="checkbox" autocomplete="off" checked="" /> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input id="option2" type="checkbox" autocomplete="off" /> Radio 2
</label>
<label class="btn btn-primary">
<input id="option3" type="checkbox" autocomplete="off" /> Radio 3
</label>
</div>
</form>
</div>
</div>
<script>
$('#option2').on('click', function() {
alert("clicked")
})
</script>
I want to show and hide some div on click and I managed to achieve part of it (it shows divs and hide them when I click on corresponding buttons).
However, I don't know how to close all the already opened divs when I click on other buttons.
For example if I click on "add" button and it opens the corresponding div, and when I click on "edit" I want to open "edit" div and close "add" div.
My relevant HTML
<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit" id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
My JS:
$(document).ready(function(){
$("#add").click(function(){
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$("#test3").slideToggle("fast");
});
});
Thanks for suggestions and tips.
i guess this is the simplest thing you can do.. hope this helps you..
<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit" id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
http://jsfiddle.net/alaskaz1864/VtLzB/1/
replace your jquery code with the following code
$(document).ready(function()
{
$("#add").click(function(){
$("#test1").show();
$("#test2,#test3").hide();
});
$("#edit").click(function(){
$("#test2").slideToggle("fast");
$("#test1,#test3").hide();
});
$("#view").click(function(){
$("#test3").slideToggle("fast");
$("#test1, #test2").hide();
});
});
You need to add a common class to those elements, to close them all before opening the required one. You can also put data attributes on the buttons to DRY up your code. Try this:
<div id="controls">
<input type="button" class="addBtn" data-rel="#test1" value="Add" id="add" />
<input type="button" class="editBtn" data-rel="#test2" value="Edit" id="edit" />
<input type="button" class="viewBtn" data-rel="#test3" value="View" id="view" />
<input type="button" class="deleteBtn" value="Delete" id="delete" />
</div>
<div id="test1" class="content">test 1</div>
<div id="test2" class="content">test 2</div>
<div id="test3" class="content">test 3</div>
$('#controls input').click(function() {
$('.content').slideUp('fast');
$($(this).data('rel')).slideDown('fast');
});
Example fiddle
Try to use attribute starts with selector to grab the similar elements, hide it after grabbing it then after that do your normal process,
$("#add").click(function(){
$('div[id^=test]').hide();
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$('div[id^=test]').hide();
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$('div[id^=test]').hide();
$("#test3").slideToggle("fast");
});
DEMO
Even simpler,
$('[type=button]:not(#delete)').click(function(){
$('div[id^=test]').hide().eq($(this).index()).slideToggle("fast");
});
Special Note:
This code does not expect us to change the DOM structure by adding/hardcoding data-attribute.
DEMO
your jquery
$(document).ready(function(){
$("#add").click(function(){
$("div").not("#test1,#controls").hide();
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$("div").not("#test2,#controls").hide();
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$("div").not("#test3,#controls").hide();
$("#test3").slideToggle("fast");
});
});
Demo
I am having quite a battle controlling tabs through a button click function. I want the user to go through tabs in order. Each tab has a different html form. So the buttons provide also a validation. But the main problem is the next & previous buttons are not functioning at all. How come the button is not changing tabs at all?
jQuery
<script type="text/javascript">
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
$(".backtab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected - 1);
});
</script>
HTML
<div id="convertThis">
<div id="tabs">
<div href="#a" rel="a" title="./images/icons/category1.png">Category 1</div>
<div href="#b" rel="b" title="./images/icons/category2.png">Category 2</div>
</div>
<div id="divs">
<div id="a">
<form action="" method="post">
CATEGORY 1 FORM CONTENT
<div class="tabController">
<div class="tabNext">
<input type="button" class="nexttab" value="Next >>" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
</div>
</div>
</form>
</div>
<div id="b">
<form action="" method="post" id="post2">
CATEGORY 2 FORM CONTENT
<div class="tabController">
<div class="tabBack">
<input type="button" class="backtab" value="<< Previous" name="submit2" id="submit2" style="background: #EFEFEF;"/>
</div>
<div class="tabNext">
<input type="button" class="nexttab" value="Next >>" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
</div>
</div>
</form>
</div>
</div>
</div>
Maybe because your buttons are of type "submit" and they force a refresh of the page? Try to change them to <input type="button" ... />
Also, get rid of the <a> tags around the buttons.
Use either a button <input type='button'> OR a link <a href='...'>text</a>, there's no point in having a link wrapping a button.