Is there option for radio button to be auto selected when visitor enter text in another input form? I have searched for it, but without success.
I have this form with 3 radio buttons, they allow users to choose size, last radio button is for custom size (width and height). Under last radio button there is text input to input custom height and width.
<form action="#" method="post">
<label for="original-size">Original
<input type="radio" id="original_size" name="size" value="original" checked="checked">
</label>
<label for="medium-size">Medium
<input type="radio" id="medium-size" name="size" value="medium">
</label>
<label for="custom-size">Custom
<input type="radio" id="custom-size" name="size" value="custom">
</label>
<input id="custom-width" type="number" name="custom-width" placeholder="Custom width">
<label for="custom-width">custom width</label>
and
<input id="custom-height" type="number" name="custom-height" placeholder="Custom height">
<label for="custom-height">custom height</label>
<br>
<button name="submit" type="submit">Submit</button>
</form>
How to select custom-size radio input if user click on custom-width or custom-height text input? Is there option without java script, if not, small code of java script would be fine (I am not using jQuery)?
Managed to dig up this, is this what you are looking for?
<form>
<p>Original: <input type="text"></p>
<p>Medium: <input type="text"></p>
<div id="customWrapper">
<p>Custom: <input type="radio" id="customSize"></p>
<p>Custom Width: <input type="text"></p>
<p>Custom Height: <input type="text"> </p>
</div>
</form>
const div = document.getElementById('customWrapper');
// When the custom width or custom height are clicked on
div.addEventListener('focus', (event) => {
document.getElementById('customSize').checked = true;
}, true);
// When clicked somewhere out of the form
div.addEventListener('blur', (event) => {
document.getElementById('customSize').checked = false;
}, true);
https://jsfiddle.net/mLvt9ubz/
It basically searches for any input inside the div, when it's event changes then something happens.
In this case the radio button with an ID get's the attribute selected.
Related
I'm trying to disable a radio button if the other one is selected.
Next to the radio input is a text input in which if they choose the option, they would write the age depending on the selection of the radio (months or years).
Ideally, the text input would be disabled too. I have this code right now but it's not working:
<div class="md-form mb-3">
<i class="fas fa-paw prefix grey-text"></i><label data-error="wrong" data-success="right" style="padding-left: 5px">Age: </label>
<br />
<input type="radio" id="age_in_years" name="age_in_years" value="years">
<label for="age_in_years">Años:</label><input id="age_in_years"type="number" name="age_in_years" ng-model="age_in_years" class="form-control" style="margin-left: 5px;width: 70px;"/>
<input type="radio" id="age_in_months" name="age_in_months" value="months">
<label for="age_in_months">Months:</label><input id="age_in_months" type="number" name="age_in_months" value="age_in_months" ng-model="age_in_months" class="form-control" style="margin-left: 5px;width:70px;"/>
</div>
<script>
function selection() {
let x = document.getElementById("age_in_years");
let y = document.getElementById("age_in_months");
if (x.checked()) {
document.getElementById("age_in_months").disabled = true;
}
else if (y.checked()) {
document.getElementById("age_in_years").disabled = true;
}
}
</script>
I would refactor the HTML slightly and generate the radio buttons with the same name so that only 1 can ever be checked at a time. With that in place some simple javascript to determine the other inputs can be used to disable the number input.
label elements should not be used for arbitrary HTML - they are to be associated with input elements ( either using for=ID syntax or by wrapping the input element itself ) - hence some alterations to the markup.
document.addEventListener('change',e=>{
if( e.target.name=='age_unit' ){
let parent=e.target.parentNode;
let self=parent.querySelector(`input[type='number'][name='age[${e.target.value}]']`);
let other=parent.querySelector(`input[type='number']:not( [name='age[${e.target.value}]'] )`);
self.disabled=false;
other.disabled=true;
self.required=true;
other.required=false;
self.focus();
}
})
[type='number']{
width:70px;
}
<div class="md-form mb-3">
<i class="fas fa-paw prefix grey-text"></i>
<h2>Age:</h2>
<input type="radio" name="age_unit" value="years" />
<label>Años:
<input type="number" name="age[years]" ng-model="age_in_years" class="form-control" disabled />
</label>
<input type="radio" name="age_unit" value="months" />
<label>Months:
<input type="number" name="age[months]" ng-model="age_in_months" class="form-control" disabled />
</label>
</div>
A radio type is grouped by the name, so using the same name would already give the behavior you want, without needing any JavaScript.
<div class="md-form mb-3">
<i class="fas fa-paw prefix grey-text"></i>
<label data-error="wrong" data-success="right" style="padding-left: 5px">Age: </label>
<br>
<input type="radio" id="age_in_years" name="age" value="years">
<label for="age_in_years">Años:</label><input id="age_in_years"type="number" name="age_in_years" ng-model="age_in_years" class="form-control" style="margin-left: 5px;width: 70px;"/>
<input type="radio" id="age_in_months" name="age" value="months">
<label for="age_in_months">Months:</label>
<input id="age_in_months" type="number" name="age_in_months" value="age_in_months" ng-model="age_in_months" class="form-control" style="margin-left: 5px;width:70px;"/>
</div>
This would make sure that if one of radio elements is clicked or, once another one is clicked, the previous would be unchecked.
Because you have a value there, there's no reason to use different names, because the value already hints what kind of data has been submitted or is required.
I have created two custom fields on woocommerce checkout page. First Field is text and second is multicheckbox. I want both fields to show output on same page using Onchange event.
Text Field code is
<p class="form-row form-row-wide wooccm-field wooccm-field-wooccm11 wooccm-type-text validate-required woocommerce-validated" id="billing_wooccm11_field" data-priority="50">
<label for="billing_wooccm11" class="">Other NAME <abbr class="required" title="required">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text wooccm-required-field" name="billing_wooccm11" id="billing_wooccm11" placeholder="" value="" data-required="1">
</span>
</p>
I have used this code to display value of text field
<script>
document.getElementById("billing_wooccm11").onchange = function() {myFunction()};
function myFunction() {
var input = document.getElementById("billing_wooccm11").value;
document.getElementById("demo").innerHTML = input;
}
</script>
<p id="demo"></p>
It is working and showing value as required. But second field which is multicheckbox is not working
Multicheckbox field code is
<p class="form-row form-row-wide wooccm-field wooccm-field-wooccm14 wooccm-type-multicheckbox validate-required" id="billing_wooccm14_field" data-priority="130">
<label for="billing_wooccm14" class="">PROGRAMME <abbr class="required" title="required">*</abbr></label>
<span class="woocommerce-input-wrapper">
<span class="woocommerce-multicheckbox-wrapper" data-required="1">
<label><input type="checkbox" name="billing_wooccm14[]" value="one"> One</label>
<label><input type="checkbox" name="billing_wooccm14[]" value="two"> Two</label>
<label><input type="checkbox" name="billing_wooccm14[]" value="three"> Thress</label>
<label><input type="checkbox" name="billing_wooccm14[]" value="Four"> four</label>
</span>
</span>
</p>
I want to display text of checkbox just like text field. So when any checkbox is checked its value should appear and if user unchecked it, its text should also disappear.
I have a way to go about this, let's say we have these two input checkbox buttons. first, you must iterate through the buttons you have using the name attribute.
<input type="checkbox" class="myinput" name="input_check" value="one">
<input type="checkbox" class="myinput" name="input_check" value="two">
then for the js code:
document.querySelector('[name="input_check"]').onchange = function() {myFunction()};
function myFunction(){
var checkbox = document.querySelectorAll('.myinput');
for(let i=0; i<checkbox.length; i++)
if (checkbox[i].checked)
document.getElementById('demo').innerHtml = checkbox[i].value;
}
I hope this works for you :)
I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>
To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');
Given this html:
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" value="input1_div" checked=""/> Opt1
<input type="radio" name="stype" id="opt2" value="input2_div"/> Opt2
</div>
<div id="stypes">
<div id="input1_div">
<input type="text" id="input1" name="input1" placeholder="input1"/>
</div>
<div id="input2_div" style="display: none;">
<input type="text" id="input2" name="input2" placeholder="input2" disabled=""/>
</div>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
I use following jQuery to hide/disable input fields based on selected radio buttons:
jQuery('#choices input').each(function() {
var item = this;
$(this).click(function() {
if($('input[type=radio][name=stype]').is(':checked')) {
$('#stypes > div').hide();
$('#stypes input').not("#sbutton").prop('disabled', true);
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
}
});
});
All-in-One in this jsfiddle.
I'm particularly unsure about my technique to incorporate radio value into the id selector:
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
What is the correct way to do it? Other tips regarding my jQuery?
First of all, you don't need a sophisticated jQuery.each loop to bind the click and to define this. In each event handler this will be the caller of the function. In your case it is enough to have click function for all of them.
As you said in comments, it's only matter of presentation. I prefer to have one field instead of two fields. Even I prefer to have a fixed name for this text input, though in order to make it very similar to your example I change the name and placeholder accordingly.
$(function(){
$('#choices input').click(function() {
var newName = $(this).val(),
newPlaceholder = $(this).attr("data-placeholder");
$('#interchangable_input[name!='+newName+']').hide()
.attr("name", newName)
.attr("placeholder", newPlaceholder)
.fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-placeholder="Input one" value="input1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-placeholder="Input two" value="input2"/> <label for="opt2">Opt2</label>
</div>
<div id="stypes">
<input type="text" id="interchangable_input" name="input1" placeholder="Input one"/>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
Few more suggestions:
You can use <label for="target id"> for each option label in radio buttons or checkboxes. It will work fine with click event handler, even if the user clicks on the label instead of the button itself.
You can hid some information as data-* attribute in html5. You don't need to necessarily use value.
Update for multiple items
In case of group of multiple items in form, I can imagine a form with different sections or pages. The <fieldset> can be use to group these items. In HTML5 you could just disable the fieldset tag by <fieldset disabled> when you change the form page with jquery. (With exception of IE browsers). Because of this exception we need to disable all items in subforms. In order to handle this part, I defined a class .form-element which applies for all form inputs. You can also use <div> instead of <fieldset>, then you will need to track their enable/disable status.
$(function(){
// initialization by disabling form-elements and hiding them
$("#subforms fieldset[disabled]").hide();
$("#subforms fieldset[disabled] .form-element").attr('disabled','disabled');
// choice tracker
$('#choices input').click(function() {
var $target = $($(this).attr("data-subform")),
$oldElement = $("#subforms fieldset:not([disabled])");
$oldElement.attr('disabled','disabled').hide();
$oldElement.find(".form-element").attr('disabled','disabled');
$target.removeAttr("disabled");
$target.find(".form-element").removeAttr("disabled");
$target.fadeIn();
});
});
fieldset {
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-subform="#subform1" value="subform1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-subform="#subform2" value="subform2"/> <label for="opt2">Opt2</label>
</div>
<div id="subforms">
<fieldset id="subform1" >
<input class="form-element" type="text" name="input1_1" placeholder="Input one"/>
<input class="form-element" type="text" name="input1_2" placeholder="Input two"/>
</fieldset>
<fieldset id="subform2" disabled>
<input class="form-element" type="text" name="input2_1" placeholder="Input one"/><br />
<textarea class="form-element" name="input2_2" placeholder="Input two"></textarea><br />
<input class="form-element" type="checkbox" name="input2_3" id="input2_3" /> <label for="input2_3">check this first</label>
</fieldset>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
I have a form which changes the inputfields depending on a radio-button.
for text there appears a textbox
for textarea there appear additional 2 fields for cols And rows
for select, checkbox and radio there appear additional fields with appendchild
have a look here:
http://joomla.byethost16.com/php.php
Now what i want is to let the user add more params, param2, param3, etc.
Unfortunately i made the js functions that trigger the fields according to the radio-button like this
function textarea(){
if (document.getElementById('option2').checked = true){
document.getElementById('feld').style.display = '';
document.getElementById('feld2').style.display = '';
document.getElementById('feld4').style.display = 'none';
}}
So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.
all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too
<td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields" />
<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a> <a href=# onclick='reset()'>reset</a></div>
</div>
<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>
</td>
</tr>
How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params?
For the complete code please go here and view source:
http://joomla.byethost16.com/php.php
thx so much for help on this
i solved it by using $(this) with a "click" bind to each class which sits on the buttons.
another solution would be to use a plugin, for example http://www.mdelrosso.com/sheepit/index.php?lng=en_GB which is very good but relys on a certain structure (you have to define an index at the form, which has to be resorted in processing under most cases since some index_vars can be skipped userwise.)