Clear individual text box in html - javascript

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');
})
});

Related

Enable and disable input text while clicking on same button

Actually I want to enable the input text by clicking on edit button and if I click again on that edit button, the input text should be in disable mode. I am able to enable but how to disable. here is my code:
<script>
function toggle(){
document.getElementById("Name").disabled = false;
document.getElementById("email").disabled = false;
document.getElementById("contact").disabled = false;
}
</script>
<form>
<input type="text" class="form-control"
name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />
<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />
<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />
<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit"
onclick="toggle()" >
</form>
please suggest what i have to make changes in the code.
To achieve this you simply need to invert the current value of the disabled property on the required elements. To do that, use the ! operator before the current setting, like this:
function toggle() {
document.getElementById("Name").disabled = !document.getElementById("Name").disabled;
document.getElementById("pan").disabled = !document.getElementById("pan").disabled;
document.getElementById("email").disabled = !document.getElementById("email").disabled;
document.getElementById("contact").disabled = !document.getElementById("contact").disabled;
}
<form>
<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?= $name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?= $pan; ?>" disabled />
<input type="email" class="form-control" name="mail" id="email" value="<?= $email; ?>" disabled />
<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?= $mobile; ?>" disabled />
<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">
</form>
<button value="false"></button>
$('#btn_pause_resume').click(function () {
if ($(this).data('value')==='false') {
alert('Resumed...');
$(this).data('value', 'true');
} else {
alert('Paused...');
$(this).data('value', 'false');
}
});
try this out you should get the idea
You can try it this way. Ask if the element is disabled or not and then set the disabled value based on that.
function toggle() {
document.getElementById("Name").disabled = document.getElementById("Name").disabled ? false : true;
document.getElementById("email").disabled = document.getElementById("email").disabled ? false : true;
document.getElementById("contact").disabled = document.getElementById("contact").disabled ? false : true;
document.getElementById("pan").disabled = document.getElementById("pan").disabled ? false : true;
}
<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />
<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />
<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />
<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">
function toggle() {
var enable = (this.disabled);
document.getElementById("Name").disabled = enable;
document.getElementById("pan").disabled = enable
document.getElementById("email").disabled = enable;
document.getElementById("contact").disabled = enable;
};
<input type="text" class="form-control" name="name" id="Name" maxlength="30" value="<?=$name; ?>" disabled/>
<input type="text" class="form-control" name="pan" id="pan" value="<?=$pan; ?>" disabled />
<input type="email" class="form-control" name="mail" id="email" value="<?=$email; ?>" disabled />
<input type="number" class="form-control" name="mobile" id="contact" maxlength="10" value="<?=$mobile; ?>" disabled />
<input type="button" name="edit" id="edt" class="btn btn-primary btn-lg btn-block login-button" value="Edit" onclick="toggle()">

add/remove form missing "restrict" and "maxlength"

I'm having some trouble with my add/remove fields code.
If I run this code in phpfiddle and I make extra fields with the adding button.
<script>
var i = 1;
function addKid(){
if (i <= 4){
i++;
var div = document.createElement('div');
div.style.width = "44%";
div.style.height = "26px";
div.style.color = "white";
div.setAttribute('class', 'myclass');
div.innerHTML = 'Child : <input id="child_'+i+'" type="text" name="child_'+i+'" > Ages : <input id="ages_'+i+'" type="text" name="ages_'+i+'"><input type="button" id="add_kid()" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
document.getElementById('kids').appendChild(div);
}
}
function removeKid(div) {
document.getElementById('kids').removeChild( div.parentNode );
i--; }
</script>
<div id="kids">
Child : <input id="child_1" type="text" name="child_1" onfocus="emptyElement('status')" onkeyup="restrict('child_1')" maxlength="50">
Ages : <input id="ages_1" type="text" name="ages_1" onfocus="emptyElement('status')" onkeyup="restrict('ages_1')" maxlength="10"><input type="button" id="add_kid()" onClick="addKid()" value="+" />
</div>
Then if I use firebug on the first fields I get this.
<input id="child_1" type="text" maxlength="50" onkeyup="restrict('child_1')" onfocus="emptyElement('status')" name="child_1">
<input id="ages_1" type="text" maxlength="10" onkeyup="restrict('ages_1')" onfocus="emptyElement('status')" name="ages_1">
On my extra added fields I get this with firebug.
<input id="child_2" type="text" name="child_2">
<input id="ages_2" type="text" name="ages_2">
How can I add a "restrict" and "maxlength" to the extra added fields like this.
<input id="child_2" type="text" name="child_2" onkeyup="restrict('child_1')" maxlength="50">
<input id="ages_2" type="text" name="ages_2" onkeyup="restrict('ages_1')" maxlength="10">
If I can make up 5 extra fields with the button, how can they each get a "restrict" and "maxlength" like this.
<input id="child_3" type="text" name="child_3" onkeyup="restrict('child_1')" maxlength="50">
<input id="ages_3" type="text" name="ages_3" onkeyup="restrict('ages_1')" maxlength="10">
<input id="child_4" type="text" name="child_4" onkeyup="restrict('child_1')" maxlength="50">
<input id="ages_4" type="text" name="ages_4" onkeyup="restrict('ages_1')" maxlength="10">
<input id="child_5" type="text" name="child_5" onkeyup="restrict('child_1')" maxlength="50">
<input id="ages_5" type="text" name="ages_5" onkeyup="restrict('ages_1')" maxlength="10">
Put these attributes inside input tags when you create them:
div.innerHTML = 'Child : <input id="child_'+i+'" type="text" name="child_'+i+'" maxlength="50" onkeyup="restrict(\'child_'+i+'\')"> Ages : <input id="ages_'+i+'" type="text" name="ages_'+i+'" maxlength="10" onkeyup="restrict(\'ages_'+i+'\')"><input type="button" onClick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
When you set HTML code with JavaScript you might need sometimes to escape quotes, like in this case:
onkeyup="restrict(\'child_'+i+'\')"
Also you should not:
Repeat an id attribute
Use () inside id attribute

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

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

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

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>

Categories