We Keep Coding

Form change event on checkbox click

I really cant understand what is the problem here. I want when checkbox in the form is clicked to get to the closest "h2" and to get its text.
HTML
<form action="" method="get" id="productFilterForm">
<h2 class="attribute-name">Brands</h2>
<div class="option">
<label>
<input type="checkbox" name="Royal Canin" value="163">Royal Canin
</label>
</div>
<div class="option">
<label>
<input type="checkbox" name="Brit" value="164">Brit
</label>
</div>
<div class="option">
<label>
<input type="checkbox" name="Purina Pro Plan" value="165">Purina Pro Plan
</label>
</div>
</form>
JavaScript
$(document).ready(function(){
$('#productFilterForm').on('change', 'input:checkbox', function () {
let text = $(this).closest("h2").html(); <---- UNDEFINED
//let text = $(this).find("h2").html(); <---- UNDEFINED
console.log(text);
}
});
I tried many things and methods, just cant find any element from the "input" up to the DOM tree.

try this code
$('#productFilterForm').on('change', function () {
let text = $(this).find("h2").html();
console.log(text);
})

I found a solution:
$(document).ready(function(){
$('#productFilterForm input:checkbox').on('change', function () {
let text = $(this).closest('div.option').prevAll('h2.attribute-name').html();
console.log(text);
}
});

Jquery does not set text box value

I am trying to set the value of a text box when file upload is selected , how ever it does not happen but I see correct value in alert box.
<div class="row">
<div class="col-xs-2">
<div class="file-label"><i></i>#Resources.FolderPath</div>
</div>
<div class="col-xs-4">
<input class=".form-control" name="fileText" type="text" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
<div class="col-xs-4">
<label id="fileSizeError" style="color: red"></label>
</div>
</div>
$(document).ready(function () {
$(document)
.on("change","#fileUpload",
function (e) {
alert($("#fileUpload").val());
$("#fileText").val($("#fileUpload").val());
alert("hi");
});
});
Please help me here.I am using Asp.net MVC as platform.

Your input has a name, but #fileText is an ID selector. Either add an id to it, or use an attribute selector to find it.
So either:
<input class=".form-control" id="fileText" name="fileText" type="text" />
<!-- add id------------------^^^^^^^^^^^^^ -->
or
$("[name=fileText]").val($("#fileUpload").val());
// ^^^^^^^^^^^^^^^---- use attribute selector

Try native js:
document.getElementById("fileText").defaultValue = $("#fileUpload").val();
OR
$("#fileText").attr("value", "some value");
Also;
Check to see if your original code works with replacing .val() with .text

Change content of "p" and "img" when specific radio is selected

I haven't got much experience in javascript. But I got a little slider and a lightbox, whose content should change when a specific radio is selected. So for example when the radio with id="id2" is selected, the content of the lightbox
<div class="modal">
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<img src="img/blabla.JPG">
<p>blablabla</p>
</div>
</div>
should be "blabla" and the source of the image "img/blabla.jpg".
But now when I select the 2nd radio with id="id3", the content should be "blopblop" and the source of the image "img/blopblop.jpg"...
Is that possible?
I already got a code on my website, which changes the href of a link when a specific radio is selected:
function myFunction() {
if(document.getElementById('id2').checked) {
document.getElementById('myLink').href = "infografik.html";
}
But I don't know how I should do it with "p" and "img"...
Thanks for your help!

You could use data attributes on the radio buttons like so:
<form>
<input type="radio" class="changemodal" data-src="/my/img/1.jpg" data-p="Foo!">
<input type="radio" class="changemodal" data-src="/my/img/2.jpg" data-p="Bar!">
</form>
<div class="modal">
<img id="modal_img" src="">
<p id="modal_p"></p>
</div>
You can then use attributes these in jQuery:
$('.changemodal').click(function(){
$('#modal_img').attr('src', $(this).attr('data-src'));
$('#modal_p').html($(this).attr('data-p'));
});

So I have created a working solution. You can change it to what you desire.
Working solution !
var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
document.getElementById('modal_p').innerHTML = this.value;
document.getElementById("imgSrc").src = "img/" + this.value + ".JPG";
document.getElementById('imgSrcP').innerHTML = "img/" + this.value + ".JPG";
};
}
<form name="myForm">
<input type="radio" name="myRadios" value="blabla" />Blabla
<input type="radio" name="myRadios" value="blopblop" /> Blopblop
</form>
<div class="modal">
<img id="imgSrc" src="img/blabla.JPG" />
<p id="imgSrcP"></p>
<p id="modal_p"></p>
</div>

Something like this..
$('.modal img').attr('src','blopblop.jpg');
$('.modal p').text('blopblop');

You can use $(selector).attr('src', 'image source') to dynamically change the image source and $(selector).text('new_text') to dynamically change the content of paragraph p.
The following code gives 3 radio buttons to do the required changes.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#id2").on("change", function() {
if (document.getElementById("id2").checked) { // This confirms if the radio button is selected or not
// change
$('.modal img').attr('src', 'img/blabla.jpg'); // change image source
$('.modal p').text('blabla'); // change paragraph content
}
});
// Similarly for id3
$("#id3").on("change", function() {
if (document.getElementById("id3").checked) {
// change image and paragraph
$('.modal img').attr('src', 'img/blopblop.jpg');
$('.modal p').text('blopblop');
}
});
// For id1 - returning back to default state
$("#id1").on("change", function() {
if (document.getElementById("id1").checked) {
// change image and paragraph
$('.modal img').attr('src', 'img/blablabla.jpg');
$('.modal p').text('blablabla');
}
});
});
</script>
</head>
<body>
<form action="">
<input type="radio" name="truth" id="id2" value="0">BlaBla
<input type="radio" name="truth" id="id3" value="1">BlopBlop
<input type="radio" name="truth" id="id1" value="2">BlaBlaBla
</form>
<div class="modal">
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<img src="img/blablabla.jpg">
<p>blablabla</p>
</div>
</div>
</body>
</html>

