I have a registration page, in which I have a phone field, when I select that field the popup show underneath the other elements.
I want to know that why the phone field options are shown underneath the below options?
Please refer:
The code that I am using for:
sign-up.jsp
enter code here
<form action="Controller" method="GET" id="form">
<input type="hidden" name="command" value="registration"/>
<table class="sign-up-div-table">
<tr>
<td colspan="2"> <h3>Join us for free</h3> </td>
</tr>
<tr>
<td> <input type="text" name="firstname" class="form-control" placeholder="First name" required/> </td>
<td> <input type="text" name="lastname" class="form-control" pattern="^[A-Z][-a-zA-Z]+$" placeholder="Last name" required/> </td>
</tr>
<tr>
<td colspan="2"> <input type="email" name="email" class="form-control" placeholder="Email address" required onkeyup="check(this.value)"/> </td>
</tr>
<tr>
<td colspan="2"> <div id = "mydiv"></div> </td>
</tr>
<tr>
<td colspan="2"> <input type="password" name="password" class="form-control" placeholder="Password" required/> </td>
</tr>
<tr>
<td> <jsp:include page="demo.html"></jsp:include> </td>
</tr>
<tr>
<td colspan="2"> <div id = "numberdiv"></div> </td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-xs">
<span class="input-group-addon" style="width: 100px; background-color:#a2a587; color: white;" >Birthday</span>
<select name="date" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select date </option>
<jsp:include page="dates.jsp"></jsp:include>
</select>
<select name="month" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select month </option>
<jsp:include page="months.jsp"></jsp:include>
</select>
<select name="year" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select year </option>
<jsp:include page="years.jsp"></jsp:include>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width: 100px;">Gender</span>
<select class="form-control" name="gender" style="width: 300px;" required>
<option disabled selected value> select gender </option>
<option>male</option>
<option>female</option>
<option>other</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width: 100px;">Position</span>
<select class="form-control" name="position" style="width: 300px;" required>
<option disabled selected value> select position </option>
<option>Writer</option>
<option>Author</option>
<option>Contributor</option>
<option>Teacher</option>
<option>Student</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="left"> <input type="submit" value="Get Started" class="btn btn-success btn-lg"/> </td>
<td></td>
</tr>
</table>
</form>
Related
I am trying to activate the search feature in the dynamically generated drop-down lists by using select 2 plugin, but unfortunately the plugin does not work at all.
Any solution would be appreciated.
This is the source code for all the page this plugin is on which I can't get it to work
<div class="table-responsive">
<table style="text-align: center" id="dynamicAddRemove">
<tr style="background-color: #007398; color: white; text-align: center">
<th class="wd-15p fontColor">الحساب</th>
<th class="wd-15p fontColor">مدين</th>
<th class="wd-15p fontColor">دائن</th>
<th class="wd-15p fontColor">وصف</th>
<th class="wd-10p fontColor"></th>
</tr>
<tr>
<td class="td">
<select
class="form-control select_acount js-example-basic-single"
name="account[]"
required
>
<option value="1">--1--</option>
<option value="2">--2--</option>
<option value="3">--3--</option>
<option value="4">--4--</option>
<option value="5">--5--</option>
<option value="6">--6--</option>
</select>
</td>
<td class="td">
<input
type="number"
name="debtor[]"
id="fname"
class="form-control debtor arabicNumbers"
onkeydown="return event.keyCode !== 69"
required
/>
</td>
<td class="td">
<input
type="number"
name="creditor[]"
id="james"
class="form-control creditor arabicNumbers"
onkeydown="return event.keyCode !== 69"
required
/>
</td>
<td class="td">
<input type="text" name="description[]" class="form-control" required />
</td>
<td>
<input type="text" name="mount[]" class="form-control mount" required />
</td>
<td class="td2">
<button type="button" name="add" id="add-btn" class="btn btn-success">
<i class="fas fa-plus"></i>
</button>
</td>
</tr>
</table>
</div>
jquery code:
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script></script>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
I am using Laravel and javascript + jQuery then, what I need is if I click the select option value, it will change the other form input based on (count value).
Here is my preview image :
nah if i click the value of select option in "Tipe Biaya" column, it will count jumlah column*biaya operational column then put the result in total column (in One row).
here my Html code:
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Nama Cabang</th>
<th class="text-center">Jumlah</th>
<th class="text-center">Biaya Operasional</th>
<th class="text-center">Tipe Biaya</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody class="distributionList">
#foreach($branches as $key => $fb)
<tr>
<td class="pt-3-half text-left">
{{ $fb->name }}
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="" placeholder="0" readonly>
</td>
</tr>
#endforeach
</tbody>
</table>
Here my JavaScript and jQuery
$(document).ready(function(){
var count = 0;
$(".operational_cost_type").each(function() {
$(this).change(function(){
event.preventDefault();
var var_operational_cost_type = $(this).val();
var var_each_operational_cost = $(this).closest('.each_operational_cost');
var var_total_operational_cost = $(this).find('.total_operational_cost').val();
console.log(var_each_operational_cost);
});
count++;
});
});
Thank you so much!
You can get value of jumlah and biaya column using $(this).closest("tr").find.. then simply use .val() to add result inside your total column inputs.
Demo Code :
$(document).ready(function() {
var count = 0;
//if you need on chnage of input as well(else remove that input[type=number]..)
$(document).on("change input", ".operational_cost_type , input[type=number]", function() {
event.preventDefault();
var var_operational_cost_type = $(this).val();
var selector = $(this).closest("tr")
//get product quantity
var product_quantity = selector.find('.product_quantity').val();
var total_operational_cost = selector.find('.total_operational_cost')
//get opertional cost
var each_operational_cost = selector.find('.each_operational_cost').val();
//mutliply and add total to total col
total_operational_cost.val(product_quantity * each_operational_cost)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Nama Cabang</th>
<th class="text-center">Jumlah</th>
<th class="text-center">Biaya Operasional</th>
<th class="text-center">Tipe Biaya</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody class="distributionList">
<tr>
<td class="pt-3-half text-left">
something
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
<tr>
<td class="pt-3-half text-left">
something1
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
<tr>
<td class="pt-3-half text-left">
something2
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
</tbody>
</table>
I want to add the column values in text box field of each single row during insertion of value to that field and display that value in a read only field.
HTML CODE:
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<?php
while($m_row = $m_result->fetch_assoc()) {
?>
<tbody>
<tr>
<?php
$sqltask="SELECT * FROM tasks WHERE tasks_code='".$m_row['tcode']."'";
$resulttask=$conn->query($sqltask);
$rowtask=$resulttask->fetch_assoc();
?>
<td><?php echo $rowtask['tasks_name'] ?></td>
<td><?php echo $m_row['tcode'] ?></td>
<td>
<input type="text" class="form-control master" name="ldr[]" id="ldr" value="<?php echo $m_row['ldr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master" name="sdr[]" id="sdr" value="<?php echo $m_row['sdr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master" id="master_diff" name="master_diff[]" readonly />
</td>
<td> <input type="hidden" name="master[]" id="master" value="<?php echo $master_row['id'];?>" /></td></tr>
</tbody>
<?php
}
?>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</div>
</div>
</div>
</form>
The above code is the html code for the textbox fields where the fields ldr,sdr should be sumup for getting the total sum in master_diff field. It should be using onchange event since each entry to the textbox fields should be get added to display the final sum.
You should to remove all ids from the cycle!
Try this:
var inputs = document.getElementsByClassName("inputs");
var summDiff = function() {
var tr = this.closest("tr");
var ldr = tr.getElementsByClassName("ldr")[0]
var sdr = tr.getElementsByClassName("sdr")[0]
var diff = tr.getElementsByClassName("master_diff")[0]
diff.value = parseInt(ldr.value) + parseInt(sdr.value)
};
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', summDiff, false);
}
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>task 1</td>
<td>0001</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="1" />
</td>
</tr>
<tr>
<td>task 2</td>
<td>0002</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="2" />
</td>
</tr>
<tr>
<td>task 3</td>
<td>0003</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="3" />
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</form>
I have a payment form and when someone selects the 'paypal' option, I want it to have the credit card details. I have taken some code from an existing from in which this function works and tried to adjust it for my edited form - but I can't seem to get it to work...
If someone could point out where I'm going wrong it would be gratingly appreciated! (I'm still very new to scripting)
The script i need help with is down the bottom of the form.
What I need it to do:
When you click on and off the 'paypal' checkbox, I want all the rows with the class of "hideCC" to toggle on and off.
<div class="checkoutForm-bg">
<div class="checkoutForm-wrapper">
<div class="shop-checkout shop-form">
<h1>Check Out</h1>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b2206.r502081-phase1"></script>
<form name="catwebformform2140" method="post" onsubmit="return checkWholeForm2140(this)" enctype="multipart/form-data" action="https://sklzaustralia.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=10850&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&CC={module_urlcountrycode}&Referrer={module_siteurl,true,true}">
<span class="req">*</span> Required
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="Title">Title</label><br />
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="1328222">DR</option>
<option value="1328221">MISS</option>
<option value="1328218" selected="selected">MR</option>
<option value="1328219">MRS</option>
<option value="1328220">MS</option>
</select></td>
</tr>
<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="LastName">Last Name <span class="req">*</span></label><br />
<input name="LastName" id="LastName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
<input name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="CAT_Custom_20097767">Phone number <span class="req">*</span></label><br />
<input maxlength="255" name="CAT_Custom_20097767" id="CAT_Custom_20097767" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingAddress">Shipping Address <span class="req">*</span></label><br />
<input name="ShippingAddress" id="ShippingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCity">City <span class="req">*</span></label><br />
<input name="ShippingCity" id="ShippingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingState">State <span class="req">*</span></label><br />
<input name="ShippingState" id="ShippingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="ShippingZip" id="ShippingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCountry">Country <span class="req">*</span></label><br />
<select name="ShippingCountry" id="ShippingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label for="Company">Company</label><br />
<input name="Company" id="Company" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingInstructions">Shipping Instructions</label><br />
<textarea name="ShippingInstructions" id="ShippingInstructions" cols="10" rows="4" class="cat_listbox"></textarea></td>
</tr>
<tr>
<td><label for="BillingAddress">Billing Address <span class="req">*</span></label><br />
<input name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCity">City <span class="req">*</span></label><br />
<input name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingState">State <span class="req">*</span></label><br />
<input name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCountry">Country <span class="req">*</span></label><br />
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label>Payment Method <span class="req">*</span></label><br />
<input checked="checked" name="PaymentMethodType" id="PaymentMethodType_1" value="1" type="radio" />Credit Card<br />
<input name="PaymentMethodType" id="PaymentMethodType_5" value="5" type="radio" />PayPal<br />
<input name="PaymentMethodType" id="PaymentMethodType_9" value="9" type="radio" />Gift Voucher</td>
</tr>
<tr class="hideCC">
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input name="CardName" id="CardName" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
<option value="4">American Express</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
<input name="Amount" id="Amount" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><input class="cat_button" value="Submit" id="catwebformbutton" type="submit" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount2140 = 0;function checkWholeForm2140(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.ShippingAddress) why += isEmpty(theForm.ShippingAddress.value, "Shipping Address"); if (theForm.ShippingCity) why += isEmpty(theForm.ShippingCity.value, "Shipping City"); if (theForm.ShippingState) why += isEmpty(theForm.ShippingState.value, "Shipping State"); if (theForm.ShippingZip) why += isEmpty(theForm.ShippingZip.value, "Shipping Zipcode"); if (theForm.ShippingCountry) why += checkDropdown(theForm.ShippingCountry.value, "Shipping Country"); if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address"); if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City"); if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State"); if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, ""); if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country"); if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if (theForm.CAT_Custom_20097767) why += isCurrency(theForm.CAT_Custom_20097767.value, "Phone number");if(why != ""){alert(why);return false;}if(submitcount2140 == 0){submitcount2140++;theForm.submit();return false;}else{alert("Form submission is in progress.");return false;}}
// Credit Card info is not required if paying by PayPal, Hosted Credit Card, COD etc
function ShowCCFields(val) {
if (!document.getElementsByClassName("hideCC"))
return;
if (val != 1)
document.getElementsByClassName("hideCC").style.display = "none";
else
document.getElementsByClassName("hideCC").style.display = "inline";
}
//]]>
</script>
</form>
</div>
</div>
</div>
Since you are including jQuery why not try this:
$(document).ready(function() {
$('[name="PaymentMethodType"]').change(function () {
if ($(this).val() == 1) {
$('.hideCC').show();
} else {
$('.hideCC').hide();
}
});
});
<div class="checkoutForm-bg">
<div class="checkoutForm-wrapper">
<div class="shop-checkout shop-form">
<h1>Check Out</h1>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b2206.r502081-phase1"></script>
<form name="catwebformform2140" method="post" onsubmit="return checkWholeForm2140(this)" enctype="multipart/form-data" action="https://sklzaustralia.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=10850&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&CC={module_urlcountrycode}&Referrer={module_siteurl,true,true}">
<span class="req">*</span> Required
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="Title">Title</label><br />
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="1328222">DR</option>
<option value="1328221">MISS</option>
<option value="1328218" selected="selected">MR</option>
<option value="1328219">MRS</option>
<option value="1328220">MS</option>
</select></td>
</tr>
<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="LastName">Last Name <span class="req">*</span></label><br />
<input name="LastName" id="LastName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
<input name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="CAT_Custom_20097767">Phone number <span class="req">*</span></label><br />
<input maxlength="255" name="CAT_Custom_20097767" id="CAT_Custom_20097767" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingAddress">Shipping Address <span class="req">*</span></label><br />
<input name="ShippingAddress" id="ShippingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCity">City <span class="req">*</span></label><br />
<input name="ShippingCity" id="ShippingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingState">State <span class="req">*</span></label><br />
<input name="ShippingState" id="ShippingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="ShippingZip" id="ShippingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCountry">Country <span class="req">*</span></label><br />
<select name="ShippingCountry" id="ShippingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label for="Company">Company</label><br />
<input name="Company" id="Company" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingInstructions">Shipping Instructions</label><br />
<textarea name="ShippingInstructions" id="ShippingInstructions" cols="10" rows="4" class="cat_listbox"></textarea></td>
</tr>
<tr>
<td><label for="BillingAddress">Billing Address <span class="req">*</span></label><br />
<input name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCity">City <span class="req">*</span></label><br />
<input name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingState">State <span class="req">*</span></label><br />
<input name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCountry">Country <span class="req">*</span></label><br />
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label>Payment Method <span class="req">*</span></label><br />
<input checked="checked" name="PaymentMethodType" id="PaymentMethodType_1" value="1" type="radio" />Credit Card<br />
<input name="PaymentMethodType" id="PaymentMethodType_5" value="5" type="radio" />PayPal<br />
<input name="PaymentMethodType" id="PaymentMethodType_9" value="9" type="radio" />Gift Voucher</td>
</tr>
<tr class="hideCC">
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input name="CardName" id="CardName" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
<option value="4">American Express</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
<input name="Amount" id="Amount" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><input class="cat_button" value="Submit" id="catwebformbutton" type="submit" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount2140 = 0;function checkWholeForm2140(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.ShippingAddress) why += isEmpty(theForm.ShippingAddress.value, "Shipping Address"); if (theForm.ShippingCity) why += isEmpty(theForm.ShippingCity.value, "Shipping City"); if (theForm.ShippingState) why += isEmpty(theForm.ShippingState.value, "Shipping State"); if (theForm.ShippingZip) why += isEmpty(theForm.ShippingZip.value, "Shipping Zipcode"); if (theForm.ShippingCountry) why += checkDropdown(theForm.ShippingCountry.value, "Shipping Country"); if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address"); if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City"); if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State"); if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, ""); if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country"); if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if (theForm.CAT_Custom_20097767) why += isCurrency(theForm.CAT_Custom_20097767.value, "Phone number");if(why != ""){alert(why);return false;}if(submitcount2140 == 0){submitcount2140++;theForm.submit();return false;}else{alert("Form submission is in progress.");return false;}}
// Credit Card info is not required if paying by PayPal, Hosted Credit Card, COD etc
$(document).ready(function() {
$('[name="PaymentMethodType"]').change(function () {
if ($(this).val() == 1) {
$('.hideCC').show();
} else {
$('.hideCC').hide();
}
});
});
//]]>
</script>
</form>
</div>
</div>
</div>
Actually i want to calculate total price for each row which genered daynamically using jquery.The row generated usnig dynamicForm("#plus", "#minus", {limit:20});. Please help me to calculate total price.
<form action="previewStock.jsp" method="post" onsubmit="return validateAddStock()">
<table align="center" style="width: 900px;">
<tr>
<td colspan="10" align="center">
Supplier Name : <select class="hoverr" name="supplierName">
<option value="unknown">Unknown</option>
</select>
<!--<td>
Supplier Mob.</td><td><select class="hoverr" name="supplierMob">
<option>Unknown</option>
</select></td>-->
<input type="text" name="invoiceId" placeholder="Enter Invioce Id" >
<input type="button" name="addSupplier" id="addSupplier" value="Add New Supplier">
</td>
</tr>
<tr><td colspan="10" align="center"><hr></td></tr>
<tr style="background: brown; color: #ffffff;">
<td>Item Name</td>
<td>Quantity</td>
<td>Unit</td>
<td>Price/Unit</td>
<td>Total Price</td>
<td>Purchase Date</td>
<td>Expiry Date</td>
<td>MRP</td>
<td>Category</td>
<td>Description</td></tr>
<input type="hidden" name="menuId" value="1"/>
<tr id="duplicate">
<td><input type="text" name="itemName" id="itemName" value="" required="true" placeholder="Item Name" class="hoverr"/></td>
<td><input type="text" name="quantity"id="quantity" value="" required="true" pattern="[0-9]" size="5" placeholder="Qty." class="hoverr"/></td>
<td>
<select id="unit" name="unit" required="true" class="hoverr">
<option value="0">Select</option>
<option value="Kg">Kg</option>
<option value="Packet">Packet</option>
<option value="Litre">Litre</option>
<option value="Meter">Meter</option>
</select></td>
<td><input type="textr" name="pricePerUnit" id="pricePerUnit" size="7" value="" required="true" placeholder="Price P/U." class="hoverr"/></td>
<td><input type="text" name="totalPrice" id="totalPrice" size="7" value="" placeholder="Tot. Price" class="hoverr"/></td>
<td><input type="date" name="purchgeDate" id="purchageDate" size="12" value="" placeholder="Pur. Date" onfocus="showCalendar('',this,this,'','holder1',0,30,1)"></td>
<td><input type="date" name="expiryDate" id="expiryDate" size="12" value="" placeholder="Exp. Date" onfocus="showCalendar('',this,this,'','holder1',0,30,1)"></td>
<td><input type="number" name="MRP" id="MRP" size="14" value="" placeholder="MRP" /></td>
<td><select name="category" class="hoverr" id="category"><option value="0">Select</option></select></td>
<td><textarea name="description" id="description" class="textareaItem" placeholder="Description Here" cols="15" rows="1" class="hoverr"/></textarea></td>
<td></td><td><img src="images/addItem.png" width="17" style=" float: right;" title="Add Row"></td>
</tr>
<tr><td><div style="display: none; margin-left: 680px;" id="total">Grand Total:<lable for="grandTotal" id="grandTotal"><img src="images/rupee.png" height="14"> <input type="text" name="grandTotal"></lable></div></td></tr><br><br>
<tr><td colspan="10" align="center"><hr></td></tr>
<tr><td colspan="10" align="center"><input type="submit" name="submit" value="Save"> <input type="reset" name="reset" value="Reset"></td></tr>
</table>