Form field quantity up/down buttons, don't allow negative numbers? - javascript

http://jsfiddle.net/KYDPd
Is there a way to make the minimum number be 0, and not allow the user to go below 0 when clicking down?
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="this.form.name.value--;">
</form>

If separate buttons are not necessary and HTML5 is an option you could just use this:
<form>
<input type="number" min="0" name="name" value="0" />
</form>

This should do the trick. Check what the value is before you allow each operation. Also added an onchange to the text input to inforce your minimum 0 requirement. Agree with other answer that this should be in a function though.
http://jsfiddle.net/xqV6V/1/
<form>
<input type="text" name="name" value="0" onchange="if(this.value<0){this.value=0;}" />
<input type="button" value="up" onclick="if(this.form.name.value>=0){this.form.name.value++;}" >
<input type="button" value="down" onclick="if(this.form.name.value>0){this.form.name.value--};">
</form>

You should probably put this JavaScript in a function.
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="if(this.form.name.value>0)this.form.name.value--;">
</form>
Additional Answer with functions.
<script>
function ud_find_text(self) {
var children = self.parentNode.getElementsByTagName('input');
for (var i = 0; i < children.length; i++) {
if (children[i].getAttribute('type') == 'text') {
return children[i];
}
}
}
function ud_inc(self) {
var text = ud_find_text(self);
text.value++;
}
function ud_dec(self) {
var text = ud_find_text(self);
if (text.value > 0) text.value--;
}
</script>
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="ud_inc(this)" >
<input type="button" value="down" onclick="ud_dec(this)">
</form>

Related

How can I show and hide the form in HTML page?

I have an html form which is supposed to appear only after clicking a submit button. I have added simple JavaScript to display the same on click.
Intention is show the update form on click of the button above it. Can anyone help me out to find what I did wrong?
function showForm() {
alert('Form has been submitted');
document.getElementByClass(UpdateForm - section).style.display = 'block';
}
.UpdateForm-section.hidden {
display: none;
}
<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
<form action="" method="post" class="UpdateForm-section">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button" />
</form>
</div>
Try the below changes in your code.
In CSS:
remove .hidden from .UpdateForm-section.hidden
In JS:
use querySelector instead of getElementByClass and wrap the name of the class in quotes.
Wokring code:
function showForm() {
alert('Form has been submitted');
document.querySelector('.UpdateForm-section').style.display = 'block';
}
.UpdateForm-section {
display: none;
}
<input type="submit" name="delete" class="button-1" value="Update" onclick="showForm();" />
<br><br><br>
<!-- Update details form here -->
<div>
<form action="" method="post" class="UpdateForm-section">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button" />
</form>
</div>
I suggest you to have the following approach: define a desired style when your element will be shown:
.UpdateForm-section { // here we set the default style of the div -> not displayed
display: none;
}
.UpdateForm-section.active { // here the CSS selector is stronger, so it will override the previous statement
display: block;
}
Then in your javascript, you just add the "active" class to the element when you want it to show:
function showForm() {
alert('Form has been submitted');
document.querySelector(".UpdateForm-section").classList.add('active'); // Prefer to use an id to select an unique element to avoid miss coding
}
You just need to save your form in a variable, and you can easyly change it after it. You will need to remove .hidden from your css.
You need to use form[0], because when you make getElementsByClassName, you are getting an array:
function showForm() {
alert('Form has been submitted');
var form = document.getElementsByClassName("UpdateForm-section");
form[0].style.display = 'block'
}

jquery val() only taking the value of first row

i have a situation here , where i have a form in which i have some similar rows and when i submit the form , i want the quantity value to be displayed which was initial , it is returning the initial value of only first row , i know it will do so , but not sure of the solution
html code :
<form class="editcart" method="post" action="">
<input type="text" class="pid" name="pid" value="${product.pid}" hidden/>
<input type="text" class="spid" name="spid" value="${product.sub_pid}" hidden/>
<input type="text" class="cartid" name="cartid" value="${product.cart_id}" hidden/>
<input type="text" class="quantity" name="quantity" value="20" readonly="readOnly"/>
<input type="button" value="Edit" class="enable"/>
<input type="submit" value="Save" class="save" hidden/>
<input type="text" class="pid" name="pid" value="${product.pid}" hidden/>
<input type="text" class="spid" name="spid" value="${product.sub_pid}" hidden/>
<input type="text" class="cartid" name="cartid" value="${product.cart_id}" hidden/>
<input type="text" class="quantity" name="quantity" value="5" readonly="readOnly"/>
<input type="button" value="Edit" class="enable"/>
<input type="submit" value="Save" class="save" hidden/>
<input type="text" class="pid" name="pid" value="${product.pid}" hidden/>
<input type="text" class="spid" name="spid" value="${product.sub_pid}" hidden/>
<input type="text" class="cartid" name="cartid" value="${product.cart_id}" hidden/>
<input type="text" class="quantity" name="quantity" value="4" readonly="readOnly"/>
<input type="button" value="Edit" class="enable"/>
<input type="submit" value="Save" class="save" hidden/>
</form>
and jquery code is :
$(document).ready(function(){
var init = $('.quantity',this).val();
$('.enable').click(function(){
$(this).prev('.quantity').prop('readOnly',false);
$(this).hide();
$(this).next('.save').fadeIn();
});
$('.editcart').submit(function() {
var quant = $('.quantity',this).val();
var pid = $('.pid',this).val();
var spid = $('.spid',this).val();
var cartid = $('.cartid',this).val();
alert("the init value is : "+init);
return false;
});
});
fiddle
try this:-
var init =0;
$('.quantity',this).each(function(){
init+=parseInt($(this).val());
});
Since you want the value of clicked row use this code:-
$('.save').click(function(){
init=$(this).prev().prev('.quantity').val();
});
Demo
Demo 1

