I have a form with a input was type="number", after submit I made it reset and backup in a list to resolve purpose.
If that any submit is failed, I want to resolve entire input. I also try convert innerHTML to Number before assign, but it not working. Number.parseInt(document.querySelector("div#"+ item_Id +".result #context > #cmeasurement").innerHTML);
I have that possible by change a number input's value?
function resolveForm(item_Id) {
document.querySelector("#addInventoryform #measurement").value = document.querySelector("div#" + item_Id + ".result #context > #cmeasurement").innerHTML;
}
<div id="addInventory_form">
<form id="addInventoryform" autocomplete="off">
<label for="measurment">Measurement</label>
<input id="measurment" name="measurement" type="number" value="1">
</form>
</div>
<div id="a123121" class="result" style="background-color: wheat">
<div>
<button onclick="resolveForm('a123121')" id="result_id">123121</button>
<div id="status"></div>
</div>
<div id="context" style="display:none">
<div id="cmeasurement">12312</div>
</div>
</div>
On the input element in your HTML, you set your id="measurement".
In your function, you're calling your id as "measurment". If you fix your spelling, the function should work as expected.
See the snippet below:
function resolveForm(item_Id) {
document.querySelector("#addInventoryform #measurement").value = document.querySelector("div#" + item_Id + ".result #context > #cmeasurement").innerHTML;
}
<div id="addInventory_form">
<form id="addInventoryform" autocomplete="off">
<label for="measurment">Measurement</label>
<input id="measurement" name="measurement" type="number" value="1">
</form>
</div>
<div id="a123121" class="result" style="background-color: wheat">
<div>
<button onclick="resolveForm('a123121')" id="result_id">123121</button>
<div id="status"></div>
</div>
<div id="context" style="display:none">
<div id="cmeasurement">12312</div>
</div>
</div>
Related
I want to get the child element dynamically. I am looping through the div tag to get the values. But its not working.
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" xl="12" value="a">
</div>
<div class="fg">
<input type="text" xl="34" value="b">
</div>
</div>
</div>
</div>
The javascript function for fetching the value dynamically
This code is working if row and col div are not there. But when they are included its not working at all. Anyone can please help me with this issue!
$(".pg").each(function(){
$(this).children(".fg").each(function() {
console.log($(this).attr('xl'));
});
});
First using children(), will return only direct children , not deep search ,
Second , use data-xl instead of xl ,more information here about data attribute
also , the loop is accessing the parent div of input , so use ".fg input" instead
for searching use find() , then change selector to access directly your input , .find(".fg input")
See below working snippet :
$(".pg").each(function() {
$(this).find(".fg input").each(function() {
console.log($(this).val() ,"=", $(this).data('xl'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="12" value="a">
</div>
<div class="fg">
<input type="text" data-xl="34" value="b">
</div>
</div>
</div>
</div>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="15" value="c">
</div>
<div class="fg">
<input type="text" data-xl="84" value="d">
</div>
</div>
</div>
</div>
I have the following HTML structure, which cannot be changed.
I need to append the user typed info to a <ul> list with jQuery.
I have tried it using the following code but id does nothing. What would be the correct way to do it?
$(document).ready(function() {
$(".btn btn-outline-primary").click(function() {
let toAdd = $("input[#title]").val();
$("<li>" + toAdd + "</li>").appendTo("<ul>");
});
});
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button type="submit" class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
</body>
</html>
A bunch of bugs to fix:
Separating selectors with space means that the document is searched for the first selector with a descendant of the second selector - you don't want that here, keep the class names together (or just select the btn-outline-primary alone, since there's only one of them)
You need to preventDefault() to keep the form from submitting and replacing the page
The existing ul in the HTML should be selected if you want to append to it - '<ul>' isn't a valid selector.
The #title should just be selected as #title (ids can't be repeated in HTML, after all):
$(".btn-outline-primary").click(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" + toAdd + "</li>").appendTo("ul");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
$(document).ready(function(){
$('form').submit(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" +toAdd+ "</li>").appendTo(jQuery("ul"));
});
});
First override the submit.
Value should be fetched properly. using #title
Append to proper element
You have wrong selectors in your code (for btn and title), plus i'd change also the append code.
Also, you have a submit button inside a form, clicking it will cause the submit.
Try this:
$(document).ready(function(){
$("form").submit(function(e){
//prevent form submit;
e.preventDefault();
//append input text value to UL
$("ul").append("<li>" + $("#title").val() + "</li>");
});
});
Click here to test if in JsFiddle
Got a 3 selection radio button options and also a number field, in case somebody wants to select more than radio buttons can offer. And i'm trying to pass a radio button value to the number field when radio value is changed.
Here is my html code for it
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
And this is my jquery code for it
$("form.quanform .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function(){
$(this).click(function(){
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
Nothing happens and there are no errors in the console
The problem lies purely in your selector:
$("form.quanform) won't work, as your <form class="quanform"> is wrapped inside another <form>, which is invalid markup; <form> cannot be nested inside another <form>.
Because the 'desired' markup is invalid, it actually never gets added to the DOM. You can confirm this by viewing the source yourself with CTRL + U - <form class="quanform"> doesn't exist. Thus, you cannot target it with jQuery.
You can validate your markup with the W3 Validation service to ensure that your HTML is indeed valid, ensuring that your jQuery selectors work the way you expect.
As for your current structure, you can omit the .quanform component, and simply use $("form .pricelinewrap .priceline .pricelinecellval input[type=radio]"), which will work based off of the outer <form> element (which does indeed exist in the DOM).
This can be seen working in the following example:
$("form .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function() {
$(this).click(function() {
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
Hope this helps! :)
I have repeating data that gets injected into the html like this:
<div class="subFormContent" id="Results">
<div class="subFormContentRow">
<div class="subFormContentRowChildWrapper">
<div id="subCtrlPreviewRow1-identifier" class="subCtrlPreviewRowContainer">
<div id="subCtrlRow1column1-identifier" class="subCtrlPreviewCell">
<div class="subCtrlPreviewCtrlHolder">
<div class="control ">
<label class="block label alignLabel">
<span>value</span>
</label>
<input type="text" class="textInput block field" id="value-identifier" value="value1" />
</div>
</div>
</div>
<div id="subCtrlRow1column2-identifier" class="subCtrlPreviewCell">
<div class="subCtrlPreviewCtrlHolder">
<div class="control">
<label class="block label alignLabel">
<span>propName</span>
</label>
<input type="text" class="textInput block field" id="propName-identifier" value="propname1" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...Repeats
I need to get the value from column 1 where column 2 is equal to x with JavaScript or jquery, but it will not always be on the same row number. It will however only have one row where column 2 is x. Can anyone think of a way to do this?
updated for multiple rows
1.2 update if id's starts with words "value" and "propName"
$(document).ready(function(){
var x = 5,
row = $('.subFormContentRow');
row.each(function(index, el){
var inputProp = $(el).find('[id^="propName"]'),
inputVal = $(el).find('[id^="value"]');
if(inputProp.val() == x){
alert(inputVal.val());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subFormContent" id="Results">
<div class="subFormContentRow">
<div class="subFormContentRowChildWrapper">
<div id="subCtrlPreviewRow1-identifier" class="subCtrlPreviewRowContainer">
<div id="subCtrlRow1column1-identifier" class="subCtrlPreviewCell">
<div class="subCtrlPreviewCtrlHolder">
<div class="control">
<label class="block label alignLabel">
<span>value</span>
</label>
<input type="text" class="textInput block field" id="value-456456456" value="value1" />
</div>
</div>
</div>
<div id="subCtrlRow1column2-identifier" class="subCtrlPreviewCell">
<div class="subCtrlPreviewCtrlHolder">
<div class="control">
<label class="block label alignLabel">
<span>propName</span>
</label>
<input type="text" class="textInput block field" id="propName-45647898778645656" value="5" />
</div>
</div>
</div>
</div>
Shouldn't be using ids in a way that they show up multiple times on the page.
You can still do it by finding the element, traversing back up to the row, then finding the value.
With JQuery:
$("#propName[value='" + x + "']")
.closest(".subFormContentRow").find("#value").val();
I've been working on this for a little longer then needed, but I can't find what is going wrong here. I think I've looked at it way too long. I need to get the items to add up after quantity is add to the form.
Here is my HTML
<div class="row-fluid container-cart">
<div class="span4">
<div class="thumbnail">
<img src="http://myurl.com/image.jpg" />
<div class="caption">
<h3 class="">Title</h3>
<p class="">Description</p>
<div class="row-fluid">
<div class="span6">
<p class="lead">
<span id="item-price">100</span>
<span class="price-integer">
<input type="hidden" value="100">
</span>
</p>
</div>
<div class="span6">
<span>Quantity</span>
<input type="text" name="" id="quantity" class="stored quantity" autocomplete="off" value="">
</div>
<div class="span6">
<input type="text" name="base-total" id="base-total" class="stored readonly base-total" value="" readonly>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span6">
Total:
<span class="total-cart">
<input type="text" name="total-cart" id="total-cart" class="stored readonly" value="" disabled="disabled">
</span>
</div>
Here is my JS
$('.quantity').on('keyup', function() {
var sum = 0;
$(".container-cart").each(function(i,o){
total = parseInt($(o).find(".quantity input").val(), 10) * parseInt($(o).find(".price-integer input").val(), 10);
if(!isNaN(total) /*&& total.length!=0**/) {
$(o).find(".base-total").val(total);
sum += total;
}
});
$("#total-cart").val(sum);
});
Looks like you typed a wrong selector, it's the .quantity input, the .quantity is an input, so it won't have any children, maybe you want to mean the input.quantity which means finding the input having class quantity.
Demo.