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

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].

Related

jQuery undefined value click event

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

How to declare variables dynamically in javascript

is it possible to read from post variables dynamically?
i.e.
function ajax_edit_color(color_id, building)
{
var color_name = $('#color_name_'+color_id).val();
var color_hex_code = $('#color_hex_code_'+color_id).val();
console.log(color_name, color_hex_code);
}
when I look at the console, the variables are undefined. Is there a correct syntax for this?
EDIT :
the HTML is dynamic (PHP):
<label for="color_name_<?php $value['id']; ?>">Color name : </label>
<input type="text" name="color_name_<?php $value['id']; ?>" id="color_name_<?php $value['id']; ?>" class="form-control" required="required" value="<?php echo $value['color_name']; ?>" />
<label for="color_hex_code_<?php $value['id']; ?>">Color HEX code : </label>
<input type="text" name="color_hex_code_<?php $value['id']; ?>" id="color_hex_code_<?php $value['id']; ?>" class="form-control" required="required" value="<?php echo $value['color_code']; ?>" />
AND HERE's the rendered HTML :
<label for="color_name_">Color name : </label>
<input type="text" name="color_name_6" id="color_name_" class="form-control" required="required" value="orange" />
<label for="color_hex_code_">Color HEX code : </label>
<input type="text" name="color_hex_code_6" id="color_hex_code_" class="form-control" required="required" value="ff9c00" />
Look at your final HTML:
<label for="color_name_">Color name : </label>
<input type="text" name="color_name_6" id="color_name_"
class="form-control" required="required" value="orange" />
The name is right, but the id is wrong. Fix your php, and the javascript will start working. The id needs to be color_name_6, not color_name_.
Your basic approach is correct, so I suggest you start with a simplified test, for example without PHP. One basic example, which I verified to work:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/libs/jquery-2.1.4.js"></script>
<script>
function test(){
var index=1;
var val=$("#color_name_"+index).val();
console.log( '****' +val);
};
</script>
</head>
<body>
<button onclick="test();return false;">test</button>
<input type="text" id='color_name_1' value='green'>
<input type="text" id='color_name_2' value='blue'>
</body>
This works. Now if your own code is failing, try looking for differences, in particular:
1. When is your javascript running - could it be before the "color_name" elements are rendered in the document?
2. Could your PHP be generating wrong values, this could be tested by viewing the document source of course
edit you javascript to match the following
function ajax_edit_color(color_id, building)
{
var color_name = $('#'+color_id).val();
var color_hex_code = $('#'+color_id).val();
console.log(color_name, color_hex_code);
}
//color_name_ and color_hex_code_ are both already part of your ids.

Javascript load Two value single input fields

i Have created calculation Project .My code have input fields Name Estimate Property Tax . this input fields get two types of value .That Two types of value % and $ values. Now My inputs fields get % values Only .Not getting $ value.MY Old UI code:
<td>Estimate Property Tax </td>
<td>
<input name="propertytaxpc" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax; ?>" onChange="javascript:propertyTaxPcChanged(true)" />
%</td>
<td>Or $
<input name="propertytaxamt" type="text" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)" />
</td>
<td>
Now i have created this code single input value % value is default New Code:
<div class="row">
<div class="col-md-4 padding-rht bdy">
<label id="lblEstimatePropertyTax"class="pull-left"style="font-weight: 600">
Estimate Property Tax</label>
</div>
<div class="col-md-3 padding-rht">
<input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />
</div>
<div class="col-md-1 padding-lft">
<img src="Content/Images/percent.png" onclick="changeColor(event,this.src)" style="cursor:pointer"/>
</div>
MY script for ICON change:
function changeColor(event, _src) {
var fname = _src;
var ImageName = fname.substring(fname.lastIndexOf('/') + 1);
//alert(ImageName);
if (ImageName == "percent.png") {
$(event.target).attr("src", "Content/Images/RedDoller.png");
}
else {
$(event.target).attr("src", "Content/Images/percent.png");
}
}
Now MY UI i have used single input fields % and $ both value's load single input fields .Now i get % value. if i user change % to $ value also need to change. please help me i am getting % value only ? how to value change onclick function?
I'm not sure I fully understand but it appears that the value is being set server side by your php code.
value="<?php echo $dproperty_tax;?>"
using javascript to change the image doesn't go back to the server to replace the % value with the $ value. I would output two separate input fields to the DOM as you were before. But use javascript to show and hide the appropriate input box.
alternatively, you could use data attributes to hold both the percent and dollar values in the input and set the value using javascript.
<input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" data-percent="<?php echo $dproperty_tax;?>" data-dollar="<?php echo $TaxDollars;?>" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />
then in your javascript code
var taxInput = $('input[name="propertytaxpc"]');
if (ImageName == "percent.png") {
$(event.target).attr("src", "Content/Images/RedDoller.png");
taxInput.val(taxInput.attr('data-dollar'));
}
else {
$(event.target).attr("src", "Content/Images/percent.png");
taxInput.val(taxInput.attr('data-percent'));
}

