How can I get the name of the select tag?
I have several select menus. I can retrieve the submitted options. However, I would like to get the name, or even better, the ID of the select tag that holds the options.
Sample HTML:
<div id="prodAttributes_2">
<form id="attributesubmit">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<div role="heading" >Options:</div>
<select name="Memory" id="4">
<option value="3">16 mb</option>
<option value="4">32 mb</option>
</select>
<select name="Model" id="3">
<option value="6">Premium</option>
<option value="7">Deluxe</option>
</select>
</fieldset>
</div>
<input type="button" id="submitme" value="send" />
</form>
</div>
Solved Fiddle: JSFiddle
Add
var name = $(this).attr("name");
to your $('select').each call: http://jsfiddle.net/xPGUE/
You can use this.id within the each().
Note you can get the name with $(this).attr('name')
I've forked your jsfiddle
in your fiddle, where you get the alert
alert('Value: ' + selectedOption.val() + ' Text: ' + selectedOption.text());
you can access to the name or id of the option using
selectedOption.attr('name')
selectedOption.attr('id')
Try this:
$('select').each(function() {
alert($(this).attr('name'));
});
Related
I have some code as the following example:
<form>
<label>name</label><input type="text" />
<label>phone</label><input type="text" />
<label>color</label><select>
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
<label>e-mail</label><input type="text" />
</form>
And I want to duplicate only the select section if the user needs it via button between the select section and the e-mail input field.
I'm not really into JavaScript or jQuery so it would very appreciated if you could also add a clear explanation to your answer.
You can use JQuery clone function to clone your element and then append it where you need it, or if you need to have a different id for each section you need you might want to save an index and set it as an id each time you add a section
var index = 1;
function addColor() {
var nextSection = '<div id="color-section-' + index++ + '">' +
'<label>color</label>' +
'<select>' +
'<option>red</option>' +
'<option>blue</option>' +
'<option>green</option>' +
'</select><br />' +
'</div>';
$(nextSection).appendTo($("#color-section"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
<label>name</label><input type="text" /><br />
<label>phone</label><input type="text" /><br />
<div id="color-section">
<label>color</label>
<select>
<option>red</option>
<option>blue</option>
<option>green</option>
</select><br />
</div>
<label>e-mail</label><input type="text" /><br />
</form>
<button onClick="addColor()">Add Color</button><br />
You can use clone() to copy an element. See below example with an explanation.
A div element with name "color-selections" contain a initial select tag.
<div class="color-selections">
<select>
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
</div>
There will be unknown number of select tag inside the "color-selections" class. So i use first() method to get first element (Original select tag).
$(".color-selections select:first")
Copy the first element using clone().
$(".color-selections select:first").clone()
Finally, Append this clone element into "color-selections" class using appendTo() method.
$(".color-selections select").first().clone().appendTo(".color-selections");
function addColor() {
$(".color-selections select:first").clone().appendTo(".color-selections")
//OR $(".color-selections select").first().clone().appendTo(".color-selections");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>name</label><input type="text" />
<label>phone</label><input type="text" />
<label>color</label>
<div class="color-selections">
<select> //$(".color-selections select:first")
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
</div>
<input type="button" value="+" onclick="addColor();">
<label>e-mail</label><input type="text" />
</form>
I hope design is not an important part of sample code.
i am trying to loop through the radio buttons by name with 'each' function..the each function is not working and it is applying the logic only once and it is not looping for the next time..
My use case is, when user selects value from the select dropdown, needs to enable both the radio buttons and if the user deselects the dropdown- needs to disable back..
Here in my case, each function is looping only once and after that it is getting exit from it..Need help in figuring disable/enable based on dropdown selection..
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="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
jquery:
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(){
$("#authPermission").prop('disabled',false);
$("#authPermission").prop('checked',false);
});
}
else{
$("#authPermission").each(function(){
$("#authPermission").prop('disabled',true);
$("#authPermission").prop('checked',false);
});
}
});
You cannot have more than one element with the same ID. So, I would change your code by removing the id attribute and putting a new value for the class attribute, then fetch the object using jquery class selector.
<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="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser authPermission" value="anyUser" name="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser authPermission" value="groupUser" name="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
And jQuery code :
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(elemId, elem){
$(elem).prop('disabled',false);
$(elem).prop('checked',false);
});
}
else{
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
}
});
But, if we take a better look at your code, I do not understand why you want to use "each". You can achieve the same thing without it :
// Following code :
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
// Does the same thing as this one :
$(".authPermission").prop('disabled', true).prop('checked', false);
I refactored your code. Also enables the input field when the appropriate radio is clicked. This sould work:
function updateUI() {
var select = $("#authType");
var value = select.val();
var should_appear = (value.length == 0);
$("input:radio[name='authPermission']").attr('disabled',should_appear);
}
//binding...
$("input:radio").on("click", function() {
var should_display_textbox = !($(this).val() === "groupUser");
console.log(should_display_textbox);
$("input:text[name='authPermissionValue']").attr('disabled', should_display_textbox);
});
$("#authType").change(function(){
updateUI();
});
$(document).ready(function() {
updateUI(); //update also when page load
});
Something like this maybe?
$("#authType").change(function(){
var disabled = !$(this).val() ? true : false;
$("input:radio[name='authPermission']").each(function(){
$(this).prop('disabled', disabled );
$(this).prop('checked',false);
});
});
I need to change value on a div according to selection in drop down box - tried this code but script does not seem to work
HTML dropdown list:
<form action="https://ccart.com/cart" method="post">
<input type="hidden" name="name" value="T-shirt" />
<input type="hidden" name="price" value="54" />
<select name="size" id="Field">
<option value="1{p-50}">Small</option>
<option value="2{p-24}">Medium</option>
<option value="3">Large</option>
</select>
<input type="submit" value="Lets go" class="cart"/>
</form>
<div id="1" class="box">4</div>
<div id="2" class="box">30</div>
<div id="3" class="box">54</div>
I tried using:
$(document).ready(function () {
$('.box').hide();
$('#1').show();
$('#Field').change(function () {
$('.box').hide();
$('#' + $(this).val()).show();
});
});
Jquery called:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
Dropdown working fine but cannot get to show div.
Working fine now but problems changing id from numeric to string as recommended
<option value="Small{p-50}">Small</option>
<option value="Medium{p-24}">Medium</option>
<option value="Large">Large</option>
<div id="Small" class="box">4</div>
<div id="Medium" class="box">30</div>
<div id="Large" class="box">54</div>
Code:
$('.box').hide();
$('#Small').show();
$('#Field').change(function () {
$('.box').hide();
$('#' + parseInt($(this).val())).show();
});
If i leave original id values of 1,2 etc it works perfect
It's failing because of this:
<option value="1{p-50}">Small</option>
<option value="2{p-24}">Medium</option>
Because none of your divs have an ID attribute of #1{p-50} it won't be shown.
Unless the {p-50} or {p-24} are used for anything, just change them to this:
<option value="1">Small</option>
<option value="2">Medium</option>
JSFiddle
Also, as Sarfraz Mentioned, your IDs should also not be a number alone.
Well values of the dropdown items doesn't match ID's of your divs. If you really want to use them anyway you should use parseInt:
$('.box').hide();
$('#1').show();
$('#Field').change(function () {
$('.box').hide();
$('#' + parseInt($(this).val())).show();
});
parseInt will parse 1{p-50} to 1 and everything will work.
Note: since numeric ids is not valid in HTML4 you should make sure your define HTML5 doctype which is more tolerant about numbers as identifiers.
I need to submit a Collection (set, list, array) with objects that consists of:
id, phoneNumber, phoneType
I have a bunch of divs, here's some example HTML:
<div id="f9" class="facilityBox">
<div style="float:left;">
<label>BRANCH</label>
</div>
<div style="float:right;"> Save changes
</div>
<div class="phoneSet">
<input type="text" value="787-788-1111" class="phones" name="number" />
<select class="phoneType" name="type">
<option selected="selected" value="PHONE">Phone</option>
<option value="FAX">Fax</option>
</select>
<input type="hidden" value="6" class="phoneId" name="id" />
</div>
<div class="phoneSet">
<input type="text" value="787-795-4095" class="phones" name="number" />
<select class="phoneType" name="type">
<option value="PHONE">Phone</option>
<option selected="selected" value="FAX">Fax</option>
</select>
<input type="hidden" value="106" class="phoneId" name="id" />
</div>
</div>
This div's id will be f+identifier, so for now it's f9
the js I have so far is:
Location.submitUpdateFacility = function (facilityId) {
$("#updateFacility input[name=index]").val(facilityId);
var id = facilityId;
var phones;
$("#" + id + " .phoneSet").each(function () {
phones += {
id: $(".phoneId input[name=id]").val(),
phoneNumber: $(".phones input[name=number]").val(),
phoneType: $(".phoneType select[name=type]").selected().val()
};
});
};
My problem is upon Firebug/Chrome console debugging, it does not go into the loop and thus no array is ever created. What am I doing wrong?
The problem looks to be that you are passing "9" in as the function parameter that is then being converted to a jquery selector as "#" + id + " .phoneSet". This is generating "#9 .phoneSet" which is incorrect.
You should be using "#f" + id + " .phoneSet".
It should also be noted that the other selectors that you use (eg ".phoneId input[name=id]") may also need correcting before this works fully as you expect.
What I want to do is get data from drop down and pass the data to textbox
here is my dropdown and textbox code
<select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: none;">
<option value=""></option>
<option value="1" data-id="10">a</option>
<option value="2" data-id="20">b</option>
<option value="3" data-id="30">c</option>
<option value="4" data-id="40">d</option>
<option value="5" data-id="50">e</option>
</select>
<div class=" control-group formSep template">
<label for="input01" class="control-label">Category Rate*:</label>
<div class="controls">
<input id="title" name="criteria_rate" size="30" type="text" class="criteria_rate span2" value="" readonly="readonly" />
</div>
</div>
here is how to get data-id from dropdown
var criteria_id = $(this).attr('data-id');
here is how to pass data to textbox
$('.criteria_rate').val(criteria_id);
here is my dropdown screenshot
Any idea how to solve my problem?
Here is what you need (I think)
FIDDLE
$('#chosen_a').change(function() {
$('#title').val($('#chosen_a option:selected').data('id'));
})
This is the most simple way
$(document).ready(function () {
$("#chosen_a").change(function () {
$('#title').val($("#chosen_a").val());
});
});
Try this:-
$('#chosen_a').change(function(){
//get the selected option's data-id value using jquery `.data()`
var criteria_rate = $(':selected',this).data('id');
//populate the rate.
$('.criteria_rate').val(criteria_rate);
});
Fiddle
Refer .data()
Here is a possible solution, uses jquery but get the data through the event data instead of using jquery.data (notice that it is a few characters shorter doing it this way :P )
$("#chosen_a").on("change", function (evt) {
$("#title").val(evt.target.selectedOptions[0].dataset.id);
});
Demonstrated on jsfiddle
(gave an alternative as I misread the question initially, so now I'm a little late with my correction)