Make input text fields changeable and selectable (toggled with checkbox) - javascript

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.

Related

Copy input field's value to multiple hidden fields... but with same ID's?

1) I have 3 input radio buttons with unique values.
For e.g.
<input type="radio" id="id1" value="This is first value" />
<input type="radio" id="id2" value="This is second value" />
<input type="radio" id="id3" value="This is third value" />
2) Next, I have 2 hidden form like this:
<form action="//mysite.com/process1.php"><input type="hidden" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" id="uniqueid" value=""></form>
3) Based upon whichever radio button the user clicks, I need to copy its value to the value of both the above forms hidden field.
For e.g. If user clicks on radio with id1, then it's value "This is first value" should be copied to both the forms hidden field.
CONSTRAINTS:
1) Have to use javascript or jquery, no server side processing available.
2) Note: both the final forms have one input field, but with same id. This is a constraint.
3) Why? Because based on some other actions on the page, the user gets to see one of the 2 forms. The only difference between them is their action is unique. All fields are same.
WHAT I HAVE SO FAR:
Using this, I am able to copy the value from the radio button to a hidden field's value, but it only copies to a field with a UNIQUE ID.
var $unique = $("#unique");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});
Can someone guide as to how can the value be copied to multiple input fields, but with same id's?(Yes, the id's of the initial radio buttons can be unique.)
Having two HTML elements with same ID is an error.
You cannot treat this as a constraint, this is NOT a valid HTML code and it will cause inconsistent behavior in different browsers.
Use classes instead:
<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" value=""></form>
And javascript:
var $unique = $(".uniqueid");
However, I couldn't find any #radio1 or #email in your code, are you sure you have the right selectors?
My recommendation for the JS will be: (Working jsFiddle)
var $unique = $(".uniqueid");
$('input[type="radio"]').click(function(){
$unique.val(this.value);
});
Notes for jsFiddle:
I've used click event instead of keyup (don't really understand why you used keyup here..).
I've given all radio buttons the same name so they will cancel each other out when selected.
I've turned the hidden fields to text so you could see the result.
<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
var $unique = $("input[type=hidden].uniqueid");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});
As said by others, id must be unique. Try using a data-attribute:
<form action="//mysite.com/process1.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
<form action="//mysite.php/process2.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
Now you can use that attribute as selector to do something like:
$('[data-shouldupdate]').val(this.value);
I agree with all other who posted that id have to be unique to have correct HTML document. So if it's possible I strictly recommend you to fix the HTML document to remove all duplicates.
I write my answer only for the case that you can't remove id duplicates because of some reason and you still have the same requirements. In the case you should change the line
var $unique = $("#uniqueid");
to
var $unique = $("*[id=uniqueid]");
The selector *[id=uniqueid] (or just [id=uniqueid]) works slowly as #uniqueid, but it allows you to get all elements with the specified id attribute value. So it works even in case of id duplicates on the HTML page.
The most simple solution is to give a same name to both inputs. Check this link jsfiddle to see a working example. The code used is the one given is below:
HTML:
<input type="radio" name="copiedValue" id="id1" value="This is first value" />
<input type="radio" name="copiedValue" id="id2" value="This is second value" />
<input type="radio" name="copiedValue" id="id3" value="This is third value" />
<form action="//mysite.com/process1.php"><input name="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input name="uniqueid" id="uniqueid" value=""></form>
jQuery/javascript:
$("input:radio[name=copiedValue]").click(function() {
$("input[name=uniqueid]").val($(this).val());
});
The radio-buttons should have the same name. I removed the type="hidden" so u can see it working correctly.
Hope it useful!

HTML form with input radio and one text input with the same attribute name

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);
}

Making radio buttons that are named differently, act as if they were in a group

I have a dynamically generated form - within it are multiple fieldsets with their own elements. Among those is a radio button. Here's a simplified snippet:
<form name="ePIC" method="post" action="test.php">
<fieldset>
<input type="radio" name="pic[1]" />
</fieldset>
<fieldset>
<input type="radio" name="pic[2]" />
</fieldset>
<input type="submit" name="submit" value="test" />
</form>
Basically, in the fieldsets are pictures and the radio buttons are to select the cover picture for the album.
Everything is working great except the fact that, because the radio buttons are named differently, they won't act as a group - meaning, multiple radio buttons can be selected at once.
Can anyone tell me how to make the radio buttons act as a group, probably with javascript/jQuery?
I started trying to manage the buttons by class - but got lost along the way as to how to affect all the other radio buttons, at the click of one.
This jQuery code will remove the [n] part of all the radio button names, so all the buttons with the same name prefix will be grouped together.
$(":radio").attr('name', function(i, name) {
$(this).data('orig-name', name);
return name.replace(/\[.*\]/, '');
});
Use this submit handler to put back the original names with the indexes when the form is submitted.
$("form").submit(function() {
$(this).find(':radio').attr('name', function() {
return $(this).data('orig-name');
});
});
You better use same name, but if you can't:
$('input[type="radio"]').change(function(){
// Deselect all
$('input[type="radio"]').attr('checked', false);
// Select current
$(this).attr('checked', true);
});
If you use the same name for both radio button, only one will be allowed to be selected. Take a look at the code below.
<form name="ePIC" method="post" action="test.php">
<fieldset>
<input type="radio" name="pic" value="1" />
</fieldset>
<fieldset>
<input type="radio" name="pic" value="2" />
</fieldset>
<input type="submit" name="submit" value="test" />
</form>
You need to create them with the same name but you can assign them different values with the value attribute.

