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'));
}
Related
<?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>
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
Well, I'm trying to make a type of invoice.
Here's my problem : The invoice has various input boxes where the amount is typed by the user and there's "Total Charge"(input box) at the end of the list of those boxes. So what I want is that if some values(numeric) are filled in the the input boxes and a user click on the "Total Charge"(input box) the values are summed. How can I do it? I have used jQuery before. So, if possible can anyone explain how can I do it in jQuery?
Script so far
$('.charge').blur(function () {
var totalocharges = 0;
$('.charge').each(function() {
totalocharges += Number($(this).val());
});
$('#total_charges').val(totalocharges);
});
my view(just a part of it):
<div class="form-group col-md-offset-1 col-md-5">
<input type="number" class="charge form-control" id="amount1" name="amount1" value="<?php echo set_value('amount1'); ?>" placeholder="amount" required>
</div>
<div class="form-group col-md-offset-1 col-md-5">
<input type="number" class="charge form-control" id="amount2" name="amount2" value="<?php echo set_value('amount2'); ?>" placeholder="amount" required>
</div>
<div class="form-group col-md-offset-1 col-md-5">
<input type="text" class="form-control" id="total_charges" name="total_charges" value="<?php echo set_value('total_charges'); ?>" placeholder="net amount">
</div>
You could do something like this with jQuery.
In this example, your input boxes would have 'charge' class. And your total charge input the ID total-charges)
$('.charge').blur(function () {
var total_charges = 0;
$('.charge').each(function() {
total_charges += Number($(this).val());
});
$('#total-charges').val(total_charges);
});
Here you have a working code sample:
https://jsfiddle.net/0e8emcbu/
If you want to activate it with a button, then it would be like this:
https://jsfiddle.net/8cmL29xt/
Attach an event listener to the "Total charge" input box. For example, you can use "focus" event.
$("#total_charge").on('focus', function(){
//here you have to make calculations
//get values on all required input boxes
var value1 = $("#input_box1").val();
//another value
//sum (multiply, divide etc) values
val result = value1 + value2 + ...l
//change total_charge value
$("#total_charge").val(result);
});
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].
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