How can I focus an input onload without selecting the value on it?

I want to focus an input field without selecting the text in it. I want cursor to be on the end and ready to add more text.
This is my input field:
<input type="text" name="change" value="<?php echo $row[4]; ?>" autofocus>
P.S - autofocus select the text.
If you know jQuery, then you can do like this:
var input = $('input[name="change"'),
strLen = input.val().length;
input.val(input.val());
input.focus();
input[0].setSelectionRange(strLen, strLen);
You can find out more information about Input.setSelectionRange from MDN docs
Fiddle Demo
Try using this concept: http://jsfiddle.net/Lc45u/1/
<input id="inp1" value="abcdefg" />
<input type="button" onclick="document.getElementById('inp1').focus();document.getElementById('inp1').value = document.getElementById('inp1').value;" value="FOCUS" />
I found a solution for that:
<input type="text" name="change" value="<?php echo $row[4]; ?>" autofocus onfocus="this.value = this.value;">
Thanks to everyone :)

Javascript to Disable/Enable form fields

I want this script to disable date fields when the page loads, then enable/disable depending on the drop down field. The script simply isnt doing anything, was wondering if anyone can see what I am doing wrong.
<head>
function formdisable(){
var myTextField = document.getElementById('searchby');
if(myTextField.value = "agencyname")
document.searchform.Date1.disabled=true
document.searchform.Date2.disabled=true
document.searchform.agencyname.disabled=false
else
document.searchform.Date1.disabled=false
document.searchform.Date2.disabled=false
document.searchform.agencyname.disabled=true
}
onload = start;
</script>
</head>
<table>
<form id="searchform" name="searchform">
<tr>
<td>Search Term: </td><td><input tabindex="1" type="text" name="search" id="search1" value="" /></td>
</tr>
<tr><td>Search By:</td><td><select size="1" id="searchby" name="searchby" onclick="formdisable()" tabindex="2">
<option value="agencyname">Agency Name</option>
<option value="daterange">Date Range</option>
</select></td></tr>
<tr>
<td>Beginning Date: </td><td><input id="Date1" name="Date1" size="10" maxlength="10" value="<?php echo $_GET['Date1']?>"/> </td><td>Ending Date: </td><td><input id="Date2" name="Date2" size="10" maxlength="10" value="<?php echo $_GET['Date2'];?>" /> </td></tr>
<input type="hidden" id="wildcard" value="= 'Approved'" />
<input type="hidden" id="repid" value="<?php echo $_SESSION['REPID']; ?>" />
<tr><td><input tabindex="3" type='button' onclick='searchAgency()' name="searchsub" value='Search' /></td></tr></td>
</tr>
</form>
</table>
Right away, I see missing {} in your if/else, and an assignment = where an equality == belongs:
if(myTextField.value = "agencyname")
document.searchform.Date1.disabled=true
document.searchform.Date2.disabled=true
document.searchform.agencyname.disabled=false
else
document.searchform.Date1.disabled=false
document.searchform.Date2.disabled=false
document.searchform.agencyname.disabled=true
Should probably be:
<script type='text/javascript>
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Forgot the opening script tag
Then...
if(myTextField.value == "agencyname") {
//-------------^^^^^^^
// ==, not =
document.searchform.Date1.disabled=true;
// Please manually insert semicolons--^^^
document.searchform.Date2.disabled=true;
document.searchform.agencyname.disabled=false;
}
else {
document.searchform.Date1.disabled=false;
document.searchform.Date2.disabled=false;
document.searchform.agencyname.disabled=true;
}
In your original version, you were assigning agencyname to myTextField.value inside the if() condition. Followed by that was a mess of partially executed code. The assignment would succeed, and then the first (and only the first) subsequent statement would execute as part of the if() block. The next two would execute before coming to a syntax error on the else.
You are relying on automatic semicolon insertion, which is a dangerous (mis-)feature of the JavaScript language when used recklessly. Please always terminate your statements with ;
You are missing 6 ; two } and one { also you need to use == instead of =.
You should read a getting started tutorial.
I got to agree with Michael but you also missed opening tag

Categories