Why is "this.getAttribute()" returning null? - javascript

I'm working with dynamic fields and I want to sort the fields into a JS object. But when I call getAttribute, it returns null.
Here, q2 is the ID that I want to print off for testing. It prints off the value successfully (and its children for some reason), but getAttribute is null.
<div class="input-group" data-question-id = nVar id = q2>
----
$( "#qForm" ).submit(function( event ) {
$('#q2 input').each(function () {
console.log(this.value);
console.log(this.getAttribute("data-question-id"))
nVar is a variable ID that I iterate when I add a field.
Thanks!

$('#q2 input') doesn't point to the element that has the data-question-id attribute. Assuming the input is a direct child, you need to use this.parentNode instead:
$(document).ready(function() {
$('#q2 input').each(function() {
console.log(this.value);
console.log(this.parentNode.getAttribute("data-question-id"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group" data-question-id="5" id="q2">
<input type="text" value="hello world!">
</div>
Note that it's generally considered better not to mix JS and jQuery constructs where you can remain consistent. For example, staying with jQuery:
$(document).ready(function() {
$('#q2 input').each(function() {
console.log($(this).val());
console.log($(this).parent().data("question-id"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group" data-question-id="5" id="q2">
<input type="text" value="hello world!">
</div>
or in pure JS:
window.onload = function() {
document.querySelectorAll('#q2 input').forEach(function(el) {
console.log(el.value);
console.log(el.parentNode.getAttribute("data-question-id"));
});
};
<div class="input-group" data-question-id="5" id="q2">
<input type="text" value="hello world!">
</div>

Related

jQuery filter with imputs (include / inside checkbox)

I would like to ask if anyone knows how to solve my problem. Filtering works for every other (I want to use case insensitive), but the checkbox does not appear after searching for "food". I need to create a list of categories with checkboxes. If you search for a category, you can immediately check the checkbox
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</head>
<body>
<h2>Filter</h2>
<!--Type something in the input field to search for a specific text inside the div element with id="myDIV" -->
<input id="myInput" type="text" placeholder="Search..">
<div id="myDIV">
<p>dog</p>
<div>master20</div>
<button>Button</button>
<p>Welcome5</p>
<label class="important_class_for_me">Food
<input type="checkbox">
<span class="my_custom_checkmark"></span>
</label>
</div>
</body>
</html>
The problem is character *, selector $("#myDIV *"). By specifying this character you are referring to all children as parent - child - child - child ....
You only need to reference the first child of parent #myDIV. Replace * with >. Like that:
$("#myDIV >").filter(function() { ... }
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myDIV >").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Filter</h2>
<!--Type something in the input field to search for a specific text inside the div element with id="myDIV" -->
<input id="myInput" type="text" placeholder="Search.." />
<div id="myDIV">
<p>dog</p>
<div>master20</div>
<button>Button</button>
<p>Welcome5</p>
<label class="important_class_for_me">
Food
<input type="checkbox" />
<span class="my_custom_checkmark"></span>
</label>
</div>
You are hiding every element inside myDIV, not only the intimidate child.
it happens that :
<input type="checkbox">
<span class="my_custom_checkmark"></span>
both are child and they do not have .text() so they will toggle.
Instead, just do the filter by the intimidate child by changing $("#myDIV *") to $("#myDIV > *")

How do you set the text from an input to another element after clicking submit?

For example when somebody inputs text and presses submit I want the text to be displayed in an h1 tag.
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
$(document).ready(function() {
$('btn1').click(function() {
$('#test').text($("#message").val());
});
});
$(document).ready(function() {
$('#btn1').click(function() {
$('#test').text($("#message").val());
//--> if you want to remove the value of the input after parsing the code, simply check if
//--> not `null` or not `undefined` by placing the selector.val() in your if conditional...
if($("#message").val()){
$("#message").val('');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="message"> Message:</label>
<input type="text" id="message" name="message" class="m3">
<button id="btn1" class="butt">Ready to Send?</button>
<h1 id="test">Header</h1>
</div>
You did not add the # selector in JQuery for ID
$(document).ready(function() {
$('#btn1').click(function() {//<-- Make sure to add the ID selector # in Jquery
$('#test').text($("#message").val());
});
});
$(document).ready(function () {
$('#btn1').click(function (e) {
e.preventDefault();
$('#test').html($("#message").val());
});
});
This would work fine, but like #Teemu says this removes the form functionality. If you want to add a check mechanism you can use something like this:
$(document).ready(function () {
$("#message").keyup(function() {
$("#test").html($("#message").val());
});
});

use a dynamic jQuery function for more than one Field and div

I have a jQuery code that gets the value of the text input and add its value to a div class. while following code works fine, i am trying to find out how to make this function work more dynamic for more than one text input and more than one divs, without copying the same script for each input and div again and again.
jQuery(document).ready(function($) {
function checkForInput(element) {
var value = $('.my-input-1').val();
$("#myDiv_1").removeClass().addClass(value);
}
$('input.my-input-1').on('change keyup', function() {
checkForInput(this);
});
});
jQuery(document).ready(function($) {
function checkForInput(element) {
var value = $('.my-input-2').val();
$("#myDiv_2").removeClass().addClass(value);
}
$('input.my-input-2').on('change keyup', function() {
checkForInput(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>
You can use an attribute for each input that its value represents the id of the div
jQuery(document).ready(function($) {
$('input.class-input').on('change keyup', function() {
const $this = $(this);
const value = $this.val();
const divId = $this.data('for');
$(`#${divId}`).removeClass().addClass(value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="class-input" value="" data-for="myDiv_1">
<input type="text" class="class-input" value="" data-for="myDiv_2">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>
In case if you don't want to have identical classes for input elements.(As per your code.) Hope it helps.
jQuery(document).ready(function($){
function checkForInput(elementClass,elementValue) {
var inputNumber= elementClass.substr(elementClass.length-1);
var divclass='#myDiv_'+inputNumber;
$(divclass).removeClass().addClass(elementValue);
}
$('input.my-input-1').on('change keyup', function() {
checkForInput($(this).attr('class'),$(this).val());
});
$('input.my-input-2').on('change keyup', function() {
checkForInput($(this).attr('class'),$(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

How to remove a div containing a checkbox with a specific id?

I have different checkboxes generated dynamically.
Each checkboxes are contained within a div.
I would like to do the following action with jquery:
If a checkbox has an id="aucune", then remove its container (the div containing the checkbox with the id="aucune") from the html page.
I tried the following code:
// wait for DOM to be ready
$(document).ready(function() {
var empty = $("input:checkbox[id=aucune]");
if (empty == true) {
$(this).parent().remove();
}
});
Here is a the very simplified html:
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>
Here is my codepen:
I am quite new to code, I apologize for my silly simple question.
You can directly select the id with jQuery and remove the parent.
$('#acune').parent().remove();
Or if you know the class of the parent element
$('#acune').parent('.wrapper-checkbox').remove();
You are wrongly referencing this. It should be this way:
Replace this with empty.
Replace the boolean check with count.
Note: You can also use $("#aucune") instead of the selector $("input:checkbox[id=aucune]").
// wait for DOM to be ready
$(document).ready(function() {
// Or here you can also use $("#aucune").
var empty = $("input:checkbox[id=aucune]");
// Check if it is found.
if (empty.length > 0) {
// Remove the parent.
empty.parent().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>
Boom! And the checkbox is gone! :)
You can directly use the aucune id selector in your JQuery and then get the closest div with class wrapper-checkbox to remove it:
$(document).ready(function() {
var empty = $("#aucune");
if (empty.length !== 0){
$(empty).closest('.wrapper-checkbox').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="xxx" name="xxx" date-name="xxx">
<label for="xxx">xxx</label>
</div>
<div class="wrapper-checkbox">
<input type="checkbox" class="outsider" id="aucune" name="aucune" date-name="aucune">
<label for="aucune">aucune</label>
</div>
Try to do this..
$(document).ready(function() {
var checkbox = $("input:checkbox[id=aucune]");
if (checkbox.length > 0) {
checkbox.parent().remove();
}
});

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

Categories