jQuery undefined value click event - javascript

I have some forms with custom id's.
All of them has some of the hidden fields and one number and submit field. I would like to get the number field's value in a variable with this function
$(".formclass").click(function () {
console.log(this.id);
var id = this.id;
var value = $(id).find("input[type='number']").val();
console.log(value);
});
The return output in the console is
form-103
undefined
tried with .children() or .attr('value'), none of them worked.
here is an example:
<form id="form-<?=$id_val?>" class="formclass"
enctype="multipart/form-data"
method="POST"
action="/etlap/">
<input type="hidden" name="add-to-cart"
value="<?php echo htmlspecialchars($pid); ?>"/>
<input type="number" id="quantity"
name="quantity" min="1"
required="required"
pattern="[0-9]*"
max=<?= $floor_available_stock ?>
inputmode="numeric"
value="1"/>
<input type="hidden" name="variation_id"
value="<?php echo htmlspecialchars($getvar1); ?>"/>
<input type="submit" value="Add to cart"/>
</form>

Have not tried but may be you should use a css selector in the line 4. Try using the selector like :
var value = $("#"+id).find("input[type='number']").val();

If you want to find the number inside the element you clicked you can simply do
$("input[type='number']", this).val();
When using this version of the selector, the second element will be the parent that is used to search children of. Normal selectors are effectively wrappers around $(selector, document)
Ref. http://api.jquery.com/jQuery/#jQuery1

Related

How to get value of an hidden input from PHP Foreach loop with javascript

