I have four fields, two of them is a text input field and the other is a radio button. The thing is I want the text field to be enabled only if select corresponding radio button.
I tried with onclick and oncheck functions inside radio tag but its working for enable the textbox but disable not working
<html>
<body>
<input type="radio" name="type" value="customurl" onclick="document.getElementById('text').removeAttribute('disabled')">
<input type="text" id="text" name="custom1" placeholder="should be 5 charecters at least" disabled>
<input type="radio" name="type" value="customurl" onclick="document.getElementById('sel').removeAttribute('disabled')">
<input type="text" id="sel" name="custom2" placeholder="should be 5 charecters at least" disabled>
</body>
</html>
if I select radio1 textbox1 is enabled and when select radio selected textbox2 enabled but textbox1 not disabled
In addition to removing the disabled attribute on the target element, you're looking to also set the disabled attribute on the other element. This can be done with .setAttribute('disabled', true).
You'll also want to remove your onclick event handler, and make use of unobtrusive JavaScript by adding an event listener. I've used .getElementsByTagName() to target the relevant inputs.
This can be seen in the following:
document.getElementsByTagName('input')[0].addEventListener('click', function() {
document.getElementById('text').removeAttribute('disabled');
document.getElementById('sel').setAttribute('disabled', true);
});
document.getElementsByTagName('input')[2].addEventListener('click', function() {
document.getElementById('sel').removeAttribute('disabled');
document.getElementById('text').setAttribute('disabled', true);
});
<input type="radio" name="type" value="customurl">
<input type="text" id="text" name="custom1" placeholder="should be 5 charecters at least" disabled>
<input type="radio" name="type" value="customurl">
<input type="text" id="sel" name="custom2" placeholder="should be 5 charecters at least" disabled>
Related
I have the following radio buttons and a dropdown in my rails form. One radio button is for 'yes' and another for 'no'
<input type="radio" value="true" name="staff[optquestion]">
<input type="radio" value="false" name="staff[optquestion]">
<select class="form-control" name="staff[Redesignation]"><option value="">
</option>
I want when a user clicks on 'yes' the dropdown below gets selected.
Here is my javascript/jquery:
$(document).ready(function(){
$("[name=staff[optquestion]]").change(function(){
$("[name=staff[[Redesignation]]").toggle($("
[name=staff[optquestion]]").index(this)===1);
});
});
I have placed the script in application.js but nothing happens. When I place the script in staffs.coffee I get the error "reserved word 'function'"
I know I could me mixing js and jquery here but am only starting out. Thanks for your help.
You must be careful while selecting elements by name in jQuery.
For handling radio button inputs you should use here in your case :
$("input:radio[name='staff[optquestion]']")
And also remember to enclose the inputs in a form for better control.
So,
<form>
<input type="radio" value="true" name="staff[optquestion]" checked="checked">
<input type="radio" value="false" name="staff[optquestion]">
<select class="form-control" name="staff[Redesignation]">
<option value="">
</option>
</select>
</form>
And the JS will be :
$(document).ready(function(){
$("input:radio[name='staff[optquestion]']").change(function(){
$("[name='staff[Redesignation]']").toggle();
});
});
Since there are only two radio buttons here in use, this will work. Incase you have more than 2 you must check with values of the radio buttons using this in the event handler.
How can I enable HTML validation for a disabled HTML input text field?
Here is my code:
<!--
<?php
my php code here...
?>
-->
<!DOCTYPE HTML>
<form action="">
<select name="0" required="" >
<option name="1" value="1"> 1 </option>
<option name="2" value="2"> 2 </option>
</select><br>
<!--choosing or changing above select box will assign value to input box "5" (using javascript and php db)-->
<input name="3" type="text" required="" ><br>
<input name="4" type="text" disabled="" ><br>
<input name="5" type="text" required="" disabled=""><br>
<input type="submit" >
</form>
</html>
<!-- i want to force user to choose select box before submiting form -->
I want the input field "5" to not be empty, and I don't want the user to edit the field manually, either.
Instead, when the user selects or chooses an item in dropbox, my JS and PHP will automatically assign a value to input field "5".
If the user submits the form without selecting an item from the dropbox, the dropbox value will be the default value, but since user hasn't clicked the dropbox, the JS will not work and no value will be assigned to input field "5", so the form will post empty or no value for input field "5".
Since input field "5" is set to disabled="", HTML validation is not working
JSFiddle demo (click the submit button to see that input field "5" is not validating)
You can add the option "Select" to the dropbox(name="0") as below mentioned code. so that you can validate the dropbox.
<select name="0" required= >
<option name="1" value="">Select</option>
<option name="1" value="1"> 1 </option>
<option name="2" value="2"> 2 </option>
</select>
Or you can add the default value to the input(name="4") as like below.
<input name="5" type="text" required="" disabled="" value="1"><br>
I am trying to do a radio buttons group with couple of options and the last option will be a text input field "Other".
Something like this:
I want to do it so when submitted, the url called is
app://configuration?server=...
server should contain the value of the server attribute wether it's from one of the radio buttons or from the input group
I tried to do this
<form method="GET" action="app://configuration">
Select server <br>
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" value="">Other <input type="text" name="server" />
<input type="submit" value="Submit">
</form>
I have used the same name attribute for the radio buttons and the input field and the result is that the name (server) is being duplicated when the submit is pressed.
I understand why it doesn't work in the current way. Any idea how to achieve something like this with javascript ? (no third party like jquery please)
I have no access to change the server code so I can't use a different attribute name because the server will not know it...
Try this pure javascript (modified your html code)
function changeradioother() {
var other = document.getElementById("other");
other.value = document.getElementById("inputother").value;
}
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" id="other" value="other">Other <input id="inputother" type="text" onchange="changeradioother()" />
<input type="submit" value="Submit">
I added an id to the last radio button and the inputbox.
You cant use the same name for the text input. Radio buttons are fine because only one will be returned to the server.
Other <input type="text" name="serverCustom" />
Check to see if the value of "server" is null or empty ("") when you get it, and then if it is grab the value of serverCustom.
If you wish to use pure javascript to check the values, and send the data you require use this:
http://jsfiddle.net/Lord_Zero/w5x4h/
Is this what you are trying to do?
Fiddle: fiddle
function submit(){
var curRadio = document.querySelector('input[name="server"]:checked').value;
var serverValue;
if(curRadio==4)
{
serverValue=document.getElementById("other").value;
}
else
{
serverValue=curRadio;
}
alert(serverValue);
}
I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
Please see my current html snippet is as below. I am trying to make html input fields changeable and selectable. So I can change the value of colors in input text field which is toggled with the corresponding checkbox. When the submit button is clicked, only the information of the selected color is submitted.
My current html displays the content correctly, but it will submit two colors information. Despite of only one checkbox is selected.
<form id="myForm">
<input type="checkbox" name="color1" value="blue_check" />
Color1: <input type="text" name="blue" value="120" /></br>
<input type="checkbox" name="color2" value="red_check" />
Color2: <input type="text" name="red" value="160" /></br>
<input type="submit" value="OK" />
</form>
or click on: http://jsfiddle.net/4xDFK/56/
Thank you in advance.
With jQuery:
$(document).ready(function() {
$('#myForm :checkbox').each(function() {
$(this).next("input").attr('disabled',!$(this).is(':checked'));
});
});
$('#myForm :checkbox').change(function() {
$(this).next("input").attr('disabled',!$(this).is(':checked'));
});
As you don't mention the use of JavaScript or a JS-framework, here is a suggestion to solve it with the pure html form and server-side evaluation:
Give the checkboxes a telling name, like "check_blue" + "check_red"
On the server side, only process the color if the corresponding checkbox has been selected
If you only want to so submit or allow filling of the inputs according to the checkbox state, you have to use JavaScript (and should probably have mentioned that in your question or at least as a tag).
you can remove elements on submit , if related checkbox is not checked .
how to prevent form from sending some fields we don't want to send
All input values are submitted as you click hit the submit button. So what you need to do is to handle this on the server side. Give names to the checkboxes and check their values, google for "handling checkboxes in XXXX" where XXXX is your server side language.
<h1> Colors Information </h1>
<form id="myForm">
<input type="checkbox" name="choice1" value="choice1"/>
Color1: <input type="text" name="blue" value="120" /></br>
<input type="checkbox" name="choice2" value="choice2"/>
Color2: <input type="text" name="red" value="160" /></br>
<input type="submit" value="OK" />
</form>
You can then check which checkboxes are checked, and accordingly see if you should put the corresponding text input fields into consideration.