So I have the following form:
<form>
<input type="button" value="1" >
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<button>Create account</button>
</form>
Those values are to choose a package from a database (those are the IDs). But on the screen I don't want them to display a number but a name (basic, advanced, pro, pro+). Is it possible to have a value and display a different text?
You can use input type radio for choose a different type of value.
<form action="/action_page.php">
<label><input type="radio" name="radio" value="1"> Basic </label>
<label><input type="radio" name="radio" value="1"> Advanced </label>
<label><input type="radio" name="radio" value="3"> Pro</label>
<label><input type="radio" name="radio" value="4"> Pro + </label>
<button type="submit">Create account</button>
</form>
Use a button element:
<form>
<button type="button" value="1">Basic</button>
<button type="button" value="2">Advanced</button>
<button type="button" value="3">Pro</button>
<button type="button" value="4">Pro+</button>
<button>Create account</button>
</form>
style a placeholder or data-attribute, or a for= label.
Related
I want the button to be passive.The button should be active when an option is selected.
Only one option can be selected.
<div id="form">
<form action="#" method="post">
<br><br>
<input type="radio" id="terms" name="terms" onchange="on()">option 1.
<br><br>
<input type="radio" id="terms2" name="terms2" onchange="on()">option 2.
<br><br>
<input type="radio" id="terms3" name="terms3" onchange="on()">option 3.
<br><br>
<button type="submit" id="gonder" disabled>Send</button>
</form>
</div>
Keep the same name for all the radio button to select one at a time.
And also define the onchange method.
function on() {
$('#gender').attr('disabled', false);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
<form action="#" method="post">
<br><br>
<input type="radio" id="terms1" name="term" onchange="on()">option 1.
<br><br>
<input type="radio" id="terms2" name="term" onchange="on()">option 2.
<br><br>
<input type="radio" id="terms3" name="term" onchange="on()">option 3.
<br><br>
<button type="submit" id="gender" disabled>Send</button>
</form>
</div>
Just define you go() function as in this snippet.
<div id="form">
<form action="#" method="post">
<br><br>
<input type="radio" id="terms" name="terms" onchange="on()">option 1.
<br><br>
<input type="radio" id="terms2" name="terms2" onchange="on()">option 2.
<br><br>
<input type="radio" id="terms3" name="terms3" onchange="on()">option 3.
<br><br>
<button type="submit" id="gonder" disabled>Send</button>
</form>
</div>
<script>
function on() {
document.getElementById("gonder").removeAttribute("disabled");
}
</script>
Try like this:
function on() {
document.getElementById("gonder").removeAttribute("disabled");
}
<div id="form">
<form action="#" method="post">
<br><br>
<input type="radio" id="terms" name="terms" onchange="on()">option 1.
<br><br>
<input type="radio" id="terms2" name="terms" onchange="on()">option 2.
<br><br>
<input type="radio" id="terms3" name="terms" onchange="on()">option 3.
<br><br>
<button type="submit" id="gonder" disabled>Send</button>
</form>
</div>
To select only one option, the radio inputs all need to have the same name.
To enable the Send button when an option is selected, enable it on the change event in JavaScript.
to #csgoempire
<div id="form">
<form action="#" method="post">
<button id="reselect">
reselect
</button>
<br><br>
<input type="radio" id="terms" name="terms"> option 1.
<br><br>
<input type="radio" id="terms2" name="terms2" >option 2.
<br><br>
<input type="radio" id="terms3" name="terms3" >option 3.
<br><br>
<button type="submit" id="gonder" disabled>Send</button>
</form>
hello try this one i tested already on jsfiddle
$('input[type="radio"]').on('click',function(){
if(!$('input[type="radio"]').prop('checked')){
$('input[type="radio"]').attr('disabled',true);
};
});
$('#reselect').on('click', function(){
$('input[type="radio"]').attr('disabled',false);
});
https://jsfiddle.net/a3rj4zsp/9/
Clicking this button but, I cannot input radio checked.
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="4"> value 4
</button>
js:
$(".button").click(function (){
$('input[name=choose]').attr('checked', true);
}
how can I do it?
jsfiddle demo
Instead of finding by the global selector, you need to use the button you clicked as the context by which you search in. This way you only check the nested input and do not try to check all of them, thus checking most likely only the last one.
$('.button').on('click', e => {
$('input', e.target).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="4"> value 4
</button>
$(".button").click(function (){
$(this).find('input.radio').attr('checked', true)
})
Try updating it like this?
Please see jsFiddle: https://jsfiddle.net/gto9ck47/1/
You should use prop instead.
$(".button").click(function (e){
$('input', e.target).prop('checked', true);
}
Try Pure javascript without embeding 80kb code to your website
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
<input class="radio" type="radio" name="choose" value="4"> value 4
</button>
<script>
let buttons = document.querySelectorAll('.button');
buttons.forEach(button =>{
button.addEventListener('click', ()=> {
button.children[0].checked = true;
});
})
</script>
Hey guys can you help me solve this problem. when radio button value is "Reject" and checkbox1 checkbox2 checkbox3 is not checked then give alert "please choose reason"
<input type="checkbox" name="checkbox1" value="reason1" id="checkbox1"> Reason1
<input type="checkbox" name="checkbox2" value="reason2" id="checkbox2"> Reason2
<input type="checkbox" name="checkbox3" value="reason3" id="checkbox3"> Reason3
<br>
<br>
<input type="radio" name="radio" value="Approve" id="radio1" required> Approve
<input type="radio" name="radio" value="Reject" id="radio2" required> Reject
<button type="submit" href="#"> Submit</button>
Try this. Let me know if you want an explanation.
$('input').change(function () {
if($('#radio2').is(':checked') && $('#checkboxes input:checkbox:checked').length == 0) {
alert("please choose reason");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkboxes">
<input type="checkbox" name="checkbox1" value="reason1" id="checkbox1"> Reason1
<input type="checkbox" name="checkbox2" value="reason2" id="checkbox2"> Reason2
<input type="checkbox" name="checkbox3" value="reason3" id="checkbox3"> Reason3
</div>
<br>
<br>
<input type="radio" name="radio" value="Approve" id="radio1" required> Approve
<input type="radio" name="radio" value="Reject" id="radio2" required> Reject
<button type="submit" href="#"> Submit</button>
There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?
Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I have some data witch i looping in foreach. That data is input type=radio buttons with name. How can i select specific item in foreach.
My code:
<?php foreach($items as $item): ?>
<input type="radio" name="price" value="<?= $item['id'];?>"> <?= $item['name'];?> // 15 items looped
<?php endif; ?>
Output
<input type="radio" name="price" value="1"> 10$
<input type="radio" name="price" value="2"> 20$
<input type="radio" name="price" value="3"> 30$
<input type="radio" name="price" value="4"> 40$
<input type="radio" name="price" value="5"> 50$
<input type="radio" name="price" value="6"> 60$
I have custom price buttons. When i click on on button i want to select one specific radio button in foreach.
<button>select 10$ </button>
<button>select 20$ </button>
<button>select 30$ </button>
You can add a data-* attribute to both input , button elements that are the same, use .filter() to select elements that have the same .data() value at click of button, .prop("checked", true) to select the input element matching button element .data()
$("button").click(function(e) {
$("input").filter(function(i, el) {
return $(el).data("value") === $(e.target).data("value")
}).prop("checked", true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="radio" name="price" value="1" data-value="$10"> 10$
<input type="radio" name="price" value="2" data-value="$20"> 20$
<input type="radio" name="price" value="3" data-value="$30"> 30$
<input type="radio" name="price" value="4" data-value="40"> 40$
<input type="radio" name="price" value="5" data-value="$50"> 50$
<input type="radio" name="price" value="6" data-value="60"> 60$
<button data-value="$10">select 10$ </button>
<button data-value="$20">select 20$ </button>
<button data-value="$30">select 30$ </button>
If your html looks like this:
<div id="checkboxes">
<input type="radio" name="price" value="1"> 10$
<input type="radio" name="price" value="2"> 20$
<input type="radio" name="price" value="3"> 30$
<input type="radio" name="price" value="4"> 40$
<input type="radio" name="price" value="5"> 50$
<input type="radio" name="price" value="6"> 60$
</div>
<div id="buttons">
<button data-val="1">select 10$ </button>
<button data-val="2">select 20$ </button>
<button data-val="3">select 30$ </button>
<button data-val="4">select 40$ </button>
<button data-val="5">select 50$ </button>
<button data-val="6">select 60$ </button>
</div>
This jQuery javascript should work:
$('#buttons button').click(function() {
var value = $(this).data('val');
$('#checkboxes input').eq(value-1).attr('checked', true);
})
Put it all together in a jsfiddle
https://jsfiddle.net/t1z1pm8x/
For doing this simple task , use of jQuery is overkill .
this can be achived using only javascript.
<?php
$i = 0
foreach($items as $item){
?>
<input type="radio" name="price" id="i<?=$i?>" value="<?= $item['price'];?>"><?= $item['name'];?> // 15 items looped
<? $i++; } ?>
Output:
<input type="radio" name="price" id="i1" value="1"> 10$
<input type="radio" name="price" id="i2" value="2"> 20$
<input type="radio" name="price" id="i3" value="3"> 30$
<input type="radio" name="price" id="i4" value="4"> 40$
<input type="radio" name="price" id="i5" value="5"> 50$
<input type="radio" name="price" id="i6" value="6"> 60$
<button id="1" onclick="select_radio(this.id)">select 10$ </button>
<button id="2" onclick="select_radio(this.id)">select 20$ </button>
<button id="3" onclick="select_radio(this.id)">select 30$ </button>
define a function
function select_radio(id){
document.getElementById("i"+id).checked = true;
}
Check out below piece of code.
<?php foreach($items as $item): ?>
`<label><input type="radio" name="price" value="<?= $item['price'];?>"> <?= $item['name'];?></label>` // 15 items looped
<?php endif; ?>
Importantly wrap your radio buttons within label tag, because interactively this is more user friendly, as the user feels easier to click the radio buttons text instead of radio button directly.
Jquery for selecting respective button.
$("button").click(function() {
var getSelectedText = $(this).text().split(" ");
$("input[type=radio][name=price]").filter(function() { return ($(this).parent().text().trim().toLowerCase()==getSelectedText[1].trim().toLowerCase()); }).attr("checked", true);
});
here we go with you required solution.. :)
Terms Used
.split() expects one parameter 'with what string to split', here in your case it is 'space'
.filter() a callback function, this returns the callback return with limited number of results, as per requirement, in your case matching the radio buttons text.
https://jsfiddle.net/zcvt1jo4/