Clear individual text box in html

I have a form with the ten text boxes. I have a submit button too. I would like to clear, two text box in row on click of a button in html.
Below is the screen shot:
:
CODE:
<form action="store_number.php" method="POST" name="myform" class="addform" div id="container" enctype="multipart/form-data">
<fieldset>
<legend>Number Details</legend><br>
<div class="fieldwrapper">
<div class="thefield">
<input type="text" class="hint" id="name1" onkeypress='validate1(event)' value="<?php echo $namearray[0];?>" onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '<?php echo $namearray[0];?>';}" size="25" name="name1" maxlength="30"/> <input type="text" onkeypress='validate(event)' class="hint" id="number1" value="<?php echo $numberarray[0];?>" onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '<?php echo $numberarray[0];?>';}" size="20" name="number1" maxlength="10"/> <img src="img/clear.png" width="24" height="24"></a> </div>
</div>
</fieldset>
<p align="center">
<div class="buttonsdiv">
<p align="center">
<input type="submit" value="Submit" name="submit" id="submit" class="button1" />
</div>
</form>
When I click on the red cross button for a particular row, I would like get to name and number textbox to have value Name and Number.
I tried to submit button button but then it is clashing with the FORM. Reset doesn't work too.
How do I achieve this?
It's hard to tell without the actual HTML, but assuming your code looks something like this:
<div>
<input type="text"><input type="text"><button>X</button>
</div>
You'll probably want to add a listener <button onclick="clearRow(this)"> and a JS function to clear the input fields:
function clearRow(button) {
var inputs = button.parentNode.getElementsByTagName('INPUT');
inputs[0].value = 'Name';
inputs[1].value = 'Number';
}
Edit: You added your HTML code. Just attach the listener to your <img> tag.
Edit2: I can't seem to find the beginning of that <a> tag in that one long line. You may have to adapt the first line of clearRow to account for further nesting of the "X button".
Here is a proof of concept, even though it's rather ugly and bloated, it gets the job done.
There are prettier ways to solve this, but this one should be easy to understand:
Example: http://codepen.io/anon/pen/JKtmh
<input type="text" id="1a" value="Name"/><input type="text" id="1b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('1a').value!='Name') || (document.getElementById('1b').value!='Number')) {((document.getElementById('1a').value='Name') && (document.getElementById('1b').value='Number'))};"/><br/>
<input type="text" id="2a" value="Name"/><input type="text" id="2b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('2a').value!='Name') || (document.getElementById('2b').value!='Number')) {((document.getElementById('2a').value='Name') && (document.getElementById('2b').value='Number'))};"/><br/>
<input type="text" id="3a" value="Name"/><input type="text" id="3b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('3a').value!='Name') || (document.getElementById('3b').value!='Number')) {((document.getElementById('3a').value='Name') && (document.getElementById('3b').value='Number'))};"/><br/>
<input type="text" id="4a" value="Name"/><input type="text" id="4b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('4a').value!='Name') || (document.getElementById('4b').value!='Number')) {((document.getElementById('4a').value='Name') && (document.getElementById('4b').value='Number'))};"/><br/>
<input type="text" id="5a" value="Name"/><input type="text" id="5b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('5a').value!='Name') || (document.getElementById('5b').value!='Number')) {((document.getElementById('5a').value='Name') && (document.getElementById('5b').value='Number'))};"/><br/>
<input type="text" id="6a" value="Name"/><input type="text" id="6b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('6a').value!='Name') || (document.getElementById('6b').value!='Number')) {((document.getElementById('6a').value='Name') && (document.getElementById('6b').value='Number'))};"/><br/>
<input type="text" id="7a" value="Name"/><input type="text" id="7b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('7a').value!='Name') || (document.getElementById('7b').value!='Number')) {((document.getElementById('7a').value='Name') && (document.getElementById('7b').value='Number'))};"/><br/>
<input type="text" id="8a" value="Name"/><input type="text" id="8b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('8a').value!='Name') || (document.getElementById('8b').value!='Number')) {((document.getElementById('8a').value='Name') && (document.getElementById('8b').value='Number'))};"/><br/>
<input type="text" id="9a" value="Name"/><input type="text" id="9b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('9a').value!='Name') || (document.getElementById('9b').value!='Number')) {((document.getElementById('9a').value='Name') && (document.getElementById('9b').value='Number'))};"/><br/>
<input type="text" id="10a" value="Name"/><input type="text" id="10b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('10a').value!='Name') || (document.getElementById('10b').value!='Number')) {((document.getElementById('10a').value='Name') && (document.getElementById('10b').value='Number'))};"/>
PS: You should use an ID that doesn't start with a number. HTML validators may not like it.
Assumin that your HTML is something like that :
<form>
<div class="row">
<input type="text" name="name-1" class="nameInput">
<input type="text" name="number-1" class="numberInput">
<button class="cross"> X </button>
</div>
<div class="row">
<input type="text" name="name-1" class="nameInput">
<input type="text" name="number-1" class="numberInput">
<button class="cross"> X </button>
</div>
</form>
If you want to use jQuery; this will do the job :
$(document).ready(function(){
$('button.cross').click(function(){
var $parent = $(this).parent('dv');
$parent.find('input.nameInput').val('Name');
$parent.find('input.numberInput').val('Number');
})
});

