i have a form with two buttons and a checkbox, i want when user checks the checkbox one of the button is enabled while the other button is disabled. So when the forms loads one will be enable by default and the other disabled, but after the checkbox has been checked the other becomes enabled while that which was enable by default become disabled..
i can actually do this for one button but i can do this for two button, please can someone with javascript skills help me out here thanks.
You could do this with JQuery. Try the snippet below:
$('document').ready(function() {
$('.checkbox_check').change(function() {
var isChecked = $('.checkbox_check').is(':checked');
$('#btn1').prop('disabled', !isChecked);
$('#btn2').prop('disabled', isChecked);
});
})
<button type="button" id='btn1' disabled>Button 1</button>
<button type="button" id='btn2'>Button 2</button>
<input type="checkbox" class='checkbox_check' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Update:
Per the comment below, here's a Vanilla JS solution:
function toggleDisabled() {
var isChecked = document.getElementById("checkbox_check").checked;
document.getElementById('btn1').disabled = !isChecked;
document.getElementById('btn2').disabled = isChecked;
}
<button type="button" id="btn1" disabled>Button 1</button>
<button type="button" id="btn2">Button 2</button>
<input type="checkbox" id="checkbox_check" onChange="toggleDisabled()" />
You can achieve this with Vanilla JS
function fireChange() {
const button1 = document.getElementById('test1');
const button2 = document.getElementById('test2');
button1.disabled = !button1.disabled;
button2.disabled = !button2.disabled;
}
<button disabled id="test1"> first button </button>
<button id="test2"> second button </button>
<input type="checkbox" onChange="fireChange()" />
Related
so I want to get a specific value if a button is clicked in my form, but somehow its listening on all buttons and not only the buttons in my form.
Instead of the javascript example below I also tried calling the class by
$('.modifygap').bind('click', function (e) {
but in this example the value didnt get set correctly.
Here is my html:
<button type="button" id="anotherbutton">Another</button>
<form action="editortoken_information" id="showtoken" method="POST">
<button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap"
value="14" data-value="test">14</button>
<button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap"
value="15" data-value="test">15</button>
</form>
And here is my javascript function:
$(document.getElementById("showtoken")).ready(function () {
$("button").click(function (e) {
e.preventDefault();
document.getElementById('tokenindex').value = this.getAttribute("data-value");
})
})
I thought by listening only on the specific id it would only detect button clicks in the form. But for some reason it is listening to all button clicks.
Use event.target.value to get the value of clicked element.
$(document).ready(() => {
$('.modifygap').bind('click', function (e) {
console.log('e', e.target.getAttribute("data-value"))
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="anotherbutton">Another</button>
<button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap"
value="14" data-value="test14">14</button>
<button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap"
value="15" data-value="test15">15</button>
I have 3 buttons and an input, i want when i click on one of those buttons the value or source of this input to change according to the button, like for example when i click on the first button it passes apple, when i click on button two it passes orange, etc..
How can i do that? here is what i have tried so far:
$(document).ready(function() {
$('button').click( function() {
$('input').val('value');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Button 1</button>
<button type="button">Button 2</button>
<button type="button">Button 3</button>
<input type="text" value="">
You could even use ids on the buttons. However, in this example I think it's more semantic using a data-attribute on each button like so:
$(document).ready(function() {
$('button').click(function() {
$('input').val($(this).data('attribute'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-attribute='apple'>Button 1</button>
<button type="button" data-attribute='orange'>Button 2</button>
<button type="button" data-attribute='banana'>Button 3</button>
<input type="text" value="">
Add custom attribute button element ans pass it your click event
HTML:
<button type="button" data-fruit="apple">Button 1</button>
<button type="button" data-fruit="banana">Button 2</button>
<button type="button" data-fruit="orange">Button 3</button>
JS:
$(document).ready(function() {
$('button').click( function() {
var fruit = $(this).attr('data-fruit');
$('input').val(fruit);
});
});
you can do this even with simple javascript....
function insertValue(btn) {
document.getElementById("input").value = btn;
}
<button onClick='insertValue("Orange")'>Orange</button>
<button onClick='insertValue("banana")'>banana</button>
<button onClick='insertValue("Apple")'>Apple</button>
<input type=text id="input" />
I want to make my button elements act like radio buttons. I mean that if I select one with same name or id then the others will be un-selected.
<button name="options" id="options>Button 1</button>
<button name="options" id="options>Button 2</button>
<button name="options" id="options>Button 3</button>
How can I do this?
I would change the id to class and then for each group of buttons you want to act as a group have a unique class name. Here is an example of two button groups, I added the feature of reenabling buttons by clicking the only one left
$('button').on('click', function() {
var name = $(this).attr('name');
var cl = $(this).attr('class');
var reenable = false;
$('.' + cl).each(function() {
if ($(this).attr('name') != name) {
if ($(this).attr('disabled') == 'disabled')
reenable = true;
else
$(this).attr('disabled', true);
}
});
if (reenable)
$('.' + cl).attr('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="options1" class="options">Button 1</button>
<button name="options2" class="options">Button 2</button>
<button name="options3" class="options">Button 3</button>
<br />
<button name="options1" class="options2">Button 1</button>
<button name="options2" class="options2">Button 2</button>
<button name="options3" class="options2">Button 3</button>
This question already has answers here:
How can I know which radio button is selected via jQuery?
(40 answers)
Closed 9 years ago.
here this is my code... here i am generating radio button dynamically using php code...
my problem is how to get which radio button selected on click of addForm() function...
<div class="modal-body">
<div> <input type="radio" name="form" value="Form-Name">Form-Name</div>
<div> <input type="radio" name="form" value="Kalpit-Contact">Kalpit-Contact</div>
<div> <input type="radio" name="form" value="Kalpit-Contact test">Kalpit-Contact test</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="addForm()">Add Page</button>
</div>
Thanks in advance
var selectedValue = $("input[name=form]:checked").val();
You should do it like this:
var radio = jQuery('input[name="form"]:checked');
You can then retrieve your radio value or other attributes:
var value = radio.val();
It's a good idea to see if any radio is checked before doing that:
if (radio != undefined)
{
//do what you need to
}
Alternatively, you can also try this -
$(".modal-body input[type=radio]").each(function(){
if (this.checked)
{
console.log(this.value+" is checked");
}
});
var myval = $("#myForm input[type=form]:checked").val();
I would put in a div (id=myForm) and call it in the safety of the parent, just in case you have anything else on the page, like a newsletter signup or search box with options.
How to display second button after the click on first button??
I mean, when The user clicks on one button, he should see another button, on click of which he should return to his previous button!! Cyclic event kind of...
I wanted to do this using Java script and HTML.
I tried to use 'onclick' but it dint work!! Help!!
This is what I used..
`<body>
function alert()
{
alert("54");
// <input type="button" id="btnSer" value="Back"/>
}
<input type="button" id="btnSearch" value="Search" onClick="alert();">
</body>`
Something like this?
<button id="button1" style="display:block;" onclick="document.getElementById('button2').style.display = 'block'; this.style.display = 'none';">Button 1</button>
<button id="button2" style="display:none;" onclick="document.getElementById('button1').style.display = 'block'; this.style.display = 'none';">Button 2</button>
here is the code using simple plain javascript : (*note that naming your function alert() isnt smart because there is already a predefined function in js called alert)
Javascript Code
function addBtn(){
document.getElementById('btnHolder').innerHTML = '<input type="button" onClick="javascript:removeBtn();" value="click" />';
}
function removeBtn(){
document.getElementById('btnHolder').innerHTML = '';
}
HTML
<div id="btnOne"><input type="button" onClick="javascript:addBtn();" value="click" /></div>
<div id="btnHolder"></div>
this code is not tested but it should work, let me know if you have any other questions