Form field calculations - javascript

I have a working form but i need it to email a value which is text only (doesn't include the numerical value). If there's any easier way to do this please can you help.
Here's the js fiddle - http://jsfiddle.net/qeSZR/83/
Basically when you click on corporate it calculates the value and changes it to 3500 and when you click on private it changes it to 1800. The problem i have is that when you mail this, i have a field that says "client type" which includes "1800: Private" or "3500: Corporate" as its sent value. I don't want the numbers in it i'd rather just have the client type = private or corporate. Please help :) - thank you!
Here is the code:
HTML
<form action="mailer.php" data-validate="parsley" method="post">
<div class="driver-list">
<p>
<h2>Driver 1:</h2>
Name <span class="red">*</span> <input name="cf_driver1" data-required="true" type="text" class="form-text" />
Cellphone <span class="red">*</span> <input name="cf_cell1" data-required="true" type="text" class="form-text" />
Email <span class="red">*</span> <input name="cf_email1" data-required="true" data-type="email" type="text" class="form-text" /></p>
<h2>Driver 2:</h2>
Name <span class="red">*</span> <input name="cf_driver2" data-required="true" type="text" class="form-text" />
Cellphone <span class="red">*</span> <input name="cf_cell2" data-required="true" type="text" class="form-text" />
Email <span class="red">*</span> <input name="cf_email2" data-required="true" data-type="email" type="text" class="form-text" /></p>
<h2>Driver 3:</h2>
Name <span class="red">*</span> <input name="cf_driver3" data-required="true" type="text" class="form-text" />
Cellphone <span class="red">*</span> <input name="cf_cell3" data-required="true" type="text" class="form-text" />
Email <span class="red">*</span> <input name="cf_email3" data-required="true" data-type="email" type="text" class="form-text" /></p>
<h2>Driver 4:</h2>
Name <span class="red">*</span> <input name="cf_driver4" data-required="true" type="text" class="form-text" />
Cellphone <span class="red">*</span> <input name="cf_cell4" data-required="true" type="text" class="form-text" />
Email <span class="red">*</span> <input name="cf_email4" data-required="true" data-type="email" type="text" class="form-text" /></p>
</div>
<div class="vertical-space"></div><p><h2>Entry Type<span class="red">*</span></h2></p>
<select name="cf_client_type" id="cf_client_type" size="1" class="option2" >
<option value="1800: Private">Private</option>
<option value="3500: Corporate">Corporate</option>
</select>
<p>Corporate entries qualify for a tax donation certificate, please enquire via email.</p>
<!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM -->
<input id="website" class="taken" name="cf_website" type="text" />
<!-- END -->
<!-- HIDDEN FIELD - CALCULATION -->
<input id="cf_calculate" class="taken" value="1" name="cf_blank" type="text" />
<!-- END -->
<div class="box-contact"><span class="result">Amount Due: R</span><input type="text" name="cf_amount" readonly="readonly" value="1800" id="result">
<input name="Submit" class="submit" value="Submit" type="submit" />
JAVASCRIPT
$(document).ready(function(){
$("select").change(function(){
var val1 = +parseInt($("#cf_client_type").val());
var val2 = +parseInt($("#cf_calculate").val());
$("#result").val(val1*val2);
});
});

Here is a fiddle
Set up your options with a data-value for your calculations and keep tha actual value for the text you want to pass along like so...
<option value="Private" data-value="1800">Private</option>
<option value="Corporate" data-value="3500">Corporate</option>
Then your script can be like this...
$(document).ready(function(){
$("select").change(function(){
var val1 = +parseInt($("#cf_client_type").find('option:selected').attr('data-value'));
var val2 = +parseInt($("#cf_calculate").val());
$("#result").val(val1*val2);
});
});

Replace the option value in your code to the following

Related

problem with adding javascript to django view form update

