We Keep Coding

How to Remove input text fields in javascript

Actually I want to add text fields by clicking on button. It is working but I am unable to remove the text fields by clicking on remove button. Please see the code below:
<script type="text/javascript">
var i = 1;
function more_fields() {
i++;
var objTo = document.getElementById('more_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+i);
var rdiv = 'removeclass'+i;
divtest.innerHTML = '<div><input type="text" name="comp[]" id="component"
value="" placeholder="Product" /> <input type="number"
name="quantity[]" id="quantity" placeholder="Quantity" /> <input
type="number" name="rate[]" id="rate" placeholder="Rate" /> <input
type="number" name="amount[]" id="amount" placeholder="Amount" readonly />
<button class="btn btn-danger" type="button" onclick="remove_more_fields('+
i +');" style="height:2em; width:3%;">X</button></div>';
objTo.appendChild(divtest)
}
function remove_more_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
<div class="form-group fieldgroup" id="more_fields">
<div>
<input type="text" name="comp[]" id="component" value=""
placeholder="Product" />
<input type="number" name="quantity[]"
id="quantity" placeholder="Quantity"/>
<input type="number" name="rate[]"
id="rate" placeholder="Rate" />
<input type="number" name="amount[]"
id="amount" placeholder="Amount" readonly/>
<button class="add_field_button"
type="button" onclick="more_fields()"> Add</button>
</div>
<br/>
</div>
How can I get that result? And I want to calculate the quantity*rate and display the result automatically in Amount field. If I change either quantity or rate, automatically amount will change and display the result. Please suggest me...Thank you.

Try this to get amount:
<div class="form-group fieldgroup" id="more_fields">
<div>
<input type="text" name="comp[]" id="component" value="" placeholder="Product" />
<input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" />
<input type="number" name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" />
<input type="number" name="amount[]" id="amount" placeholder="Amount" readonly/>
<button class="add_field_button" type="button" onclick="more_fields()"> Add</button>
</div>
<br/>
</div>
<script>
var i = 1;
function more_fields() {
i++;
var objTo = document.getElementById('more_fields');
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + i);
var rdiv = 'removeclass' + i;
divtest.innerHTML = '<div><input type="text" name="comp[]" id="component" value="" placeholder="Product" /> <input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" /> <input type="number" name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" /> <input type="number" name="amount[]" id="amount" placeholder="Amount" readonly /> <button class="btn btn-danger" type="button" onclick="remove_more_fields(' + i + ');" style="height:2em; width:3%;">X</button></div>';
objTo.appendChild(divtest)
}
function remove_more_fields(rid) {
$('.removeclass' + rid).remove();
}
function getAmount(el)
{
console.log(el.parentElement);
var inputs = el.parentElement.getElementsByTagName('input');
inputs[3].value = (parseInt(inputs[1].value) * parseFloat(inputs[2].value));
}
</script>
Here is working JSFiddle

Give the onclick function fro remove button like this - onclick="remove_more_fields(i);" . This would make the function call with value of i being passed to remove_more_fields function.
What I missed telling here is you can include the entire divtest.innerHTML definition in - <div>...</div> (note the quote here) , since my editor was showing error for the string spanning multiple lines. This might have triggered the evaluation of i and it worked perfectly fine for me.

How to get input values of fields on click of that div's button?

