jQuery selector fails when ID contains square brackets - javascript

I have a php script that creates a number of inputs whose ID's are in an array. I am trying to check the value in the clicked one but it fails due to the selector being an array, I think. The code I'm using is below. The amt var is undefined. If I change the code to not use arrays, it works. Is there a way to access an ID that is an array element? Here is my jsfiddle.
$(".map-price").keyup(function(event) {
var id = event.target.id;
var amt = $("#" + id).val();
console.log(id + ' ' + amt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="input" name="map_price[1]" id="products_map_price[1]" class="map-price">
</div>
<div>
<input type="input" name="map_price[2]" id="products_map_price[2]" class="map-price">
</div>

You can pass the whole element into jquery:
$(".map-price").keyup(function(event) {
var amt = $(event.target).val();
console.log(event.target.id + ' ' + amt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="input" name="map_price[1]" id="products_map_price[1]" class="map-price">
</div>
<div>
<input type="input" name="map_price[2]" id="products_map_price[2]" class="map-price">
</div>

Related

GetElementById from node object

I have the an html code which resembles this:
<div id="abc">
<div class="class1">some data</div>
<div class="class2">
<input type="number" id="row1-id1" />
<input type=number" id="row1-id2" />
</div>
<div class="class2">
<input type="number" id="row2-id1" />
<input type=number" id="row2-id2" />
</div>
</div>
I want to read all input tag and create a list from it. The input tag needs to be inside the div with class class2 which in turn should be under #abc.
I have written the following code to read them.
var rows = document.getElementById('abc').getElementsByClassName('class2');
for (var i=0;i<rows.length;i++) {
var id1 = rows[i].getElementById('row'+(i+1)+'-id1);
var id2 = rows[i].getElementById('row'+(i+1)+'-id2);
.......
.......
}
Now when i try to do the above i get an error saying 'getElementById is not a function'.
How do i access the element with specific Id inside the node?
First of fix the mistakes in your code. Your missing 2 " in your html, and 2 ' in your javascript.
Second, then use querySelector like: rows[i].querySelector('#row' + (i + 1) + '-id1'). Then your code works fine.
Demo
var rows = document.getElementById('abc').getElementsByClassName('class2');
for (var i = 0; i < rows.length; i++) {
var id1 = rows[i].querySelector('#row' + (i + 1) + '-id1');
var id2 = rows[i].querySelector('#row' + (i + 1) + '-id2');
console.log(id1)
}
<div id="abc">
<div class="class1">some data</div>
<div class="class2">
<input type="number" id="row1-id1" />
<input type="number" id="row1-id2" />
</div>
<div class="class2">
<input type="number" id="row2-id1" />
<input type="number" id="row2-id2" />
</div>
</div>
Please Note that since Id's should be unique, then you can always just use var id1 = document.getElementById('row' + (i + 1) + '-id1');

How to place variables into .html

want to create an output of gathered variables from a script. but can't seem to input the variables in HTML markup in the script.
$(".regclick3").click(function(){
$('.regtarget4').trigger('click');
var data1 = $("[name='f_k_page_title']").val();
var data2 = $("[name='f_extended_user_email']").val();
$(".divoutput").html(data1+ " " + data2);
});
html
<form>
<input type="text" name="f_extended_user_email" />
<input type="text" name="f_k_page_title" />
</form>
<div class="capture_data">Capture</div>
<div class="divoutput"></div>
Is it possible to add class and variables to the script? Can there be if statements, so if var data1 exists then display "X"
Thank you
According to your comment yes you can show HTML only if it exists otherwise something default like so:
function showMe()
{
var theVal = $('#name').val();
if(!theVal)
{
theVal = "Oop's No value entered";
}
$('#theValue').html(theVal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<br/>
The value is :: <span id="theValue"></span>
<br/>
<button onClick="showMe();">Show Me</button>
$(".divoutput").html(data1+ " " data2+);
// Yah! its possible what your missed + symbol in your code use like below https://codepen.io/kalaiselvan/pen/xdoWYy
$(".divoutput").html(data1+ " " + data2);

Jquery add row dele buttons?

I want to add the insertion button in the following code directory
How can I add a button to the insert section.
$(document).ready(function() {
$('#row_add_btn').click(AddRows)
var number = 1;
function AddRows() {
number++;
if (number < 21) {
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>
If you want the button click to remove the row, this jQuery should do the trick:
$(document).on("click", ".ibtnDel", function () {
$(this).parent().remove();
});
jQuery on() documentation
If you planning to insert deletion of the the rows then you need to use the code what Will P. suggested above but in addition you will need to handle the maximum number of rows differently.
Increment the number in if condition and decrement on remove row.
Example Snippet:
$(document).ready(function() {
$('#row_add_btn').click(AddRows);
$(document).on('click', '.ibtnDel', removeRow);
var number = 1;
function AddRows() {
if (number <= 21) {
number++;
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
function removeRow() {
number--;
$(this).parent().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>

How to add new input to html document on input typing using jquery?

I want to add dynamic input.
I have one input already created and if someone write something into it, it will add new input below it and if again some one write something into newly created input, it will call the same jquery and generate another input below and so on. ( same like google's contact form for address and email )
How can I do this.
I have tried this but it is giving me for each keypress new input and also for newly created input it is not working
var counter = 2;
$("input[id^='textbox']").keypress(function () {
if (counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>
You should use .on() to attach event handler to new input. Also check if parent of typing text is last-child, then add new row.
$(document).on("keyup change", "input[id^='textbox']", function(){
if ($(this).parent().is(":last-child") && $(this).val() != ""){
var index = $(this).parent().index() + 2;
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+index+'"><label>Textbox #'+index+' : </label><input type="textbox" id="textbox'+index+'" ></div>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1' >
</div>
</div>

Form submit values not recognized in jQuery code

I have this form:
<form name="form" method="post">
<div>
<p>
Problem Name: <input type="text" size="20" name="problem_name"></input>
</p>
<p>
Explain the problem
</p>
<p>
<textarea name="problem_blurb" cols=60 rows=6 ></textarea>
</p>
</div>
<div>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
<input type="submit" class="button" value="Add Problem"></input>
</div>
<form>
and here is my JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function()
{
$("input[type=submit]").click(function()
{
var name = $("#problem_name").val();
var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;
if(name=='' || username=='' || password=='' || gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
I went through the basic jQuery tutorials, but still confused with their syntax. For some reason, these variables show up as undefined:
var name = $("#problem_name").val();
var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);
Any idea what I am doing wrong?
# refers to id attributes, rather than names.
Use $('input[name="problem_name"]') to refer to the elements.
Add id="problem_name" and id="problem_blurb" respectively. The jQuery '#' selector looks for id attributes.
You can have both id and name attributes. id is the DOM identifier while name is the form input identifier.
The hash-tag selector tells it to look for that ID. In your HTML you only have those tags with a name attribute. Put the same value in the id attribute and you will be all set.
<input id="problem_name" type="text" size="20" name="problem_name"></input>
<textarea id="problem_blurb" name="problem_blurb" cols=60 rows=6 ></textarea>
You would also try ID in your elements, which is the identifier for # in jQuery.
<input type="text" size="20" id="problem_name">
Which also go for your Button.
If you have <input type="button" ... id="bn"> you can replace "input[type=submit]" (which in your case will activate ALL submit buttons on the page) with $("#bn").click(function() { .. });.

Categories

Resources