I have a django view to add an invoice to my application, that has added javascript, and it works fine.
<p>
<label for="id_total_without_vat">Price</label>
<input type="number" name="total_without_vat" step="any" required="" id="id_total_without_vat" oninput="calculateTotalWithVat()">
<label for="id_currency_name">Currency</label>
<select name="currency_name" id="id_currency_name" onchange="update_currency_rate()">
<option value="NIS">NIS</option>
</select>
<label for="units">Units</label>
<span id="units"></span>
<label for="id_currency_rate">Currency Rate</label>
<input type="number" name="currency_rate" step="any" id="id_currency_rate" value=1.00 oninput="calculateTotalWithVat()">
<label for="nis_total">Total Price</label>
<span id="nis_total"></span>
</p>
<p>
<label for="id_total_vat_included">Total VAT Included</label>
<input type="number" name="total_vat_included" step="any" required="" id="id_total_vat_included">
<label for="id_vat_percentage">VAT Perentage</label>
<input type="number" name="vat_percentage" step="any" value="17.0" id="id_vat_percentage" oninput="updateVat(this.value)">
<label for="nis_total_with_tax">NIS Total With Tax</label>
<span id="nis_total_with_tax"></span>
</p>
The problem is while trying to do something similar in the update view I see the oninput part of the command in the browser as text, this is the update view code:
<p>
<label for="id_total_without_vat">Total without VAT</label>
{{ form.total_without_vat }}
<label for="id_currency_name">Currency</label>
<select name="currency_name" id="id_currency_name" onchange="update_currency_rate()">
<option value=" {{ form.currency_name }} "></option>
</select>
<label for="units">Units</label>
<span id="units"></span>
<label for="id_currency_rate">Currency Rate</label>
<input type="number" name="currency_rate" step="any" id="id_currency_rate" value= "{{ form.currency_rate }}" oninput="calculateTotalWithVat()">
<label for="nis_total">Price</label>
<span id="nis_total"></span>
</p>
<p>
<label for="id_total_vat_included">Price Including VAT</label>
{{ form.total_vat_included }}
<label for="id_vat_percentage">VAT Percentage</label>
<input type="number" name="vat_percentage" step="any" value=" {{ form.vat_percentage }} " id="id_vat_percentage" oninput="updateVat(this.value)">
<label for="nis_total_with_tax">Price Including Taxes</label>
<span id="nis_total_with_tax"></span>
</p>
Can someone tell me why the add view works, but the update doesn't?
Just a guess: try rendering the form "safe".
Try:
{{form.as_p}}
or:
{{form.total_without_vat | safe}}
Let me know if it works.

Click function does not append HTML block using append() function

