set different input value when clicking on buttons - javascript

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" />

Related

Identifying specific button in a form

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>

is it possible to have a checkbox control two button state

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()" />

trigger alert on button click with javascript

I have two textfields with different IDs as shown
<textarea id="textfield">Hello World</textarea>
This will be updated with the content of the first textarea
<input id="messageID">
This is my script
<script type=text/javascript>
function() {
var value = document.getElementById("textfield").value;
document.getElementById('#messageID').val(value);
alert(value);
}
</script>
This is the onclick button and nothing happens when I click it
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>
Kindly assist!
Three things I'm seeing wrong:
.val(value); is a jQuery' method, not javascript... you should change it to .value = value;
to call onclick="myfunction()" you should name it: var myfunction = function(){
The document.getElementById() method doesn't need sharp # before the name.
Hope it helps.
Try something like this:
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById('messageID').value=value;
alert(value);
}
<input type="button" value="Alert" onclick="myfunction()" type="button" class="btn btn-danger" id="button"/>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">
The most important catch is whenever you declare function on button click you should define that function inside javascript.
<script type=text/javascript>
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById("messageID").value = value;
alert(value);
}
</script>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>
Here you go a working fiddle
https://jsfiddle.net/blazeeboy/fNPvf/
Its inner Html you are trying to get
<textarea id="textfield">Hello World</textarea>
<input id="messageID"/>
<button type="button" class="btn btn-danger" id="button" onclick="myfunction()">Alert</button>
function myfunction(){
alert(1);
var v = document.getElementById("textfield").innerHTML ;
document.getElementById('messageID').innerHTML = v;
alert(v);
}

How to give a button group the same behaviour as a group of radio buttons

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>

Reset Form / remove error classes from jQuery validate

i have a contact form with jQuery validate method. When the user click on "Reset"-button the hole contact form should be go to the initial state.
This is the button looks like:
<form class="form" method="post" action="" name="contact" id="contact">
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset</button>
</form>
And the JS-Code in my "$(document).ready-function" is:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").removeClass("has-error");
});
Problem: The error Text and the Input-fields will be deleted. But the red border (.has-error) or the green border (.has-success) don't be deleted.
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Your Updated Fiddle
JS Update
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.has-error').removeClass("has-error");
$("#contact").find('.has-success').removeClass("has-success");
$('#contact').find('.form-control-feedback').remove()
});
For bootstrapvalidator, this might useful when the form being display via bootstrap modal,
$("#editModal").on('hidden.bs.modal', function () {
//Removing the error elements from the from-group
$('.form-group').removeClass('has-error has-feedback');
$('.form-group').find('small.help-block').hide();
$('.form-group').find('i.form-control-feedback').hide();
});
#J Santosh answer worked for Bootstrap 3, great work.
For Bootstrap 4 I have done following changes:
$('#cancel').on('click', function () {
$("#contact").validate().resetForm();
$("#contact").find('.is-invalid').removeClass("is-invalid");
$("#contact").find('.is-valid').removeClass("is-valid");
$("#contact").find('.invalid-feedback').remove();
$("#contact").find('.valid-feedback').remove();
});
Simply have to change the class names. Hope it helps!
I'd reset the form by just using an input[type="reset"] (no jQuery required)
<form class="form" method="post" action="" name="contact" id="contact">
<input type="reset" class="btn btn-danger btn-lg" />
</form>
i've created an JSFiddle for you:
http://jsfiddle.net/bBc8c/1/
One Button is clear the input text, the other is delete the error Messages.
I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.
One Button is declared as type=submit the other is type=button:
<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>
Regards

Categories

Resources