Develop Reference

How to get total sum from input values using Javascript?

I want to display the total sum of values shown in the amount input-boxes in the next field named sub total without refreshing page.
JS-code for sum of n numbers:
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end">0</td>
</tr>
</tbody>
</table>
</div>

I don't know why, but obviously rare are those who understand that using a form has benefits ...
const myForm = document.forms['my-form']
myForm.oninput = ({target: elm}) => // for any change iside the form
{
let
row = elm.closest('tr')
, Dsc = row.querySelector('input[name^="desc"]')
, Qte = row.querySelector('input[name^="quantity"')
, Prx = row.querySelector('input[name^="price"')
, Amt = row.querySelector('input[name^="amount"')
;
Dsc.required = (Qte.valueAsNumber > 0)
switch (elm.name.split('_')[0]) {
case 'quantity':
case 'price':
Amt.value = Qte.valueAsNumber * Prx.valueAsNumber
myForm.SubTotal.textContent =
[...myForm.querySelectorAll('input[name^="amount"')]
.reduce((sum,el)=>sum + +el.value,0)
break;
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable form submiting
let formInputs = Object.fromEntries( new FormData(myForm).entries() )
console.clear()
console.log( formInputs)
}
table {
border-collapse: collapse;
margin : 2em 1em;
}
td, th {
padding : .2em;
border : 1px solid darkblue;
}
input {
width : 6em;
text-align : right;
}
td:first-of-type input {
width : 10em;
text-align : left;
}
<form name="my-form">
<table>
<thead>
<tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr>
</thead>
<tbody>
<tr>
<td> <input type="text" name="desc_1" > </td>
<td> <input type="number" name="quantity_1" value="0" min="0"> </td>
<td> <input type="number" name="price_1" value="0" min="0"> </td>
<td> <input type="text" name="amount_1" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_2" > </td>
<td> <input type="number" name="quantity_2" value="0" min="0"> </td>
<td> <input type="number" name="price_2" value="0" min="0"> </td>
<td> <input type="text" name="amount_2" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_3" > </td>
<td> <input type="number" name="quantity_3" value="0" min="0"> </td>
<td> <input type="number" name="price_3" value="0" min="0"> </td>
<td> <input type="text" name="amount_3" disabled value="0"></td>
</tr>
</tbody>
<tfoot>
<td colspan="4"> Sub Total : <output name="SubTotal">0</output> </td>
</tfoot>
</table>
<button type="submit">submit</button>
</form>

You can assign an id to the subtotal cell and change its value on every Mul call.
Something like this :
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
}
<html>
<body>
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td id="subTotal" class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

how to use javascript functions multiple times