I'm trying to append the same code again on click. My 'education_wrap" class empty for now. Other than that I have just added in-line CSS for now.
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".education_wrap"); //Fields wrapper
var add_button = $("#add_education"); //Add button ID
$(add_button).click(function(e){
e.preventDefault();
var total_fields = wrapper[0].childNodes.length;
if(total_fields < max_fields){
$(wrapper).append('<p style="font-weight:bold;">Institute Name<span class="required">*</span></p><div class="item"><input type="text" id="institute" name="institute" placeholder="Institute Name" required/></div><p style="font-weight:bold;">Degree Name<span class="required">*</span></p><div class="item"><input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/></div><p style="font-weight:bold;">From<span class="required">*</span></p><div class="item"><input type="date" id="from_date" name="from_date" value="2020-07-22" required/></div><p style="font-weight:bold;">To<span class="required">*</span></p><div class="item"> <input type="date" id="to_date" name="to_date" value="2020-07-22" required/></div></div>'); //add input box
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form><h3 style="font-weight: bold;">Education</h3>
<div class="education_wrap">
<p style="font-weight:bold;">Institute Name<span class="required">*</span></p>
<div>
<input type="text" id="institute" name="institute" placeholder="Institute Name" required/>
</div>
<p style="font-weight:bold;">Degree Name<span class="required">*</span></p>
<div>
<input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/>
</div>
<p style="font-weight:bold;">From<span class="required">*</span></p>
<div>
<input type="date" id="from_date" name="from_date" value="2020-07-22" required/>
</div>
<p style="font-weight:bold;">To<span class="required">*</span></p>
<div>
<input type="date" id="to_date" name="to_date" value="2020-07-22" required/>
</div>
</div>
<div style="margin-top:20px;">
<button id="add_education">Add Another Education</button>
</div></form>
Also, I cannot get my mind around how to submit multiple sets of information using POST method for once. Please guide.
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".education_wrap"); //Fields wrapper
var add_button = $("#add_education"); //Add button ID
$(add_button).click(function(e) {
var total_fields = wrapper[0].childNodes.length;
alert(total_fields < max_fields);
//if (total_fields < max_fields) { // this condition returns false that's why it creates issue
$(wrapper).append('<p style="font-weight:bold;">Institute Name<span class="required">*</span></p><div class="item"><input type="text" id="institute" name="institute" placeholder="Institute Name" required/></div><p style="font-weight:bold;">Degree Name<span class="required">*</span></p><div class="item"><input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/></div><p style="font-weight:bold;">From<span class="required">*</span></p><div class="item"><input type="date" id="from_date" name="from_date" value="2020-07-22" required/></div><p style="font-weight:bold;">To<span class="required">*</span></p><div class="item"> <input type="date" id="to_date" name="to_date" value="2020-07-22" required/></div></div>'); //add input box
//}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<h3 style="font-weight: bold;">Education</h3>
<div class="education_wrap">
<p style="font-weight:bold;">Institute Name<span class="required">*</span></p>
<div>
<input type="text" id="institute" name="institute" placeholder="Institute Name" required/>
</div>
<p style="font-weight:bold;">Degree Name<span class="required">*</span></p>
<div>
<input type="text" id="degree" name="degreen" placeholder="Bachelor of Engineering in Software Engineering, etc." required/>
</div>
<p style="font-weight:bold;">From<span class="required">*</span></p>
<div>
<input type="date" id="from_date" name="from_date" value="2020-07-22" required/>
</div>
<p style="font-weight:bold;">To<span class="required">*</span></p>
<div>
<input type="date" id="to_date" name="to_date" value="2020-07-22" required/>
</div>
</div>
<div style="margin-top:20px;">
<button type="submit" id="add_education">Add Another Education</button>
</div>
</form>
Note:- There is a slight mistake in your code. There is one if condition which returns a false value that's why a block of code is not executed.
There is many issue in your Code, follow below things:
1 . if(total_fields < max_fields){ Here your condition getting false, so no append process will begin
2 . use type="button" instead of submit
3 . use separate button for append html and for submit form
for how to submit multiple sets of information using POST
use input name as array like <input type="date" id="from_date" name="from_date[]" value="2020-07-22" required/>
use classes instead of id here because of repetition here id="from_date"

How to replace the value of an input if it is less than a minimum value established?

How do I make this calculation in javascript, and how do I do it so that the final result has a minimum value of 3500?
<div id="multiplicar-fijos">
<div>
<input type="text" id="multiplicando-fijos" value="" onChange="multiplicar();" />
<input type="text" id="multiplicador-fijos" class="" value="75" onChange="multiplicar();" readonly="readonly" />
<input type="text" id="resultado_1" class="monto" onkeyup="sumar();" readonly="readonly" /><span id="Costo"></span>
</div>
<div>
<input type="text" id="multiplicando-itinerantes" value="" onChange="multiplicar2();" />
<input type="text" id="multiplicador-itinerantes" class="" value="275" onChange="multiplicar2();" readonly="readonly" />
<input type="text" id="resultado_2" class="monto" onkeyup="sumar();" readonly="readonly" />
</div>
<div>
<span>El resultado es: </span> <input type="text" id="Total" onchange="cambio(this)" />
</div>
</div>
You could simply take Math.max with the value and the wanted minimum.
Math.max(value, 3500)

How to add an extra text to user's input upon form submission

With my salesforce's web-to-lead form, I would like to add an extra text to whatever value users input on the "description" input.
ex) user inputs "I want to inquire about xx product" + ["extra text from me"]
I was trying to come up with something with JavaScript but I kept messing it up. Could you please recommend me a way of doing it clean?
you can look at the actual page at https://cleardent.com/demo
here's my HTML
<div class="row">
<!-- Homework for Jason Begin -->
<div class="col-md-6 col-md-offset-3">
<!-- Homework for Jason End -->
<form id="sfDemoForm" action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" class="sky-form">
<input name="captcha_settings" value="{"keyname":"IC_ClearDent_Main_Demo","fallback":"true","orgId":"00D1I0000002QyG","ts":""}" type="hidden">
<input name="oid" value="00D1I0000002QyG" type="hidden">
<input name="retURL" id="retURL" value="https://test.cleardent.com/demo-thankyou-bc.html" type="hidden">
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" value="ppli#cleardent.com"> -->
<fieldset>
<!--<label class="label" for="first_name">First Name</label>-->
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sffirst_name" maxlength="40" name="first_name" size="20" type="text" required placeholder="First name">
</label>
<!--<label class="label" for="last_name">Last Name</label>-->
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-user"></i>
<input id="sflast_name" maxlength="80" name="last_name" size="20" type="text" required placeholder="Last name">
</label>
<!--<label class="label" for="email">Email</label>-->
<label class="input margin-bottom-15"><i class="icon-prepend fa fa-envelope"></i>
<input id="sfemail" maxlength="80" name="email" size="20" type="email" required placeholder="Email address">
</label>
<!-- <label class="label" for="phone">Phone</label>-->
<label class="input margin-bottom-25"><i class="icon-prepend fa fa-phone"></i>
<input id="sfphone" maxlength="40" name="phone" size="20" type="text" required placeholder="Phone">
</label>
<!--<label class="label" for="description">Notes</label>-->
<label class="textarea textarea-resizable margin-bottom-25">
<textarea id="sfdescription" name="description" placeholder="Is there something specific you want to see from ClearDent?"></textarea>
</label>
<input id="sfstate" name="state" type="hidden">
<input id="sflead_source" name="lead_source" type="hidden" value="Website">
<input id="sfcompany" name="company" type="hidden">
<input id="sfCampaign_ID" name="Campaign_ID" type="hidden" value="7011I000000d5auQAA">
</fieldset>
<div id="recaptcha" class="g-recaptcha" data-sitekey="6LeXmEAUAAAAAG7VJd6Z8YCVkP44AgAlqCUmpRAi" data-callback="submitDemoToLead" data-size="invisible"> </div>
<footer>
<button id="sfdemoPreSubmit" class="btn-u"><i class="fa fa-paper-plane fa-fw"></i> Get Your Free Demo</button>
<!--<button class="btn-u btn-brd" onclick="window.history.back();"><i class="fa fa-arrow-left fa-fw"></i> Back</button>-->
</footer>
</form>
</div>
</div>
and here's my current attempt. I am trying to add "ClearConnect" but it seems to take away user's input.
$("#sfdemoPreSubmit").click(function(e) {
e.preventDefault();
$("#sfcompany").val($("#sflast_name").val() + ", " + $("#sffirst_name").val());
$("#sfphone").val(cleanPhNum($("#sfphone").val()));
$("#sfstate").val(getProvince($("#sfphone").val()));
$("#sfdescription").val(+ "ClearConnect");
$("#sfDemoForm").validate();
if ($("#sfDemoForm").valid()) {
grecaptcha.execute();
}
});
In your code, it looks like you're asking jQuery to add "ClearConnect" to the value of #sfdescription.
$("#sfdescription").val(+ "ClearConnect");
The .val() method will update the value with whatever it is presented with, but it does not natively recognize its own value at this point. One way to assign the value back to #sfdescription is to pull the current value and add your desired text afterwards.
$("#sfdescription").val( $("#sfdescription").val() + "ClearConnect");
function addClearConnect(){
$("#sfdescription").val( $("#sfdescription").val() + "ClearConnect");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="sfdescription" value="Test123" />
<button onclick="addClearConnect()">Add Clear Connect</button>

radio button selection using javascript?

I need help for i had develop the radio buttons one is cheque and anothewr one is online- transfer when ever user click cheque it displays one form and if user click online-transfer it display another form using java script ok it is working but click one radio button after refresh the browser no form can be displayed.Here is below attached my code please verify and suggest me.
html code:
<html>
<head>
<script text="text/javascript">
function optionChanged()
{
var a=document.withdrawform;
if(a.withdraw_by[0].checked)
{
a.reset();a.withdraw_by[0].checked=true;
document.getElementById("cheque_msg").style.visibility="visible";
document.getElementById("cheque_msg").style.display="block";
document.getElementById("accountInfo").style.visibility="hidden";
document.getElementById("accountInfo").style.display="none";
}
else
{
a.reset();a.withdraw_by[1].checked=true;
document.getElementById("accountInfo").style.visibility="visible";
document.getElementById("accountInfo").style.display="block";
document.getElementById("cheque_msg").style.visibility="hidden";
document.getElementById("cheque_msg").style.display="none";
}
}
</script>
</head>
<body>
<!--<a target="popup" onclick="window.open('https://www.facebook.com/','name','width=600,height=400')">Open page in new window</a>-->
<div class="main_content">
<p class="ca_head">Withdraw Cash</p>
<ul class="step_bar">
<li>1. Give your information</li>
<li class="active">2. Select Withdraw Option</li>
</ul>
<form id="withdrawform" name="withdrawform" method="post" action="withdraw-confirmation.html" onsubmit="clearErrors();">
<input type="hidden" name="bankAccount" id="bankAccount" value="0"/>
<input type="hidden" name="monthlyWithdraw" id="monthlyWithdraw" value="0"/>
<input type="hidden" name="withdrawableBalance" id="withdrawableBalance" value="0.37"/>
<input type="hidden" id="ecsCharge" value="0"/>
<input type="hidden" id="chequeCharge" value="0"/>
<input type="hidden" id="freeWithdrawCount" value="0"/>
<input type="hidden" id="withdrawError" value=""/>
<input type="hidden" name="ifsc" id="ifsc" value="N"/>
<div class="content_area">
<h3 class="sub_head">Submit your withdraw request for processing</h3>
<div class="form_row">
<label>Your Withdrawable Balance <strong>:</strong></label>
<strong><span class="rupeefont">r </span> 0.37</strong>
</div>
<div class="form_row">
<label for="new_mobile">Withdraw by <strong>:</strong></label>
<div class="flt_lt wid_256" id="withdraw_options">
<label class="lbl_flt">
<input type="radio" name="withdraw_by" id="withdraw_by" onclick="optionChanged()" value="Cheque" /> Cheque
</label>
<label class="lbl_flt">
<input type="radio" name="withdraw_by" id="withdraw_by" onclick="optionChanged()" value="Online Transfer"/> Online Transfer
</label>
</div>
</div>
<div id="cheque_msg" style="display:none;visibility:hidden"><span><p style="color:RED" align="justify">Please Note that Withdrawal by cheque would take upto 12 working days. Online Transfer is a much faster
option.Also, cheque would be dispatched to your regsitered mailing address.Submit your withdrawal request only if the address below is valid.If you wish to
update your address,please write to fairplay#RummyNo1.com along with your address proof.
</p>
<div class="form_row">
<label for="trackAmount">Enter the Amount <strong>:</strong></label>
<input type="text" name="trackAmount" id="trackAmount" class="flt_lt" style="width:138px;" maxlength="15"/>
</div>
</div>
<div id="accountInfo" style="display: none;">
<div class="form_row" style="position:relative;">
<div class="form_row">
<label for="accountNumber">Account number <strong>:</strong></label>
<input type="text" maxlength="45" name="accountNumber" id="accountNumber" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="reAccountNumber">Re enter account number <strong>:</strong></label>
<input type="text" maxlength="45" name="reAccountNumber" id="reAccountNumber" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="micr">MICR Code <!-- <img src="https://rcmg.in/rc/icon_info.png" border="0" />--> <strong> :</strong></label>
<input type="text" maxlength="9" name="micr" id="micr" class="flt_lt" style="width:138px;" />
</div>
<div class="form_row">
<label for="reMicr">Re enter MICR code <strong>:</strong></label>
<input type="text" maxlength="9" name="reMicr" id="reMicr" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="ifsc_code">IFSC Code <!-- <img src="https://rcmg.in/rc/icon_info.png" border="0" />--> <strong>:</strong></label>
<input type="text" maxlength="11" name="ifsc_code" id="ifsc_code" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumericsForIfsc(event)" />
</div>
<div class="form_row">
<label for="bank_name">Bank Name <strong>:</strong></label>
<input type="text" maxlength="30" name="bank_name" id="bank_name" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumerics(event)" />
</div>
<div class="form_row">
<label for="branch_name">Branch Name <strong>:</strong></label>
<input type="text" maxlength="30" name="branch_name" id="branch_name" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumerics(event)" />
</div>
</div>
<div class="form_row">
<label for="trackAmount">Enter the Amount <strong>:</strong></label>
<input type="text" name="trackAmount" id="trackAmount" class="flt_lt" style="width:138px;" maxlength="15"/>
</div>
<div class="form_row" id="withdrawButton">
<label> </label>
<input type="submit" name="submit_btn" title="Continue" value="Continue" class="btn_submit" id="withdrawsubmit"/>
</div>
<p class="info_txt">
For more information on service charges and withdrawing cash from your account,
click here.
</p>
<!-- -->
</div>
</form>
</div>
</body>
</html>

Categories