increment or de-increment on button press

The form code:
<td>
<form action="cart.php" method="get">
<input type="button" onclick="buttonSubtract1()" name="subtract1"
value="-"/>
<input type="text" size="4" id="qty1" name="quantity1" value="0"/>
<input type="button" onclick="buttonAdd1()" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
</form>
</td>
The javascript:
var i = 0;
var qty1 = document.getElementById('qty1').value;
function buttonAdd1() {
document.getElementById('qty1').value = ++i;
}
function buttonSubtract1() {
if (qty1 > 0) {
document.getElementById('qty1').value = --i;}
}
I changed the code to increment and de-increment using javascript which worked fine so I tried to make it so that de-incrementation only works if the number is positive but now incrementing is working fine but it is not allowing de-incrementation of any number. Why is this?
<?php if (isset($_GET['subtract1'])) {
$quantity1 = $_GET['$quantity1'];
$quantity1--;
}
?>
<?php if (isset($_GET['add1'])) {
$quantity1 = $_GET['$quantity1'];
$quantity1++;
}
?>
<form action="cart.php" method="get">
<input type="submit" name="subtract1" value="-"/>
<input type="text" size="4" name="$quantity1" value="<?php echo $quantity1 ?>"/>
<input type="submit" name="add1" value="+"/>
Try the following.
Make sure the php code is above the html (so that the data gets processed before you output it) :
<?php
if(isset($_GET['quantity1'])) {
$quantity1 = intval($_GET['quantity1']);
if(isset($_GET['subtract1'])) {
$quantity1--;
} else if (isset($_GET['add1'])) {
$quantity1++;
}
}
?>
<td>
<form action="cart.php" method="get">
<input type="button" name="subtract1" value="-" />
<input type="text" size="4" name="quantity1" value="<?php echo $quantity1; ?>" />
<input type="button" name="add1" value="+" />
<input type="submit" name="product1" value="Add" />
</form>
</td>
My understanding is to get a reference to the object (qty1) then test or change the properties as required. This code seems to do what is required. It sends the appropriate values as the '$_GET' parameters as checked in PHP.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script type = 'text/javascript'>
var rfvGlobal = {};
function buttonAdd1() {
rfvGlobal.qty1.value++;
}
function buttonSubtract1() {
if (rfvGlobal.qty1.value > 0) {
rfvGlobal.qty1.value--;
}
}
</script>
</head>
<body>
<table>
<td><form action="" method="get">
<input type="button" onclick="buttonSubtract1()" name="subtract1" value="-"/>
<input type="text" size="4" id="qty1" name="quantity1" value="0"/>
<input type="button" onclick="buttonAdd1()" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
</form></td>
</table>
<script>
rfvGlobal.qty1 = document.getElementById('qty1');
</script>
</body>
</html>
View this working demo
Your problem is that you aren't checking that the element's value, just qty1 which was set on page load but never updated.
function buttonSubtract1() {
var qtyElement = document.getElementById('qty1'); // the element
if (qtyElement.value > 0) qtyElement.value = --i; // if its value at this point in time >0 change it
}
The above fixes your current code, but...
Why don't you write less (this is the only function you need)
function buttonAlter(which, byWhat){
var qtyElement = document.getElementById('qty' + which);
if (byWhat > 0 || qtyElement.value > 0) qtyElement.value = parseInt(qtyElement.value) + byWhat;
}
for more buttons
<form action="cart.php" method="get">
<input type="button" onclick="buttonAlter(1, -1)" name="subtract1" value="-"/>
<input type="text" size="4" id="qty1" name="quantity1" value="0"/>
<input type="button" onclick="buttonAlter(1, 1)" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
<br />
<input type="button" onclick="buttonAlter(2, -1)" name="subtract1" value="-"/>
<input type="text" size="4" id="qty2" name="quantity1" value="0"/>
<input type="button" onclick="buttonAlter(2, 1)" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
<br />
<input type="button" onclick="buttonAlter(3, -1)" name="subtract1" value="-"/>
<input type="text" size="4" id="qty3" name="quantity1" value="0"/>
<input type="button" onclick="buttonAlter(3, 1)" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
</form>
This version's demo