I'm running a code where I must create a function and call it multiple times. I am having trouble calling it more than once.
how to use Mul() function in second table row.
Please help Me.
Thanks.
function Mul() {
var quantity = document.getElementById("quantity").value;
var price = document.getElementById("price").value;
document.getElementById(id).value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="quantity" class="form-control" onkeyup="Mul()">
</td>
<td>
<input type="number" id="price" class="form-control" onkeyup="Mul()">
</td>
<td>
<input type="text" id="amount" class="form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="quantity" class="form-control">
</td>
<td>
<input type="number" id="price" class="form-control">
</td>
<td>
<input type="text" id="result" class="form-control" disabled>
</td>
</tr>
</tbody>
</table>

Add class name for every input and pass index to Mul() function
try below code.
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount" class="amount form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount" class="amount form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control" onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount" class="amount form-control" disabled>
</td>
</tr>
</tbody>
</table>

Monitor the changes in table using JavaScript or HTML

I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.

You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>

Is there a way I can make a form button link to a different page after certain number of clicks?

I am creating a landing page with a form. I want to set up where every 10th person who signed up links to a "special" page where they receive a prize. For example: first 9 people will redirect to thankyou.html page where the 10th person will link to prize.html page. Is this possible? Thank you in advance.
<form method="post" enctype="multipart/form-data" action="http://form.relevanttools.com/rt-cgi-bin/satellite">
<input type="hidden" name="code" value="12531"> <input type="hidden" name="db" value="project"> <input type="hidden" name="source" value="Prize"> <input type="hidden" name="optin" value=""> <input type="hidden" name="type" value="signup"> <input type="hidden" name="user_email_msg" value=""> <input type="hidden" name="admin_email_addr" value=""> <input type="hidden" name="redir" value="http://www.link.com/thankyou.html">
<table border="0">
<tr>
<td> </td>
<td>First Name*</td>
<td> </td>
<td> <input type="text" id="first_name" name="first_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Last Name*</td>
<td> </td>
<td> <input type="text" id="last_name" name="last_name*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Email*</td>
<td> </td>
<td> <input type="text" id="email" name="email*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Age*</td>
<td> </td>
<td> <input type="text" id="age" name="age*" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Gender</td>
<td> </td>
<td>
<div class="align-left"> <input type="radio" name="gender" value="Male">Male<br> <input type="radio" name="gender" value="Female">Female<br> </div>
</td>
</tr>
<tr>
<td> </td>
<td>Zip</td>
<td> </td>
<td> <input type="text" id="zip" name="zip" size="20" value=""> </td>
</tr>
<tr>
<td> </td>
<td>Private Policy*</td>
<td> </td>
<td> <input type="checkbox" id="private_policy" name="private_policy" value="x"> </td>
</tr>
<tr>
<td> </td>
<td>Email Subscription</td>
<td> </td>
<td> <input type="checkbox" id="email_opt_in" name="email_opt_in" value="x"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type="submit" value = "Submit" ></td>
</tr>
</table>
</form>

You could give the button a 10% probability of redirecting to the prize page - but that's the best without a server.
Javascript is client side. Meaning it has no way of knowing how other people have acted. The only way to know that is storing every click in a database and counting that.

Display the div tag hidden content above the button on button click

I want to display the div tag hidden content above the button on button(Add Address) click and at the same time shift the button below the div tag content and again on cancel button click put the button to the original position. I am doing the code in a .tpl file.
function addPickupAddress()
{
$("#addPickupAddressForm").show();
}
<div id="addPickupAddressForm" style="height:100px;display: none;">
<span style="font-size:20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
<tr>
<td>
Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
</td>
</tr>
<tr>
<td>
First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
</td>
</tr>
<tr>
<td>
Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
</td>
</tr>
<tr>
<td>
Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
<tr>
<td>
State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
</td>
</tr>
<tr>
<td>
PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
</td>
</tr>
<tr>
<td>
Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;padding-top: 10px;cursor:pointer;float: left; margin-left:120px; margin-bottom:10px;" onclick="addPickupAddress();">Add Address</button>

Try using the jquery toggle-function.
Look at this Pen to see how it's used: http://codepen.io/anon/pen/rrxYxq
function addPickupAddress ()
{
$("#addPickupAddressForm").toggle();
}
Also, the Button appears to be inside the form when it's visible because it's height is set to 100px but the children inside the element are actually higher. Remove it and the height will be calculated automatically.

Replace Height 100px to 100% for display in full height.
And Put Cancel button in below div.
Try below code.
function addPickupAddress(isVisible)
{
if(isVisible){
$("#addPickupAddressForm").show();
$('#Cancelbuttonpickup').show();
}
else{
$("#addPickupAddressForm").hide();
$('#Cancelbuttonpickup').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="height:100%;display: none;">
<span style="font-size:20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
<tr>
<td>
Title </td><td> <input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
</td>
</tr>
<tr>
<td>
First Name </td><td> <input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
</td>
</tr>
<tr>
<td>
Last Name </td><td> <input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
</td>
</tr>
<tr>
<td>
Address </td><td> <input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
Address2 </td><td> <input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
City </td><td> <input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
<tr>
<td>
State </td><td> <input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
</td>
</tr>
<tr>
<td>
PinCode </td><td> <input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
</td>
</tr>
<tr>
<td>
Phone <span style="float: right;">+91</span></td><td> <input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;" onclick="addPickupAddress(true);">Add Address</button>
<button type="button" id="Cancelbuttonpickup" style="color: white;background-color: #0899C9;padding: 5px;cursor:pointer;float: left; margin-bottom:10px;display:none;" onclick="addPickupAddress(false);">Cancel</button>

Check following code. Its implemented according to your requirement
function addPickupAddress() {
$("#addPickupAddressForm").show();
$("#cancelbutton").show();
$("#addbuttonpickup").hide();
}
function hidePickupAddress() {
$("#addPickupAddressForm").hide();
$("#cancelbutton").hide();
$("#addbuttonpickup").show();
}
.buttonstyle {
color: white;
background-color: #0899C9;
padding: 5px;
padding-top: 10px;
cursor: pointer;
float: left;
margin-left: 120px;
margin-bottom: 10px;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="display: none;">
<span style="font-size: 20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px; margin-left: 110px;"
cellpadding="2">
<tr>
<td>Title</td>
<td><input type="text" name="title" id="title_rev_pickup"
placeholder="Enter Title"></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" name="firstname"
id="firstname_rev_pickup" placeholder="Enter First Name"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lastname" id="lastname_rev_pickup"
placeholder="Enter Last Name"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address1" id="address1_rev_pickup"
placeholder="Enter Address"></td>
</tr>
<tr>
<td>Address2</td>
<td><input type="text" name="address2" id="address2_rev_pickup"
placeholder="Enter Address"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="city" id="city_rev_pickup"
placeholder="Enter City Name"></td>
</tr>
<tr>
<td>State</td>
<td><input type="text" name="state" id="state_rev_pickup"
placeholder="Enter State Name"></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="zipcode" id="zipcode_rev_pickup"
placeholder="Enter ZipCode"></td>
</tr>
<tr>
<td>Phone <span style="float: right;">+91</span></td>
<td><input type="text" name="phone" id="phone_rev_pickup"
placeholder="Enter City Name"></td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup"
class="buttonstyle"
onclick="addPickupAddress();">Add Address</button>
<button type="button" id="cancelbutton"
class="buttonstyle" style="display:none"
onclick="hidePickupAddress();">Cancel</button>

Just remove the float on the button and the fixed height of your hidden div, and the button will appear under the div as expected. To hide the div again, you can use jQuery's toggle() function. Also try not to use inline styles as it will make your code much less readable.
function addPickupAddress() {
$("#addPickupAddressForm").toggle();
$("#addbuttonpickup").html($("#addbuttonpickup").html() == 'Cancel' ? 'Add Address' : 'Cancel');
}
button {
color: white;
background-color: #0899C9;
padding: 5px;
padding-top: 10px;
cursor: pointer;
margin-left: 120px;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addPickupAddressForm" style="display: none;">
<span style="font-size:20px">Add Pickup Address</span>
<table id="addAddressTable" style="width: 470px;margin-left: 110px;" cellpadding="2">
<tr>
<td>
Title</td>
<td>
<input type="text" name="title" id="title_rev_pickup" placeholder="Enter Title">
</td>
</tr>
<tr>
<td>
First Name</td>
<td>
<input type="text" name="firstname" id="firstname_rev_pickup" placeholder="Enter First Name">
</td>
</tr>
<tr>
<td>
Last Name</td>
<td>
<input type="text" name="lastname" id="lastname_rev_pickup" placeholder="Enter Last Name">
</td>
</tr>
<tr>
<td>
Address</td>
<td>
<input type="text" name="address1" id="address1_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
Address2</td>
<td>
<input type="text" name="address2" id="address2_rev_pickup" placeholder="Enter Address">
</td>
</tr>
<tr>
<td>
City</td>
<td>
<input type="text" name="city" id="city_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
<tr>
<td>
State</td>
<td>
<input type="text" name="state" id="state_rev_pickup" placeholder="Enter State Name">
</td>
</tr>
<tr>
<td>
PinCode</td>
<td>
<input type="text" name="zipcode" id="zipcode_rev_pickup" placeholder="Enter ZipCode">
</td>
</tr>
<tr>
<td>
Phone <span style="float: right;">+91</span>
</td>
<td>
<input type="text" name="phone" id="phone_rev_pickup" placeholder="Enter City Name">
</td>
</tr>
</table>
</div>
<button type="button" id="addbuttonpickup" onclick="addPickupAddress();">Add Address</button>

You just have to do this
function addPickupAddress(isShow)
{
$("#addPickupAddressForm,#cancel")[isShow?"show":"hide"]();
}
Plus you have to remove the fixed size of your div content.
Have created a fiddle for same, check it out here