I have a question like so.
I have HTML structure:
<form id="form">
<div class="row">
<div class="item-input">
<label for="A1">A1</label>
<input type="text" name ="A1" />
<span class="input-require">(*)</span>
<span class="info">(Enter A1)</span>
</div>
<div class="item-input">
<label for="A2">A2</label>
<input type="text" name ="A2" />
<span class="input-require">(*)</span>
<span class="info">(Enter A2)</span>
</div>
</div>
<div class="row">
<div class="item-input">
<label for="B1">B1</label>
<input type="text" name ="B1" />
<span class="input-require">(*)</span>
<span class="info">(Enter B1)</span>
</div>
<div class="item-input">
<label for="B2">B2</label>
<input type="text" name ="B2" />
<span class="input-require">(*)</span>
<span class="info">(Enter B2)</span>
</div>
</div>
...
</form>
Now I want to selected 'span' has class "info" behind input[type=text] each.
I try:
<script type="text/javascript">
$(document).ready(function() {
$("#form input[type=text]").each(function(){
var spanInfo = $(this).closest("item-input").next().find('span.info');
console.log(spanInfo.text()); // Result is empty
});
});
</script>
Why is empty? Help me please. How do I, thanks
var spanInfo = $(this).closest("item-input").next().find('span.info');
Should be
var spanInfo = $(this).closest(".item-input").next().find('span.info');
You are missing the . (dot, class)
Your mean is show "(Enter A2)" and "(Enter B2)" or show all 4 element value: (Enter A1), (Enter A2), (Enter B1), (Enter B2)
If only show 2 value then CODE HERE
else You want to show 4 value, you can code:
$(document).ready(function() {
$("#form input[type=text]").each(function(){
var spanInfo = $(this).closest(".item-input").find('span.info');
console.log(spanInfo.text());
});
});
Related
I've been coding for ~60+ hours the past 5 days, so I apologize if, due to burn-out, this question is too trivial :-)
I have some HTML like this:
<div id="blah1_1">
<label for="blah1_1">
<span class="inner">hi</span>
</label>
</div>
<div id="blah1_2">
<label for="blah1_2">
<span class="inner">yes</span>
</label>
</div>
<div id="blah2_1">
<label for="blah2_1">
<span class="inner">yes</span>
</label>
</div>
<div id="blah2_2">
<label for="blah2_2">
<span class="inner">no</span>
</label>
</div>
All I want to do is use jQuery to:
1.) Get the CSS-equivalent value of "#blah1_1 .inner". I tried:
alert ( $("#blah1_1 .inner").val() );
but fail.
2.) Compare #blah1_1.inner value to #blah2_1.inner value. If equal, then echo a confirmation.
3.) Double loop through the blah1_* "Array" and compare it to the blah2_* "array". If blah1_[x] = blah2_[y] then echo a confirmation. For example, compare all the blah1_*'s against blah2_1 ... then compare blah1_*'s against blah2_2, etc.
A little late-night/red-eye help, please? (TIA!)
your alert ( $("#blah1_1 .inner").val() ); should alert ( $("#blah1_1 .inner").text() );
then you can use Attribute selector to select both sets blah1_* and blah2_*
then use .each() jQuery method to iterate over the labels:
then for the compare:
$(document).ready(function() {
const elms1 = $('[id^="blah1"]');
const elms2 = $('[id^="blah2"]');
const labels1 = elms1.find('label');
const labels2 = elms2.find('label');
labels1.each(function(index1, el1){
labels2.each(function(index2, el2){
console.log($(el2).text() === $(el1).text())
})
})
})
<div id="blah1_1">
<label for="blah1_1">
<span class="inner">hi</span>
</label>
</div>
<div id="blah1_2">
<label for="blah1_2">
<span class="inner">yes</span>
</label>
</div>
<div id="blah2_1">
<label for="blah2_1">
<span class="inner">yes</span>
</label>
</div>
<div id="blah2_2">
<label for="blah2_2">
<span class="inner">no</span>
</label>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
I have a zipcode checker which posts using ajax after the length of an input field is equal to 6. This works, except the ajax is posted twice. Why is that? I am using an api which has 1000 calls each month, so this behaviour already cuts that in half.
Maybe it would make sense to me that because of some bug it fires again when typing a 7th character, but that is not even the case, when I type exactly 6 characters the ajax is fired twice.
$("body").on("keyup", "#billing_postcode", function() {
var value = $(this).val();
var housenumber = $("#billing_streetnumber").val();
if (housenumber.length >= 1) {
if (value.length == 6) {
url = 'catalog/postcodecheck.php';
var $postcode = $('#billing_postcode').val();
var $huisnummer = $('#billing_streetnumber').val();
var posting = $.post(url, {
postcode: $postcode,
huisnummer: $huisnummer
});
posting.done(function(data) {
var content = $($.parseHTML(data));
$("#postcoderesult").empty().append(content);
});
} else {
}
} else {
alert('Vul eerst je huisnummer in voor dat je verder kan.');
$("#billing_postcode").val('');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3">
<p class="single-form-row">
<label>Huisnummer <span class="required">*</span></label>
<input type="text" name="billing_streetnumber" id="billing_streetnumber" required>
</p>
</div>
<div class="col-lg-4">
<p class="single-form-row">
<label>Toevoeging (optioneel)</label>
<input type="text" name="billing_streetextra" id="billing_streetextra">
</p>
</div>
<div class="col-lg-5">
<p class="single-form-row">
<label>Postcode<span class="required">*</span></label>
<input type="text" name="billing_postcode" id="billing_postcode" required>
</p>
</div>
<div id="postcoderesult" class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<p class="single-form-row">
<label>Straatnaam <span class="required">*</span></label>
<input type="text" name="billing_street" id="billing_street" disabled required>
</p>
</div>
<div class="col-lg-6">
<p class="single-form-row">
<label>Stad<span class="required">*</span></label>
<input type="text" name="billing_city" id="billing_city" disabled required>
</p>
</div>
</div>
</div>
I wrote a code to add dinamically elements in a form with js. when i submit data, action page says that index of this element are undefined
I have this form:
<form action="testRicetta.php" method= "POST" >
[...]
<ul id ="passi" >
<li id ="li_passo0">
<div class="row">
<div class="col-25">
<label for="descrizione">Passo 0</label>
</div>
<div class="col-75">
<textarea id="passo0" name="passo0" placeholder="Descrivi
il passo" style="height:100px" required ></textarea>
<input type="file" id="immagine_0" name="immagine" >
</div>
</div>
</li>
</ul>
<button id="addMore" >Aggiungi passo</button>
This is the js code where appear the listener of button #addMore
var passi = 1;
$(function() {
$("#addMore").click(function(e)
{
e.preventDefault();
$("#passi").append(`<li id ="li_passo"`+passi+`>
<div class="row">
<div class="col-25">
<label for="passo"`+passi+`>Passo `+passi+`</label>
</div>
<div class="col-75">
<textarea id="passo"`+passi+` name="passo"`+passi+`
placeholder="Descrivi il passo" style="height:100px"
required ></textarea>
<input type="file" id="immagine_"`+passi+`
name="immagine" >
</div>
</div>
</li>`);
passi++;
},
$('.sel').chosen());
})
action page:
echo $_POST{passo0];
echo $_POST{passo1];
Result:
Notice: Undefined index: passo1
Furthermore, is possibile read data in a loop? i tried this
for($i = 0; isset($_POST['passo'+$i]);$i++)
echo $_POST['passo'+$i];
but i get this error:
Warning: A non-numeric value encountered in (the loop)
So how can i read this data, and how can do it with a loop?
When your adding the new field, you are concatenating the passi variable value outside the of name name="passo"'+passi+', it should be name="passo'+passi+'".
Try:
var passi = 1;
$(function() {
$("#addMore").click(function(e)
{
e.preventDefault();
$("#passi").append('<li id ="li_passo"'+passi+'>
<div class="row">
<div class="col-25">
<label for="passo"'+passi+'>Passo '+passi+'</label>
</div>
<div class="col-75">
<textarea id="passo"'+passi+' name="passo'+passi+'"
placeholder="Descrivi il passo" style="height:100px"
required ></textarea>
<input type="file" id="immagine_"'+passi+'
name="immagine" >
</div>
</div>
</li>');
passi++;
},
$('.sel').chosen());
})
And then:
echo $_POST[passo0];
echo $_POST[passo1];
I am using bootstrap-slider.js. My problem is that I can't link input number with a slide. I want to slide to change too if the input number is changed.
Slider
<div id="slider-year" class="search-block">
<h2 class="title">Production year</h2>
<div class="slider-year-amount">
<span class="pull-left">1900</span>
<span class="pull-right">2017</span>
</div>
<input type="text" class="year-slider" style="width:100%" data-slider-min="1900" data-slider-max="2017" data-slider-step="1" data-slider-value="[1900,2017]" />
<div class="row">
<div class="year-box">
<div class="col-lg-6">
<label>From</label>
<input type="number" min="1900" max="2019" class="form-control" placeholder="1900" id="minYear" value="1900" name="year_since">
</div>
<div class="col-lg-6">
<label>To</label>
<input type="number" min="1901" max="2020" class="form-control" placeholder="2017" id="maxYear" value="2017" name="year_to">
</div>
</div>
</div>
</div>
How I try to update slider:
jQuery("#minYear").change(function () {
jQuery("#slider-year").slider('setValue', jQuery(this).val());
});
Also here is documentation for this slider if anyone is curious, I couldn't find solution there: http://www.eyecon.ro/bootstrap-slider
JsFiddle: https://jsfiddle.net/y95vfds3/6/
Many years have passed... Anyway, here is my solution:
$('#year-slider').slider()
.on('slide', function(ev) {
$('#minYear').val(ev.value[0]);
$('#maxYear').val(ev.value[1]);
});
$('.form-control').on('input', function() {
let minVal = parseInt($('#minYear').val());
let maxVal = parseInt($('#maxYear').val());
$('#year-slider').slider('setValue', [minVal, maxVal])
});
https://jsfiddle.net/p98bcxuv/
Do you want like this?
$("#minYear").change(function() {
$("#slider-year").slider('setValue', jQuery(this).val());
});
val = $('.year-slider').slider();
$('.year-slider').on('slide', function(ev) {
$('#minYear').val(ev.value[0]);
$('#maxYear').val(ev.value[1]);
});
https://jsfiddle.net/gnanavelr/y95vfds3/7/
https://jsfiddle.net/gnanavelr/y95vfds3/8/
I want to get the Value of the Current Element to be clicked.
I have a list of Checkboxes and selection of each I want to get the ID of it which is hidden.
My Code goes as follows:
$("#ModelListView").on("click", ".ModelCheckBox", function (element) {
var AnalysisID = $("#AnalysisID").val();
var ModelID = '';
});
HTML:
<div id="ModelListView"></div>
<script type="text/x-kendo-template" id="Modeltemplate">
<div class="section group fr">
<div class="col span_2_of_12">
#if(ACTIVE_MODELS_COUNT > 0){# <input class="ModelCheckBox" type="checkbox" checked/>#} else {# <input class="ModelCheckBox" type="checkbox" unchecked/> #}#
</div>
<div class="col span_4_of_12"><label>#:MODEL#</label></div>
<input id="Model_ID" type="hidden" value=#:MODEL_ID#/>
</div>
</script>
I want to get the Value of Model_ID that is kept hidden.
You can use $(this) and get the closest.
$(this) will be the element that's clicked.
.closest('.section.group') will return the "section group"-div. You might want to use #ModelListView instead of .section.group.
.find('#Model_ID').val() will return the value of the hidden field.
$("#ModelListView").on("click", ".ModelCheckBox", function (element) {
var AnalysisID = $("#AnalysisID").val();
var ModelID = $(this).closest('.section.group').find('#Model_ID').val();
alert(ModelID);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ModelListView">
<div class="section group fr">
<div class="col span_2_of_12">
<input class="ModelCheckBox" type="checkbox" checked/>
</div>
<div class="col span_4_of_12"><label>Label</label></div>
<input id="Model_ID" type="hidden" value="someValue"/>
</div>
</div>
Sidenote: be aware of using an ID in a template.