Get dynamic id when keyup triggering using jquery/javascript

I have dynamically showing product list with price and quantity in text box, i want to calculate product total price when enter the quantity.I have done this by onclick when increase or decrease button.but i also need to calculate the total price when key up quantity textbox
My code is like
<div id="gw_articles">
<div id="article_list">
<p>
<div id="article_1_element">
<input type="text" id="jform_article_1_name" name="jform[article_1][name] " value="Spark plug ARH-II AIW16 IRIDIUM+" disabled="disabled" size="35" /> <a id="jform_article_1_modal">Select an product</a>
<input type="hidden" id="jform_article_1_id" name="jform[article_1][id]" value="2" />
<input type="hidden" name="jform[article_1][price]" id="jform_article_1_price" value="30.00" class="inputbox" />
<input type="text" name="jform[article_1][price_total]" id="jform_article_1_price_total" value="90" class="inputbox" size="10" />
<input type="text" name="jform[article_1][quantity]" id="jform_article_1_quantity" value="3" class="inputbox" size="10" />
<input type="button" class="btn" value="+" onclick="document.id('jform_article_1_quantity').value++; calculateTotalPrice('jform_article_1')" />
<input type="button" class="btn" value="-" onclick="if(document.id('jform_article_1_quantity').value >1)document.id('jform_article_1_quantity').value--; calculateTotalPrice('jform_article_1')" />
<a title="test" class="btn btn-danger" onclick="removeElement('article_1_element')"> Delete </a>
</div>
</p>
<p>
<div id="article_2_element">
<input type="text" id="jform_article_2_name" name="jform[article_2][name] " value="Spark plug ARH-II AIW20 IRIDIUM+" disabled="disabled" size="35" /> <a id="jform_article_2_modal" class="btn modal" title="Select an product">Select an product</a>
<input type="hidden" id="jform_article_2_id" name="jform[article_2][id]" value="1" />
<input type="hidden" name="jform[article_2][price]" id="jform_article_2_price" value="40.00" class="inputbox" />
<input type="text" name="jform[article_2][price_total]" id="jform_article_2_price_total" value="40" class="inputbox" size="10" />
<input type="text" name="jform[article_2][quantity]" id="jform_article_2_quantity" value="1" class="inputbox" size="10" />
<input type="button" class="btn" value="+" onclick="document.id('jform_article_2_quantity').value++; calculateTotalPrice('jform_article_2')" />
<input type="button" class="btn" value="-" onclick="if(document.id('jform_article_2_quantity').value >1)document.id('jform_article_2_quantity').value--; calculateTotalPrice('jform_article_2')" />
<a title="test" class="btn btn-danger" onclick="removeElement('article_2_element')"> Delete </a>
</div>
</p>
</div>
<input type="hidden" id="articles_max" name="articles_max" value="2" />
</div>
So much going on in this code goodness. Try this:
function calculateTotalPrice(article) {
var price = and * multiplication - (some + addition);
$('#jform_article_2_total_price').val(price);
}
$('#jform_article_2_quantity').focusout(function(){
calculateTotalPrice('jform_article_2');
});
I sloved it by
`jQuery(document).ready(function($) {
jQuery("input[id*='quantity']" ).focusout(function(){
max_value = $("#articles_max").val();
var n =1;
jQuery("input[id*='quantity']" ).each(function(){
if (n <= max_value) {
id='jform_article_'+n;
calculateTotalPrice(id);
n++;
}
})
})
});
function calculateTotalPrice(field){
var price = document.id(field + "_price").value;
var quantity = document.id(field + "_quantity").value;
document.id(field + "_price_total").value = price * quantity;
}`

Categories