Find a selector and update - javascript

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.

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

How to check uncheck checkbox all at the same time

All I want is to check / uncheck all of the choices with one check button.
<form action="process.php" method="post">
<p> Select pet: </p>
<p> <input type="checkbox" name="dog" value="dog"> Dog </p>
<p> <input type="checkbox" name="cat" value="cat"> Cat </p>
<p> <input type="checkbox" name="bird" value="Tbird"> Bird </p>
<p> <input type="checkbox" name="checkall" value="checkall"> All </p>
what code / codes am I missing? I need "All" to uncheck / check all choices if it is chosen by the user. I use xampp for this one.
You can do something like this (jQuery):
$("#checkall").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Just add the id attribute to the checkbox:
<input type="checkbox" id="checkall" name="checkall" value="checkall">
Create a class for you checkboxes and use Javascript:
<form .....>
<input type="checkbox" class="myCheckboxes" name="dog" value="dog" />
<!--rest of the checkboxes with the same class name but different names and values follow-->
<button type="button" class="checkedAll">Check All</button>
</form>
<script type="text/javascript">
(function() {
var checked = false;
$('button.checkedAll').click(function() {
checked = !checked;
$('.myCheckboxes').prop('checked', checked);
if (checked) $(this).text('Uncheck All');
else $(this).text('Check All);
});
})();
</script>
If you add an id attribute with the value "petForm" to your form element.
<form id="petForm" action="process.php" method="post">
You can use the following pure Javascript.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var form = document.getElementById("petForm");
if (form) {
var checkAll = form.querySelector("input[type='checkbox'][name='checkall']");
var checkBoxes = form.querySelectorAll("input[type='checkbox']:not([name='checkall'])");
checkAll.addEventListener("change", function(e) {
for (checkBox of checkBoxes) {
checkBox.checked = this.checked;
}
});
}
}
</script>
It adds an event listener to the document that waits for the DOM to be loaded, then identifies the form by the added id attribute. If it finds the form, then it stores the "checkall" input element and all the other input elements of type checkbox in the form in two different variables. After that it adds an on change event listener to the "checkall" checkbox input element that sets all other checkbox input elements in the form to the same value as the checkall checkbox input element.
Here's a JSFiddle of the code above running.
If your form contains additional checkboxes that you don't want checked by the checkall checkbox, you'll need to modify the way checkBoxes is populated. Similarly if you have multiple collections of checkboxes then you'll need to find a way to differentiate between them.

Onchange inside onchange jquery