I have multiple product div with buttons having same onlick function.I want to get the values of the input fields on click of button.Both, input fields and button belong to same div.Currently i am getting values of very 1st product onclick of any button.Please help
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$15.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">
<input type="hidden" name="prod_id" id="prod_id" value="150">
<input type="hidden" name="code" id="code" value="151PM">
<input type="button" value="" onclick="promoproduct(this.id)" id="promo_button_1">
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">
<input type="hidden" name="prod_id" id="prod_id" value="151">
<input type="hidden" name="code" id="code" value="152PM">
<input type="button" value="" onclick="promoproduct(this.id)" id="promo_button_2">
function promoproduct(clicked_id){
var qty = $("#itemqty").val();
var prod_id = $("#prod_idprod_id").val();
var code = $("#code").val();

Identifiers must be unique.
You should pass the current element content this to inline click event handler. You can use common class and various traversal methods to target elements.
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_2">
Then use relationship to target parent buy using .parent()/.closest() afterward using .find()
function promoproduct(clickedElem){
var parent = $(clickedElem).closest(".buy");
var qty = parent.find('.quantity-wrp').val();
var prod_id = parent.find('[name="prod_id"]').val();
var code = parent.find('name="code"').val();
}

As you have both buttons in different divs you can use the parent as reference to get the values from input.
Also when calling function you need to pass this not this.id
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$15.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">
<input type="hidden" name="prod_id" id="prod_id" value="150">
<input type="hidden" name="code" id="code" value="151PM">
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_1">
</div>
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="Hidden1" value="1">
<input type="hidden" name="prod_id" id="Hidden2" value="151">
<input type="hidden" name="code" id="Hidden3" value="152PM">
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_2">
</div>
<script>
function promoproduct(clicked_id) {
var parent = $(clicked_id).closest("div.buy");
var qty = $(parent).find("input[name=qty]").val();
var prod_id = $(parent).find("input[name=prod_id]").val();
var code = $(parent).find("input[name=code]").val();
}
</script>

First, the id attribute should be unique in the same document, so you could use the general classes instead :
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="1">
<input type="hidden" name="prod_id" class="prod_id" value="151">
<input type="hidden" name="code" class="code" value="152PM">
<input type="button" value="" onclick="promoproduct()" id="promo_button_2">
</div>
NOTE : No need to pass a parameter to the click function promoproduct(this) just pass this so you could get the current clicked element using this object inside your function.
You could use the closest() method to go up to the parent div buy then get the values :
function promoproduct(clicked_id){
var parent_buy = $(this).closest(".buy");
var qty = parent_buy.find('.quantity-wrp').val();
var prod_id = parent_buy.find('.prod_id').val();
var code = parent_buy.find('.code').val();
}
Hope this helps.
Snippet avoiding the use of the inline-event onclick :
$('.buy input:button').on('click',function(){
var parent_buy = $(this).closest(".buy");
var qty = parent_buy.find('.quantity-wrp').val();
var prod_id = parent_buy.find('.prod_id').val();
var code = parent_buy.find('.code').val();
console.log(qty,prod_id,code);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="1">
<input type="hidden" name="prod_id" class="prod_id" value="151">
<input type="hidden" name="code" class="code" value="152PM">
<input type="button" value="Promo product" id="promo_button_1">
</div>
<div class="buy" style="text-align:center;">
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span>
<input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="2">
<input type="hidden" name="prod_id" class="prod_id" value="252">
<input type="hidden" name="code" class="code" value="255PM">
<input type="button" value="Promo product" id="promo_button_2">
</div>

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

Auto Clear & Refill Texta Area Value

I have a simple form using the Value to inform the user what they're to put in each text area. I have been able to make the text area's auto clear using this javascript:
<script type="text/javascript">
function setValue(field)
{
if(''!=field.defaultValue)
{
if(field.value==field.defaultValue)
{
field.value='';
}
else if(''==field.value)
{
field.value=field.defaultValue;
}
}
}
</script>
What would I need to add to have the Value re-appear if the user doesn't fill the text area and they no longer have it selected? Here's the form markup, if that helps any:
<form method="post" action="<?php echo $PHP_SELF; ?>">
<input type="text" name="first" value="First Name" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="last" value="Last Name" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"> <br>
<input type="text" name="address" value="Address" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="city" value="City" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"><br>
<input type="text" name="state" value="State" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="zip" value="Zip" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"><br>
<input type="text" name="phone" value="Phone" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="radio" name="day" value="Day"> Day
<input type="radio" name="evening" value="Evening"> Evening <br>
<input type="text" name="email" value="Email" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="submit" name="submit" value="Send Request" class="push_button blue">
(sorry for the poor wording, it's early!)
Thank you!
Any help with this would be much appreciated.

You are looking for the placeholder html5 attribute
<input type="text" palceholder="First Name" />
http://jsfiddle.net/MesvN/
http://davidwalsh.name/html5-placeholder