I want to reset the input field.
If I click "Type 1" radio button and enter value in input field and again if i select "Type 2" radio button then the existing value in the input field should be reset to empty.
<div class="samples">
<input type="radio" id="samples_1" />Type1
<input type="radio" id="samples_2" />Type2
<input type="radio" id="samples_3" />Type3
</div>
<input type="text" id="demo" value=""/>
How can I implement this in javascript/jquery.
Fiddle: http://jsfiddle.net/wYuZL/
Use this, it works. And you haven't added jquery - add jquery in jsfiddle to make it work.
$(":radio").bind("change", function (event){
$("#demo").val("");
});
How can I implement this in JavaScript/jQuery?
Assuming I understand what you're trying to do (make it so that when you click on the radio buttons, the value of the input box is cleared) then you will have to set an event handler on the elements so that we can clear the input box:
$(function() {
$("#samples > input").click(function() {
$("#demo").val("");
});
});
Related
Is it possible to add the value of a checkbox if checked into a text field?
I have this form...
http://xotio.com/photos/download/turk.html
I'm trying to add the value of a checkbox into a textbox if the checkbox has been clicked.
In my form there is one text box and three checkboxes per image (one of the checkboxes opens up more checkbox options and i'm not concerned about those color choices as much). I'm trying to add the 'value' of the three main checkboxes into the text field above. Is that possible?
the values of the checkboxes i would like are the ' lost' and ' none' and ' blurry' options and add their values to the textbox above if they get checked.
In the end I'm trying to use parsley to validate each of the textboxes for data before it submits my form. There are occasionally instances when no data is entered in the textbox, but the user has checked the right boxes and I want it to validate and can't come up with any ideas except this... any help or ideas would be great. thanks in advance and sorry for the long winded complex question.
I give you an example for your reference:
<html>
<body>
<input type="checkbox" value="lost" onclick="sendValueToTextBox(this)">lost
<br>
<input type="checkbox" value="none" onclick="sendValueToTextBox(this)">none
<br>
<input type="checkbox" value="blurry" onclick="sendValueToTextBox(this)">blurry
<br>
<input type="text" id="fg">
<script language=javascript>
function sendValueToTextBox(checkbox) {
var textbox=document.getElementById("fg");
if (checkbox.checked)
textbox.value=checkbox.value;
else
textbox.value="";
}
</script>
</body>
</html>
I am currently working on a form, where one of the segment have a dropdown selection of 2 elements and next to them are two radio buttons associated to that dropdown.
one of the radio-button is normal(non-input text box) one and the other radio-button is for custom entry input textbox.
The usecase was, user first selects a element in the dropdown and based on the selection, if the user clicks on the first radio button which has no input text box, the value for this radio-button should be assigned based on the dropdown selection..
below is my html code:
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DBUser">DBUser</option>
<option value="LDAPUser">LDAPUser</option>
</select>
</div>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
I should have a jquery code, to assign the value to the radio button..
so if the user selects 'DBUser' from the dropdown and if he selects 'AnyUser' radio button, then jquery functionality needs to assign a value which may be "AnyDBUserValue" to the radio button..
if user selects LDAPUser from the dropdown and if he selects 'AnyUser' radio button, then jquery functionality needs to assign a value for this which may be "AnyLDAPUserValue" to the radio button..
if the user wanted to enter custom value by selecting other radio button, which has input text box, then we need to discard those previous value and takes the custom values entered by the user..
I am a newbie in JQUery and so need help in writing the jquery code for this functionality...
Appreciate the help..Thanks.
First you will perform drop down event like this...
$("#authType").change(function(){
$("#authPermissionValue").val($("[type = radio]").val().split("U")[0].toUpperCase() + $("#authType").val())
})
or also like this..
$("#authType").change(function(){
$("#authPermissionValue").val("ANY" + $("#authType").val())
})
and after this you can perform radio button even like this...
$(".groupuser").on( "click", function(){
$("#authPermissionValue").removeAttr("disabled");
$("#authPermissionValue").val("");
});
That solution is totally dynamic of your requirements.
no need to add extra hard code for conditions
Below code can give you an idea how to start
$("#authType").change(function(){
})
$('input[name="authPermission"]').click(function(){
if ( $("#authType").val()=='DBUser' && $(this).val() =='anyUser'){
$(this).val('AnyDBUser');
}
if ( $("#authType").val()=='LDAPUser' && $(this).val() =='anyUser'){
$(this).val('AnyLDAPUser');
}
})
Lets say I have a form with multiple fields like this :
<form>
<input type="checkbox" name="title45" value="title45"><input type="text" name="title45" /><br>
<input type="checkbox" name="title45" value="title45"><input type="text" name="title23" /><br>
<input type="checkbox" name="title45" value="title45"><input type="text" name="title36" />
</form>
Like this, there can be up-to 100 text fields. I need a way to select several or all of them and set the value once and the selected elements will get the value. How can I do this?
I will add a checkbox infront of the fields. I want to edit only the checked ones.
just this line of jquery :
$('form input').val("fgg");
see this in action: http://jsfiddle.net/c53nqn7e/
You get/set input values with .val(). So:
$('input').val('something')
You can narrow down the inputs selected in a variety of ways, like:
$('input[type="text"]').val('something') // select all text inputs
$('input[name^="title"]').val('something') // select all inputs with a name attribute that starts with title
you can do it like this:
$( ":input" ).val("your input value");
or
$( "form input" ).val("your input value");//better because it will apply only on form
but i'll suggest add class to these inputs and based on class assign the values so you can have some discrimination.
I'm setting up a table, where each row will contain several radio boxes. There are certain conditions for the radio boxes, for example:
If "Home" is checked, the "Text" radio box will be unchecked and "Voice" will be checked instead (ie. You can't text a home phone number). Similarly, when "Home" and "Voice" are checked, clicking "Text" will force "Home" to be unchecked and "Cell" will become checked.
I can get this working fine for one instance, with the use of .getElementById and the click function, but where I run into trouble is when things are scaled up. This table might have 20 or 30 rows, each of which containing a cell with these radio boxes.
I'm not great with jQuery, so I'm not sure how to make a more general version, so that each set of radio boxes are their own contained units, so to speak. I made a jsfiddle where you can see that only the first instance is working, likely because I am targeting the boxes using their id and you can't have two elements with the same id... help? Thanks!
http://jsfiddle.net/3uHqS/
Script
$( document ).ready(function() {
document.getElementById('contact-home').onclick = function () {
document.getElementById('format-voice').checked = true;
};
document.getElementById('format-text').onclick = function () {
document.getElementById('contact-cell').checked = true;
};
});
HTML
<form>
<input type="radio" name="contact" value="" id="contact-cell" />
<label for="contact-cell">Cell</label>
<input type="radio" name="contact" value="" id="contact-home" />
<label for="contact-home">Home</label>
<input type="radio" name="format" value="" id="format-voice" />
<label for="format-voice">Voice</label>
<input type="radio" name="format" value="" id="format-text" />
<label for="format-text">Text</label>
</form>
You are going to want to assign every radio box a descriptive class like 'text-radio' or 'home-radio'. Then when you need to change all of the Text radio boxes you do something like the following in jQuery:
$(".text-radio").attr('checked', 'checked');
I have different radio button, each with a text box value associated to it on my form. A user can select only one radio button at a time and submit the form. However, occasionally a user will enter data in a textbox for one radio button and then choose a different option and enter textbox data in it. Currently it preserves data in both textboxes and submits them as well.
Is there any way I can clear the data and preserve only for the one that got clicked last? Like an onclick event which clears all the data of any other radio button other then the checked one.
just a quick static example code:
<form class="form-horizontal" id="whereEntry" method='post' action=''>
<input type="radio" name="formOption" id="radio1210" value="1210" checked="checked">Waiting on Approval<br>
Comment:<input type="text" name="Comment"><br>
<input type="radio" name="formOption" id="radio1211" value="1211" checked="checked">Waiting on Authorization<br>
Comment:<input type="text" name="Comment">
<input type="Submit" value="Submit">Submit
</form>
Textbox value are displayed when radio button is clicked. So If I click a radio button and I enter a value in the comment textbox and then if click another radio button, both the comment box values are retained.
something like this
Html MarkUp
<input type="radio" id="radio1" name="gender"/>Male
<input type="text" id="txt1">
<br />
<input type="radio" id="radio2" name="gender"/>FeMale
<input type="text" id="txt2">
Jquery
$("input:radio").click(function(){
$("input:text").not($(this).next()).val("");
})
Live Demo