Submit button values not being passed with Ajax

I have the following ajax code which submits name/email/message parameters to "messageaction.cfm" template and displays those same 3 parameters on original submission page (works fine):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
function submitForm() {
$.ajax({type:'POST', url:'messageaction.cfm', data:$('#ContactForm').serialize(), success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}});
return false;
}
</script>
<form id="ContactForm" onsubmit="return submitForm();">
Name: <input type="text" name="name" value=""><br>
Email: <input type="text" name="email" value=""><br>
Message:<br> <textarea style="width: 200px; height: 100px;" name="message"></textarea>
<br>
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
<div class="form_result"></div>
</form>
However, I have 2 submit buttons (corresponding values of "One" and "Two") and would like to be able to detect which one was pressed. In a normal submit form (without ajax), the variable "Choice" is diplayed correctly with the corresponding "One" or "Two" depending on which button I clicked. But in the ajax form, the "Choice" variable only displays the same "0" (default value) regardless of which button I press.
I have tried 2 other ajax form variations but cannot seem to pass the value of the input submit button value. There must be something really basic I'm doing wrong but have tried just about everything I can think of. Any suggestions would be highly appreciated!
Since id is unique and name attribute should be unique in the same form as well, you should change:
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
to:
<input type="submit" name="ChoiceOne" id="ChoiceOne" value="One">
<input type="submit" name="ChoiceTwo" id="ChoiceTwo" value="Two">
and try again with your AJAX code. Make sure you target it properly this time :)
At the time of the submit event, jQuery.serialize() does not know which button was clicked, so it is likely skipping those buttons when generating the form data.
You'll have to process the click events for each button as well and manually pass the button value.
An alternative would be to set a hidden form field value when the user clicks a button since a button click event will get processed before the form submit.

radio buttons + input field for one of them

I tried the following but it returns two pieces of data to the server. This is a problem for my gateway, and I get an error.
I used this for one of my attempts:
<script type="text/javascript">
if( $('#other).is('):selected') )
{
// user wants to enter own value
$('[name="installments"]").not('[type="text"]').attr('name', '') // remove all
values apart from the entered text.
}
</script>
<body>
<FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
<br><br>
<input type="radio" name="installments" id="r1" checked="checked" value="99">
Open-Ended - I can stop them via email at any time.<br>
<label for="installments">number of payments</label><br>
<input type="radio" name="installments" id="other" value="Enter Custom.."><br>
<input type="text" name="installments" value="" maxlength="4" size="4">
<br><br><br>
<input type="submit" name="btnSubmit" value="Submit" />
</form>
This returns either -
installments 99
installments (empty)
or
installments Enter Custom..
installments 5
I can only have one return for the var 'installments' either 99 or the number they imputed.
I have tried various ways of doing this using JS and allowing the user to make a choice with the same results - two instances of the var 'installments' being sent.
Is there a javascript way to test the input field and if a number is entered then disable using id(s) the extra radio button so it can't send any data? Or is there a better way to do this?
Solved
I found the answer & Here it is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#user_input').change(function() {
$('#use_user_input').val($(this).val());
});
});
</script>
And Html Here:
Total number of payments...</span><br>
<input type="radio" name="installments" checked value="99">
Open-Ended -
<input id="use_user_input" type="radio" name="installments" value="">
limited number of payments -
<input id="user_input" type="text" value="" maxlength="4" size="4"></span>
You would want to give the input text field a different name from the radio inputs, then handle the text field's POST as a separate variable from the radio buttons in the HTTP request. Also, give the second radio input a value, such as "other" so you know to handle the associated text input.
If you only have the ability to receive one field from the form you will need to alter the form as the user fills it in. Currently the form works if the user selects one of the values delimited by the radio buttons. The problem, I gather, is that the status of the radio buttons overrides the value of the text field even if the user selects the "other" option of filling in the text box.
The solution is to use a script that is triggered when the user changes the content of the text box. This script will read the value of the text box and assign that value to the 'other' radio button.
We can do this using the onchange event:
<input id="otherRadio" type="radio" name="installments" value="" /><br />
<input id="otherText" type="text" value="" maxlength="4" size="4" onchange="applyOtherOption()" />
If you try this now, it will cause a javascript error on your page when you change the value of the the text field. This is because the browser fails to find a javascript function with the name applyOtherOption. Let's change that now:
<script type="text/javascript">
function applyOtherOption() {
var textField = document.getElementById("otherText");
var radioField = document.getElementById("otherRadio");
radioField.value = textField.value;
}
</script>
The result is that the "other" radio button's value is always changed to whatever the user enters into the text field and if this radio is selected, this is what is sent with the form.
Important
I've been a bit lazy here and typed out the easiest way to access the content of the form elements. This will work on most (probably all major) browsers but it is not the way it should be done. The proper method is to access the form first, then from the form element access the fields. To do it right you should read this article on setting the value of form elements.
I hope this is useful.

Categories

Resources