We Keep Coding

Have an input display a text but with a different value

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.

How to show specific value when click on any radio button in console using JavaScript?

I am having difficulty to show a value of selected radio button. When I click on question 1 then result 1 should be display on console but I am getting all the values of radio button.Can anyone help me please? Thanks
html
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1">
<label>Question 2</label>
<input type="radio" class="question" value="2">
<label>Question 3</label>
<input type="radio" class="question" value="3">
<button type="submit">Submit</button>
</form>
JavaScript
<script>
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
</script>

You could check to see if it is checked with question.checked.
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
if(question.checked){
console.log(question.value);
}
});
event.preventDefault();
}
You might also want to add names to all the radios, because the idea of radios is that only one of them can be ticked at a time. name does that for you:
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>

Instead of checking the checked property inside a loop. You could use the :checked pseudo-class to only select checked radios.
function answers(event)
{
var q = document.querySelectorAll('.question:checked');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Also be aware to use the name property to group radio buttons.

How to set property of radio button to checked

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>

Select specific radio item in foreach

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/

function "buttons disabled" from beginning

I have 3 Radio Buttons and 3 Buttons that each belong to 1 Radio Button. I want the Buttons only to be enabled if the according Radio Button is checked.
My code works, but only if I first click on a Radio Button and thus start the function. How can I make the function work, so that some buttons are disabled from the beginning?
The function looks like this
$("input:radio[name=Kartenthema]").change(function() {
if (this.value == "Geburtenrate") {
$("#karte_id").attr('src', 'kantone_interaktiv_geburten.svg');
$("#legende_id").attr('src', 'Legenden/GebLegende.PNG');
$("input[name=button1]").attr("disabled", true);
$("input[name=button1]").addClass("disabledClass");
$("input[name=button2]").attr("disabled", false);
$("input[name=button2]:enabled").removeClass("disabledClass");
$("input[name=button3]").attr("disabled", true);
$("input[name=button3]:disabled").addClass("disabledClass");
} else if (this.value == "Sterberate") {
$("#karte_id").attr('src', 'kantone_interaktiv_sterbe.svg');
$("#legende_id").attr('src', 'Legenden/SterbLegende.PNG');
$("input[name=button1]").attr("disabled", true);
$("input[name=button1]:disabled").addClass("disabledClass");
$("input[name=button2]").attr("disabled", true);
$("input[name=button2]:disabled").addClass("disabledClass");
$("input[name=button3]").attr("disabled", false);
$("input[name=button3]:enabled").removeClass("disabledClass");
} else if(this.value == "Wanderung") {
$("#karte_id").attr('src', 'kantone_interaktiv_wanderung.svg');
$("#legende_id").attr('src', 'Legenden/WandLegende.PNG');
$("input[name=button1]").attr("disabled", false);
$("input[name=button1]:enabled").removeClass("disabledClass");
$("input[name=button2]").attr("disabled", true);
$("input[name=button2]:disabled").addClass("disabledClass");
$("input[name=button3]").attr("disabled", true);
$("input[name=button3]:disabled").addClass("disabledClass")
}
}
And the Radio Buttons / Buttons look like this:
<embed id="legende_id" src="Legenden/GebLegende.PNG" width="180" height="230" style="margin-left:30px" type="image/PNG" />
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Geburtenrate" checked="ckecked">Geburtenziffer
<input type="button" class="Button" name="button2" value="Animation" onclick="location.href='animation_geburten.html'">
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Sterberate">Mortalität
<input type="button" disabled="disabled" class="Button" name="button3" value="Animation" onclick="location.href='animation_mortalität.html'">
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Wanderung">Interkantonale Wanderung
<input type="button" class="Button" name="button4" value="Animation" onclick="location.href='animation_wanderung.html'">
<br>
<br>
<input type="button" class="Button" name="button1" value="Kartogramm" onclick="location.href='kartogramm.html'" />
</br>
</br>
</input></input>
</h3>
</input></input>
</h3>
</input></input>
</h3>
I know that I can put a disabled after input type, but then the style doesn't change from enabled to disabled.

if (this.value == "Geburtenrate") {
Change this line and the next 2 similar lines to this:
if ($(this).val() == "Geburtenrate") {

Try using $("input[name=buttonN]").removeAttr("disabled") to set controls enabled.

No problem. Try changing your HTML code to this:
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Geburtenrate" checked="ckecked">Geburtenziffer
<input type="button" class="Button" name="button2" value="Animation" onclick="location.href='animation_geburten.html'" disabled="disabled">
</h3>
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Sterberate">Mortalität
<input type="button" disabled="disabled" class="Button" name="button3" value="Animation" onclick="location.href='animation_mortalität.html'">
</h3>
<h3>
<input type="radio" class="Radio" name="Kartenthema" value="Wanderung">Interkantonale Wanderung
<input type="button" class="Button" name="button4" value="Animation" onclick="location.href='animation_wanderung.html'" disabled="disabled">
<br>
<br>
<input type="button" class="Button" name="button1" value="Kartogramm" onclick="location.href='kartogramm.html'" disabled="disabled">
<br>
<br>
</h3>