Im having trouble having code onchange inside onchange event.
some works and some dont work due to that.
<script>
$(document).on('change', '.sellkop', function() { // this is radio button
if ($("#rs").is(':checked')) {
$("#text_container").after(price_option());
};
if ($("#rk").is(':checked')) {
$("#price_container").remove();
$("#licensenumber_c").css({"display": 'none'
});
};
});
$('#category_group').on('change', function() { // this is select options
if ($(this).val() == 101) {
$("#underKategory").css({"display": 'none'});
$("#modelcontainer").remove();
$(".toolimage").css({ "display": 'block'});
$('.sellkop').on('change', function() { // this is radio button
if ($("#rs").is(':checked')) {
$("#licensenumber_c").css({"display": 'block'});
$(".toolimage").css({"display": 'block' });
} else {
$(".toolimage").css({"display": 'none'});
}
});
} else {
$(".bilar").remove();
$(".toolimage").css({ "display": 'none'});
}
if ($(this).val() == 102) {
$(".houses_container").remove();
$(".toolimage").css({"display": 'none'});
$("#underKategory").css({"display": 'inline-block'});
$("#modelcontainer").remove();
}
///............many other values continue
});
</script>
i know there is better way to manage this code and simplify it , how can i do it ?
EDIT:
what i want is : if i select an option , then get values to that option, then under this category option there is radio buttons , then every check button i need to get some data displayed or removed
here is a fiddle there looks my problem by jumping from categories when i select buy or sell , so
if i select category-->check buy -->then select others . i dont get same result as if i select directly cars ---> buy
I have never resorted to even two answers before (let alone three), but based on all the comments, and in a desire to keep things simple another solution is to data-drive the visibility of other items based on selections, using data- attributes to store the selectors on the options and radio buttons.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/4s5rwce2/28/
e.g the HTML for the select becomes
<select name="category_group" id="category_group">
<option value="0">choose category</option>
<option value='101' id='cat101' data-show="#sellbuy,.cars,.toolimage,#licenscontainer">cars</option>
<option value='102' id='cat102' data-show="#sellbuy,#underKategory">others</option>
</select>
and the radio buttons like this:
<input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked' data-show="#price_container,.cars,.toolimage"/>
The code becomes very simple then, simply applying the filters specified in the selected items.
$(document).on('change', '.sellkop', function () { // this is radio button
// Hide defaults
$("#price_container,.cars,.toolimage").hide();
// Show the items desired by the selected radio button
$($(this).data("show")).show();
});
$('#category_group').on('change', function () { // this is select options
// Get the various possible data options and decide what to show/hide based on those
var $this = $(this);
var value = $this.val();
// Get the selected option
var $li = $('option[value='+ value+']', $this);
// Hide all the defaults first
$('#licenscontainer,.cars,.toolimage,.sell,#underKategory').hide();
// Now show any desired elements
$($li.data('show')).show();
// Fire change event on the radio buttons to ensure they change
$('.sellkop:checked').trigger('change');
});
This is a very generic solution that will allow very complex forms to turn on/off other elements as required. You can add data-hide attributes and do something similar for those too if required.
Note: This was an attempt to fix the existing style of coding. I have posted an alternate answer showing a far simpler method using hide/show only.
A few problems.
If you must nest handlers, simply turn them off before you turn them on. Otherwise you are adding them more than once and all the previously recorded ones will fire as well.
Your HTML strings are invalid (missing closing </div>)
You can simply use hide() and show() instead of all the css settings. You should use css styling for any specific element styling requirements (e.g. based on classes).
You need to replace specific divs, rather than keep using after, or you progressively add more html. For now I have use html to replace the content of the #text_container div.
HTML in strings is a maintenance nightmare (as your example with missing </div> shows). Instead use templates to avoid the editing problems. I use dummy script blocks with type="text/template" to avoid the sort of problems you have found. That type means the browser simply ignores the templates.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/4s5rwce2/17/
HTML (with templates)
<script id="saljkop">
<div class='sex sell' id='sellbuy' >
<label ><input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked'/> Sell </label>
<label ><input id='rk' type='radio' class='radio sellkop' value='k' name='type'/>buy</label>
</div>
</script>
<script id="price_option">
<div class="container" id = "price_container">
<div>
<label><input class="price_option" name="price_opt" value="1" type="radio"/> Fix </label>
<label class="css-label"><input class="price_option" name="price_opt" value="2" type="radio"/> offer </label>
</div>
</div>
</script>
<script id="cars">
<div class="cars" >
<div id="licenscontainer" ><div id="licensenumber_c">
<input id="licensenumber" placeholder="Registrer number" type="text" value="" />
</div>
</div>
</div>
</script>
<div id="categories">
<select name="category_group" id="category_group">
<option value="0">choose category</option>
<option value='101' id='cat101'>cars</option>
<option value='102' id='cat102'>others</option>
</select>
</div>
<div id="underKategory">sthis is subcategory</div>
<div id="toolimage1" class="toolimage">dddddd</div>
<div id="text_container" class="text_container">textttttt</div>
New jQuery code:
$(document).on('change', '.sellkop', function () { // this is radio button
console.log('.sellkop change');
if ($("#rs").is(':checked')) {
$("#text_container").html($('#price_option').html());
};
if ($("#rk").is(':checked')) {
$("#price_container").remove();
$("#licensenumber_c").hide();
};
});
$('#category_group').on('change', function () { // this is select options
if ($(this).val() == 101) {
$(".sell").remove();
$("#categories").after($('#saljkop').html());
$("#sellbuy").after($('#cars').html());
$("#text_container").html($('#price_option').html());
$("#underKategory").hide();
$(".toolimage").show();
$('.sellkop').off('change').on('change', function () { // this is radio button
if ($("#rs").is(':checked')) {
$("#licensenumber_c").show();
$(".toolimage").show();
} else {
$(".toolimage").hide();
}
});
} else {
$(".cars").remove();
$(".toolimage").hide();
}
if ($(this).val() == 102) {
$(".sell").remove();
$("#categories").after($('#saljkop').html());
$("#text_container").html($('#price_option').html());
$(".toolimage").hide();
$("#underKategory").show();
}
///............many other values continue
});
Now if you prefer to not nest handlers (recommended), just add to your existing delegated event handler for the radio buttons:
$(document).on('change', '.sellkop', function () { // this is radio button
console.log('.sellkop change');
if ($("#rs").is(':checked')) {
$("#text_container").html($('#price_option').html());
$("#licensenumber_c").show();
$(".toolimage").show();
};
if ($("#rk").is(':checked')) {
$("#price_container").remove();
$("#licensenumber_c").hide();
$(".toolimage").hide();
};
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/4s5rwce2/20/
Note: This was a second answer, hoping to simplify the overall problem to one of hiding/showing existing elements. I have posted a third(!) answer that takes it to an even simpler scenario using data- attributes to provide the filter selections.
I am adding a second answer as this is a complete re-write. The other answer tried to fix the existing way of adding elements dynamically. I now think that was simply a bad approach.
The basic principal with this one is to have very simple HTML with the required elements all present and simply hide/show the ones you need/ Then the selected values are retained:
This uses the multi-structure to effectively hide.show the licence field based on two separate conditions.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/4s5rwce2/23/
Html (all element s present, just the ones you do not need hidden):
<div id="categories">
<select name="category_group" id="category_group">
<option value="0">choose category</option>
<option value='101' id='cat101'>cars</option>
<option value='102' id='cat102'>others</option>
</select>
<div class='sex sell' id='sellbuy' style="display: none">
<label>
<input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked' />Sell</label>
<label>
<input id='rk' type='radio' class='radio sellkop' value='k' name='type' />buy</label>
</div>
<div class="cars" style="display: none">
<div id="licenscontainer">
<div id="licensenumber_c">
<input id="licensenumber" placeholder="Registrer number" type="text" value="" />
</div>
</div>
</div>
</div>
<div id="underKategory">sthis is subcategory</div>
<div id="toolimage1" class="toolimage">dddddd</div>
<div id="text_container" class="text_container">
<div class="container" id="price_container" style="display: none">
<div>
<label>
<input class="price_option" name="price_opt" value="1" type="radio" />Fix</label>
<label class="css-label">
<input class="price_option" name="price_opt" value="2" type="radio" />offer</label>
</div>
</div>
</div>
jQuery:
$(document).on('change', '.sellkop', function () { // this is radio button
if ($("#rs").is(':checked')) {
$("#price_container").show();
$(".cars").show();
$(".toolimage").show();
};
if ($("#rk").is(':checked')) {
$("#price_container").hide();
$(".cars").hide();
$(".toolimage").hide();
};
});
$('#category_group').on('change', function () { // this is select options
if ($(this).val() == 101) {
$(".sell").hide();
$("#sellbuy").show();
$(".cars").show();
$("#underKategory").hide();
$(".toolimage").show();
$('#licenscontainer').show();
} else {
$('#licenscontainer').hide();
$(".cars").hide();
$(".toolimage").hide();
}
if ($(this).val() == 102) {
$(".sell").hide();
$("#sellbuy").show();
$(".toolimage").hide();
$("#underKategory").show();
$(".cars").hide();
}
$("#price_container").toggle($("#rs").is(':checked'));
///............many other values continue
});

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

problem with jquery for add cart button

hi i have a problem with displaying amount.i have the page called make payment in this page i made three radio buttons, if i click the button that amount must add with addcart like a product.
<form method="post" form name="make_payment_frm" action="module/make-payment-module.php" onsubmit="return show_make_payment_validation();" >
<form id='theForm'>
<input type="hidden" name="totalamount" id="totalamount" value="1" />
input type="radio" name="rmr" id="payment1" value="3" onclick="updatepayment(this.value)" />
input type="radio" name="rmr" id="payment2" value="5.5" onclick="updatepayment(this.value)"/>
input type="radio" name="rmr" id="payment4" value="10" onclick="updatepayment(this.value)"/>
div id="finalamount">
/div>
i think that problem is my js script. if i click that button there is no response. how do i solve that problem
you guys can give me any idea
$(document).ready(function() {
$(".cart :radio[name='rmr']").add(".cart :radio[name='rmr']").each(function() {
$(this).click(function() {
$(".cart :radio[name='rmr']").add(".cart :radio[name='rmr']").each(function() {
$(this).attr("checked", false);
});
$(this).attr("checked", true);
});
});
})
function updatePayment(val) {
$("<p/>").html("updatePayment(" + val + ")").appendTo(document.body);
}
thanks.have a nice day
I have no idea why you seem to be implementing the selecting and un-selecting of radio buttons in jQuery, surely HTML will handle that correctly for you.
However if you are using jQuery, do away with those onclick attributes since that is the benefit of jQuery and achieve the same result as follows:
$(function() {
$('.cart :radio[name="rmr"]').change(function() {
if ($(this).is(':checked'))
updatePayment(this.value);
});
});
This will attach a change event to every radio button input with the attribute name="rmr". Thus when the client clicks a new radio button, the value of two radio buttons will change, and the one that is then selected will call the updatePayment function with its value.

Categories