I have tried to get the value of hidden input from the PHP loop using javascript when its input is out focus and it returns all array of values and when I change code some, it returns only the first value.
Here is a PHP for each loop.
<?php
$s = 0;
foreach ($examSchedule as $key => $student) { ?>
<input type="hidden" id="student" name="student[]" value="<?php echo
$student['student_id'] ?>">
<?php }
?>
And it returns inputs like this
<input type="hidden" id="student" name="student[]" value="388">
<input type="hidden" id="student" name="student[]" value="389">
<input type="hidden" id="student" name="student[]" value="390">
<input type="hidden" id="student" name="student[]" value="391">
<input type="hidden" id="student" name="student[]" value="392">
<input type="hidden" id="student" name="student[]" value="393">
When I try to get the value I got the array with all the values
$("input").focusout(function(event){
event.preventDefault();
var students= $('[name="student[]"]').map(function () {
return this.value;
});
console.log(students);
}
Results are
n.fn.init(6) ["388", "389", "390", "391", "392", "393", prevObject:
n.fn.init(6), context: document]
And when i try to use
$("input").focusout(function(event){
event.preventDefault();
var students = $('#student').val();
console.log(student);
}
It just display only the first value.
How can I get the value of specific input when the out focus event is applied to a certain input field.
Use "this" keyword in javascript code:
"this" keyword will provide you the input element on which "focusout" event occurs
$("input").focusout(function(event){
event.preventDefault();
var students = $(this).val();
console.log(student);
}

pass the input value if checkbox is checked, values are in array?

<?php include("database/connect.php"); ?>
<form action="" method="post">
<?php
$q = mysqli_query($con,"select * from tbl_user");
while($f=mysqli_fetch_array($q))
{
?>
<input type="checkbox" name="ch[]" value="<?php echo $f['id'];?>"/>
<input type="number" name="qty[]"/><br>
<?php
}
?>
<input type="submit" name="yy" value="Submit"/>
</form>
From above code I want the value of the qty if the check box is checked.
I tried like array_combine and foreach if any one know logic then comment.Thanks in advance.
A number input (unless it is disabled or lacks a name) will always be successful and appear in the data.
A checkbox will only be successful if it is checked.
This means that using PHP's simple array syntax will cause your inputs to get out of sync with each other. The first number input will have the same index as the first checked checkbox, and so on.
To deal with this: Give the inputs explicit indexes.
For example:
<input type="checkbox" name="ch[]" value="<?php echo $f['id'];?>"/>
<input type="number" name="qty[<?php echo $f['id'];?>]"/><br>
Then in the PHP you can:
foreach ($_POST[ch] as $ch_value) {
do_something_with($_POST['qty'][$ch_value]);
}
You can associate a onclick handler in that checkbox and make the onclick function to provide you with the value of qty[] only when it is checked. For that send the reference to the element and the index to the onclick function and use the same index to name the elements ch and qty:
function cbClick(e, index) {
if (e.checked) {
var qty = document.querySelector('input[name="qty['+index+']"]').value;
console.log('cb value '+ e.value);
console.log('qty value' + qty);
}
}
<!-- You will loop the PHP code to give the name to each elements with 0, 1, 2..-->
<input type="checkbox" name="ch[0]" onclick="cbClick(this, 0)" value="cb9" />
<input type="number" name="qty[0]" /><br>
<input type="checkbox" name="ch[1]" onclick="cbClick(this, 1)" value="cb10" />
<input type="number" name="qty[1]" /><br>

Javascript Empty field validation - Cannot read property 'value' of undefined

I have been researching for days and taken several example from here for a solution to validate a date fields to make sure it is not empty before moving to next page. but keeps getting cannot read property of undefined, and I have tried using Joomla build validate.js which will not work inside this custom component, and I am hoping for some help here to tackle this issue.
Here's the javascript
nextpage:function(){
var deliveryy=document.getElementsByName("customPlugin")[0].value;
if(delivery == "" || delivery == null) {
alert("filled out All Delivery Date & Time");
return false; } else { .........
Here's the onclick button
<button type="button" id="productbuilder_next" class="productbuilder_pagination pbbutton btn" onclick="productbuilder.nextpage();"> Next</button>
Here's the raw data of the field I am trying to validate that it is not empty
<input id="<?php echo $class.$rand ?>" class="required <?php echo $class ?>" required="true" type="text" value="" size="<?php echo $this->params->custom_size ?>" name="customPlugin[<?php echo $viewData[0]->virtuemart_customfield_id ?>][<?php echo $this->_name?>][comment]"><?php if($this->params->custom_populate_alternate_field){?> <input type="text" id="alternate<?php echo $rand?>" size="30">
Generated
<input id="vmcustom-datetime1930516000" class="required vmcustom-datetime hasDatepicker" required="true" type="text" value="" size="10" name="customPlugin[176][datetime][comment]">
You're looking for a name that doesn't exist in the DOM. In this way, it'll throw this error when you access the property value.
Classes can be used here. Just add a class in your element and search for it in your function.
HTML:
<input id="vmcustom-datetime1930516000" class="required validDelivery vmcustom-datetime hasDatepicker" required="true" type="text" value="" size="10" name="customPlugin[176][datetime][comment]">
JS:
var validDelivery = document.getElementsByClassName("validDelivery")[0].value;
JSFiddle: http://jsfiddle.net/t1g7cfrb/1/
Give it a try and let me know if it helps!
Name of your element is "validDelivery customPlugin[176][datetime][comment]"
And you want to handle it with getElementsByName("customPlugin"). It's incorrect.
You may for example add class customPlugin to element and handle it with getElementsByClassName("customPlugin")[0].

Text field to Hidden field value - value not being set

I'm having an issue with passing hidden values. I have a search field that onclick calls my javascript function with the intention of setting a hidden fields value further down the page.
<div class="search">
<input type="text" name="username" class="mySearch" value="">
<input type="button" class="myButton" value="" onclick="setSearch();">
</div>
My javascript, i is set outside of the function.
setSearch(){
if(i == 0){
$('input:hidden[name="search1"]').val($(".mySearch").val());
}
else if(i == 1)
{
$('input:hidden[name="search2"]').val($(".mySearch").val());
}
i++;
}
and then the field I'm try to set
<div class="sendallHolder">
<form method="post" action="getTweets.php">
<input type="hidden" name="fromTest" id="fromTest"/>
<input type="hidden" name="untilTest" id="untilTest"/>
<input type="hidden" name="latTest" id="latTest"/>
<input type="hidden" name="longTest" id="longTest"/>
<input type="hidden" name="search1" id="search1" />
<input type="hidden" name="search2" id="search2" />
<input type="submit" class="sendAll" value="Gather News!">
</form>
</div>
It runs through the loop twice but each time its not setting the values properly in my hidden fields. the dev tools in chrome tell me that the 'value' is popping up but no value is being set. I'm not entirely sure what I'm doing wrong.
Any ideas?
The :hidden selector doesn't do what you think. It matches elements that have been hidden using CSS, it doesn't match type="hidden" inputs. Just use
$("#search1")
since you have an id on the elements.
Use hidden input ID like this :
$('#search1').val($(".mySearch").val())
$(".mySearch").keyup(addhjc);
function addhjc(){
$('#search2').val($(".mySearch").val());
}
or
$('.myButton').click(function(){
$('#search2').val($(".mySearch").val());
});
also
function setSearch(){
if(i === 0){........
and define i var

fill hidden filed value using javascript

I have a function called makehash()
I have to fill the value of hash field with the return value of makehash()
<form action="http://example.com/test.php" enctype="multipart/form-data" method="post">
<input type="file" name="datafile" size="40">
<input type="hidden" name="upload_mode" value="0">
<input type="hidden" name="hash" value="">
<input type="submit" value="Upload">
</form>
document.forms[0].elements["hash"].value = makehash();
This assumes you have only one form, if you have more specify the form name instead of 0 or give ID to the hidden input and use document.getElementById instead.
You can do it by grabbing the input (document.getElementsByName) and setting the .value, like this:
document.getElementsByName("hash")[0].value = makehash();
There are other ways as well, if it's unique an id is a good option for example.

Categories