jQuery / Javascript Prompt with Select inside - javascript

title seems clear enough, but we never know.
here's my problem, i got a serie of checkbox, each one is associated to a list of choices.
ie:
Checkbox1
=> Opt1
=> Opt2
Checkbox2
=> Opt1
=> Opt2
etc.., (with about a dozen options per checkbox)
what i need to do is:
when user check a box, a prompt appear with a Select inside and the result is send as the value of the checkbox.
i've tryed some plugins (ie:jQuery Impromptu) but they all auto-close my select tag wich output something like that
<select></select><option></option><option></option>
anyone got a solution?

HTML
<input type="checkbox" id="chk1"><select style="display: none;" id="sel1"><option>.........</select>
<input type="checkbox" id="chk2"><select style="display: none;" id="sel2"><option>.........</select>
<input type="checkbox" id="chk3"><select style="display: none;" id="sel3"><option>.........</select>
JS
$(document).ready(function()
{
$('input[type="checkbox"').click(function()
{
if($(this).checked)
{
$('#sel'+$(this).attr('id').toString().replace('chk', '')).show();
}
else
$('#sel'+$(this).attr('id').toString().replace('chk', '')).hide();
});
$('select').change(function(){
$('#chk' + $(this).attr('id').toString().replace('sel', '')).val($(this).val());
});
});
I hope this helps.

Related

How can I set the value of an input the same as the value of the radio selected?