How to retrieve textbox value and label from form through jquery

I am newbie in jquery.
I want to retrieve each textbox value and label from the form. Here I am getting dynamic form in my DOM.
i am triggering form submit even in my DOM something like this and its working..
$('.wpc_contact').submit(function(event){
// here i want textbox value and label
}
I have tried with doing each() but I didn't get..
<form method="POST" id="contact" name="17" class="form-horizontal wpc_contact">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend> <div id="alert-message" class="alert hidden"></div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Name</label>
<div class="controls">
<input type="text" placeholder="Name" class="input-xlarge">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Email</label>
<div class="controls">
<input type="text" placeholder="Email" class="input-xlarge">
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Send</button>
</div>
</div>
</fieldset>
</form>
Can anyone help me?

Try this:
$('.wpc_contact').submit(function(event){
// here i want textbox value and label
$(this).find('input').each(function(){
alert('text box value:'+$(this).val());
});
$(this).find('label').each(function(){
alert('label text:'+$(this).text());
});
});
Use of $(this).find('input'): It will find all input text boxes within the form having class wpc_contact. Similarly, $(this).find('label').
DEMO Link
Requirement to get both label and value together like { label : value } pair, you can try:
$('.wpc_contact').submit(function(event){
var data = {};
$('.control-group').each(function(){
var key = $(this).find('label').text();
var value = $(this).find('input').val();
data[key] = value;
});
console.log(data); // data contains label : value pair
});
DEMO Link2

$('form input[type="text"]').each(function(){
// Do your magic here
});
If you got the form id:
$('#formId input[type="text"]').each(function(){ // Do your magic here });

Using jquery to retrieve the value easily
You have to give in html textbox id='email'
For textbox
eg.
$('#email').val('result');
For Label
eg.
$('#email').text('result');

check out this fiddle
you can use
$('.wpc_contact input').each(function () {
alert($(this).val());
});
http://jsfiddle.net/8DMy4/2/

if yo write $('.wpc_contact').each(function(){ alert($(this).attr("class")); })
it find all elements that have 'wpc_contact' class but you have one element!!!
you should use with find
$('input').each(function () { alert($(this).attr("class")); })
$.find('span').each(function () { alert($(this).attr("class")); })
if you want value:
//text box
$('input').each(function () { alert($(this).val()); })
//label
$.find('span').each(function () { alert($(this).text()); })

How to access an array of ID using an event trigger with checkboxes?

I need your help with my problem.
I created a static form. With a lots of and checkboxes. My problem is, I am integrating a javascript code for the selection of checkboxes. When the user check the parent checkboxes it will automatically check the subcategory. I can do this one by one (hardcoded). But it is a lot of work. What I think is I will put all of the IDs in an array and create a loop or event that will access them. But I don't know how. Ok that's all.
Here's my code: I am using CI and jquery 1.5
//here's the array
var checkboxParentMenu = ["checkAllFilipino","checkAllContinental","checkAllAsian","checkAllOthers"];
var checkboxChildMenu = ["filipino_cat","continental_cat","asian_cat","others_cat"];
Now here's the manual way.
$("input[data-check='checkAllFilipino']").change(function(){
$("#filipino_cat").find("input[type=checkbox]").attr("checked",this.checked);
});
Here's the pattern sample
<div id="parentTab">
<div id="categoryTab">
<input type="checkbox" />
</div>
<div id="subCategoryTab">
<input type="checkbox" />
</div>
<div id="childOfSubCategory">
<input type="checkbox" />
</div>
....
</div>

The super easy way out would be to actually nest the divs, then you could do this:
$('input[type=checkbox]').click(function () {
$(this).parent().find('input[type=checkbox]').attr('checked', $(this).attr('checked'));
});
HTML:
<div id="parentTab">
<div id="categoryTab">
<input type="checkbox" />
<div id="subCategoryTab">
<input type="checkbox" />
<div id="childOfSubCategory">
<input type="checkbox" />
</div>
</div>
</div>
</div>

One easy way out is
var checkboxParentMenu = ["checkAllFilipino", "checkAllContinental", "checkAllAsian", "checkAllOthers"];
var checkboxChildMenu = ["filipino_cat", "continental_cat", "asian_cat", "others_cat"];
$.each(checkboxParentMenu, function (idx, name) {
$('input[data-check="' + name + '"]').change(function () {
$("#" + checkboxChildMenu[idx]).find("input[type=checkbox]").attr("checked", this.checked);
});
})
But I would recommend
<input type="checkbox" data-check="checkAllFilipino" data-target="#filipino_cat" />CHECK ALL
<br/>
then
$('input').filter('[data-check="checkAllFilipino"], [data-check="checkAllContinental"], [data-check="checkAllAsian"], [data-check="checkAllOthers"]').change(function () {
$($(this).data('target')).find("input[type=checkbox]").attr("checked", this.checked);
});
Demo: Fiddle

Use prop() in place of attr() like,
var checkboxParentMenu = ["checkAllFilipino","checkAllContinental","checkAllAsian","checkAllOthers"];
var checkboxChildMenu = ["filipino_cat","continental_cat","asian_cat","others_cat"];
$.each(checkboxParentMenu ,function(i,parentChk){
$("input[data-check='"+parentChk+'").on(change',function(){
$('#'+checkboxChildMenu[i]).find("input[type=checkbox]").prop("checked",this.checked);
});
});