var value = $(".radioc").attr("value");
$("input[name=user-type]").change(function() {
$(".input-txt-choose").val(value).toggle(this.value === value);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radioc" name="user-type" value="Brand">Brand
<input type="radio" class="radioc" name="user-type" value="Store">Store
<input type="text" class="input-txt-choose" value="">
Show the value (.radioc) in the input (.input-txt-choose), when I select the radio (.radioc)
When I select the option "Store", input (.input-txt-choose) hides.
this is my fiddle
$("input[name=user-type]").change(function(){
$(".input-txt-choose").val($(this).val());
})
The input will disappear because the function .toggle() is used to hide/show an element by jquery.
jquery toggle
You are getting the radio hide because of the toggle implemented, so please use the below code this will solve your purpose.
$(document).on("click", ".radioc", function () {
$(".input-txt-choose").val($('.radioc:checked').val());
})

Find a selector and update

I have a three different radio buttons and based on the selection of the radio button I would like to capture which radio button the user clicked and store that in a hidden input textbox for later use.
Here is the code I have tried, which doesn't seem to be working:
//clicked on first radioButton:
$('#Employee').change(function () {
if (this.checked) {
$('#multi').show();
$('#Type').attr("EmployeeSelected");
}
});
//clicked on second radioButton:
$('#Employer').change(function () {
if (this.checked) {
$('#multi').show();
$('#Type').attr("EmployerSelected");
}
});
My page looks like this:
<fieldset id="multi" class="fieldset-auto-width">
<legend>
Selected Form
</legend>
<form action="/PostToDb" method="post">
<input type="text" name="Type" value="xx" />
<div>
......................
</div>
</form>
How do I update the textbox to whichever radio button is selected?
$("input:radio[name=emp]").change(function () {
if ($(this).val()==0) {
$("input:text").val('first radio');
}else if ($(this).val()==1) {
$("input:text").val('second radio');
}else if ($(this).val()==2) {
$("input:text").val('third radio');
}
});
FIDDLE
$('#Employer')--> when using # you will be selecting id as for . it is for class and so on.
$('#Type').attr("EmployerSelected"); to assign a text to input use val() as $('#Type').val("EmployerSelected"); meaning the element with id Type will have the value EmployerSelected
Try replacing .attr() with .val() and use the correct selector as follows:
$('[name="Type"]').val("EmployerSelected");
Try add id attribute to the input box,as
<input id="Type" type="text" name="Type" value="xx" />
hope helpful.

I want to use the text of radio inputs. How can i get it using jQuery or JavaScript

I want to use the text 5 and 6 shown below. I cant modify the html as it is auto-generated and there are many other radios with the same structure. How can i achieve this using jQuery or JavaScript and store them as variables.
<label class="radio">
<label style="display: none;">
<input type="radio" name="x_keeper1_price" id="x_keeper1_price_0" value="21"/>
</label>
5
</label>
<label class="radio">
<label style="display: none;">
<label style="display: none;">
<input type="radio" name="x_Defd5_price" id="x_Defd5_price_0" value="28"/>
</label>
</label>
6
</label>
If your text after the radio button is html code, this is a better solution:
var text = $("#x_keeper1_price_0") //the radio button
.closest("label.radio") //the label with class=radio)
.html() //the html code
.replace(/<label[\d\D]+<\/label>/, '');
/* Removing the "second" label and its content.
That will get the text after the radio button. */
alert(text);
jsfiddle: http://jsfiddle.net/72KcV/3/
For this specific markup, you can use the following jQuery code:
$('label.radio').each(function(){
console.log($(this).contents()[2].nodeValue)
});
http://jsfiddle.net/eKG22/
You can do the following
$('.radio').text()
see a working solution here: http://jsfiddle.net/TfP5X/
Because we are using a class to select the text, you might want to loop over the selector and do something with each value like so.
var items = $('.radio');
$.each(items, function(i, item) {
var text = $(item).text();
//do something with text
});

Selected Checkbox disables the selection of another checkbox

I have a reason to use checkboxes instead of radio buttons so please don't suggest I use radio buttons but need to duplicate the functionality. However when I select the Yes checkbox, it disables the No checkbox for some reason. When no is selected I want to hide the div and deselect Yes, and the opposite when I select Yes I want to show the div and uncheck NO. The only way I can select NO when Yes is checked is to uncheck it.
Working demo Here
JS Fiddle not working Here
Javascript
function injure() {
if (document.getElementById("f2").checked == true) {
document.getElementById("LocFall").style.display="block";
document.getElementById("f1").checked = false;
} else {
if (document.getElementById("f1").checked == true) {
document.getElementById("LocFall").style.display="none";
document.getElementById("f2").checked = false;
}
}
}
CSS
#LocFall {
display:none;
}
HTML
<input type="checkbox" id="f1" name="" onclick="injure();">
<label for="f1"> No </label><BR>
<input type="checkbox" id="f2" name="" onclick="injure();">
<label for="f2"> Yes</label><BR>
<div id="LocFall">
Show some stuff
</div>
http://jsfiddle.net/6NN6s/14/
<input type="checkbox" id="f1" name="same" onclick="injure(this);" />
<label for="f1">No</label>
<BR>
<input type="checkbox" id="f2" name="same" onclick="injure(this);" />
<label for="f2">Yes</label>
<BR>
<div id="LocFall">Show some stuff</div>
function injure(cmb) {
if (cmb.checked) {
if(cmb.id==="f2")
{ document.getElementById("LocFall").style.display = "block";
document.getElementById("f1").checked = false;
}
else
{
document.getElementById("LocFall").style.display = "none";
document.getElementById("f2").checked = false;
}
}
}
try this out, may be what you need.
In Fiddle change on the left in second drop-down list 'onLoad' to 'no wrap - in <head>'.
Split injure into a different function for each; if you choose No, then you cannot choose Yes because of the way your function is set up - the first condition will always evaluate as true.
The problem stems from not knowing which checkbox was actually clicked inside the function. As it is there's only two different ways the function can respond: one if f1 is checked and one if f2 is checked. The problem is there's actually more possible states that you're trying to represent.
State 1: Nothing checked, user clicks f1 or f2
State 2: f1 checked, f2 clicked
State 3: f2 checked, f1 clicked
Your code handles the first state fine but it can't deal properly with the second ones. If you split your code into two seperate functions to handle each box then you'll have all the necessary information to write correct decision logic.
There's also the states of clicking the same box, but they are simple and your code handles them already.

List of checkboxes not getting selected

I have a checkbok as selectAll
Select All
<input class="all-select" type="checkbox" value="" name="">
i also have a list of friends with a checkbox each which is populated dynamically.
<ul>
<li><span><img src="img.src" ></span><strong>Name</strong>
<br />Email
<input name="" type="checkbox" value="" class="chk-box">
</li>.....</ul>
when i click the select all checkbox, then all the checkboxes of my list should get selected, the javascript code for which is given below :
$("#slide_top_pop").on("click", ".all-select", function (event) {
if ($(this).is(':checked')) {
$('input.chk-box').attr('checked', true);
} else {
$('input.chk-box').attr('checked', false);
}
});
Now the problem is this that when i first time select the Select All check box then the list get selected but when i unchecked it and check again then the list is not selected and when i tried to verify it on Mozilla what is the checked property(attribute) for the list then i get this :
<input class="chk-box" type="checkbox" value="" name="" checked="checked">
which says that the checkbox is selected but i cant see the selected tick in the list.
I dont understand what the problem is .
any solution is appreciated thanks.
Use .prop() instead of .attr() like:
$("#slide_top_pop").on("click", ".all-select", function (e) {
$('input.chk-box').prop('checked', this.checked);
});

Categories