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.
Related
Below is part of my code. Idea is you pick one option and it's input fields are marked as required, while options that are not picked are hidden.
I would like the displayed additional input field to be marked by the js script as "required", like input fields in --MAIN FORM--
I suppose it needs only one additional line of code added to script, but no idea how to do it. I am just a beginner. I believe it needs additional line like this one: $("."+formClass).slideDown('medium'); with pointing to all displayed inputs and .attr('required', true); but I've no idea how to do it. Any help will be appreciated :-)
Thanks and have a nice Sunday
Here's part of html code and js code:
$('#productType').on('change', function() {
var formClass = $(this).val();
$(".op").hide();
$("." + formClass).slideDown('medium');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">
<label for="sku">SKU</label>
<input type="text" id="sku" name="sku" required><br>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br>
<label for="price">Price ($)</label>
<input type="number" id="price" name="price" required><br>
<label for="productType" id="switcher">Product type</label>
<select name="productType" id="productType" required>
<option value="" selected disabled>Product type</option>
<option id="dvd" value="dvd">DVD</option>
<option id="book" value="book">Book</option>
<option id="furniture" value="furniture">Furniture</option>
</select>
<!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
<div class="additional-form dvd op" id="dvd-form">
<p>Please provide size in MB</p>
<label for="size">Size (MB)</label>
<input type="number" id="size" name="size">
</div>
<div class="additional-form book op" id="book-form">
<p>Please provide weight in KG</p>
<label for="weight">Weight (KG)</label>
<input type="number" id="weight" name="weight">
</div>
<div class="additional-form op furniture" id="furniture-form">
<p>Please provide dimensions in CM</p>
<label for="height">Height (CM)</label>
<input type="number" id="height" name="height"><br>
<label for="width">Width (CM)</label>
<input type="number" id="width" name="width"><br>
<label for="length">Length (CM)</label>
<input type="number" id="length" name="length">
</div>
</form>
Remove the required attribute from all the inputs inside the elements being hidden, and add it to the ones being shown with .slideDown().
$('#productType').on('change', function() {
var formClass = $(this).val();
$(".op").hide().find(':input').removeAttr('required');
$("." + formClass).slideDown('medium').find(':input').attr('required', true);;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">
<label for="sku">SKU</label>
<input type="text" id="sku" name="sku" required><br>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br>
<label for="price">Price ($)</label>
<input type="number" id="price" name="price" required><br>
<label for="productType" id="switcher">Product type</label>
<select name="productType" id="productType" required>
<option value="" selected disabled>Product type</option>
<option id="dvd" value="dvd">DVD</option>
<option id="book" value="book">Book</option>
<option id="furniture" value="furniture">Furniture</option>
</select>
<!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
<div class="additional-form dvd op" id="dvd-form">
<p>Please provide size in MB</p>
<label for="size">Size (MB)</label>
<input type="number" id="size" name="size">
</div>
<div class="additional-form book op" id="book-form">
<p>Please provide weight in KG</p>
<label for="weight">Weight (KG)</label>
<input type="number" id="weight" name="weight">
</div>
<div class="additional-form op furniture" id="furniture-form">
<p>Please provide dimensions in CM</p>
<label for="height">Height (CM)</label>
<input type="number" id="height" name="height"><br>
<label for="width">Width (CM)</label>
<input type="number" id="width" name="width"><br>
<label for="length">Length (CM)</label>
<input type="number" id="length" name="length">
</div>
</form>
In my WooCommerce checkout form, I have an additional checkbox that displays a new input when selected.
I would like this input to be required when the checkbox is checked.
Can I solve it somehow using JavaScript without interfering directly with the form's code?
I attach screenshots of the form:
screenshot1,
screenshot2.
Possibly you have other ideas on how to do it properly?
<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Dominik" autocomplete="given-name">
</span>
</p>
<p class="form-row form-row-last validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_last_name_field" data-priority="20">
<label for="billing_last_name" class="">Last name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value="Test" autocomplete="family-name">
</span>
</p>
<p class="form-row form-row-wide" id="billing_company_field" data-priority="30">
<label for="billing_company" class="">Company name <span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value="" autocomplete="organization">
</span>
</p>
<p class="form-row form-row-wide woocommerce-validated" id="billing_invoice_ask_field" data-priority="30">
<span class="woocommerce-input-wrapper">
<label class="checkbox">
<input type="checkbox" class="input-checkbox " name="billing_invoice_ask" id="billing_invoice_ask" value="1"> I want to receive an invoice<span class="optional">(optional)</span>
</label>
</span>
</p>
<p class="form-row form-row-wide" id="billing_vat_number_field" data-priority="30" style="display: none;">
<label for="billing_vat_number" class="">VAT Number</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_vat_number" id="billing_vat_number" placeholder="" value="">
</span>
</p>
$('.input-checkbox').change(function(){
$('#billing_vat_number_field').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Dominik" autocomplete="given-name">
</span>
</p>
<p class="form-row form-row-last validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_last_name_field" data-priority="20">
<label for="billing_last_name" class="">Last name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value="Test" autocomplete="family-name">
</span>
</p>
<p class="form-row form-row-wide" id="billing_company_field" data-priority="30">
<label for="billing_company" class="">Company name <span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value="" autocomplete="organization">
</span>
</p>
<p class="form-row form-row-wide woocommerce-validated" id="billing_invoice_ask_field" data-priority="30">
<span class="woocommerce-input-wrapper">
<label class="checkbox">
<input type="checkbox" class="input-checkbox " name="billing_invoice_ask" id="billing_invoice_ask" value="1"> I want to receive an invoice<span class="optional">(optional)</span>
</label>
</span>
</p>
<p class="form-row form-row-wide" id="billing_vat_number_field" data-priority="30" style="display: none;">
<label for="billing_vat_number" class="">VAT Number</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_vat_number" id="billing_vat_number" placeholder="" value="">
</span>
</p>
To play around:
$('.check').change(function(){
var is_hidden = $('input[type="text"]').prop('hidden');
var make_hidden = true;
if (is_hidden === true){
make_hidden = false;
}
$('input[type="text"]').prop('hidden', make_hidden);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"><label>Check</label>
<input type="text" hidden>
I solved my problem with the script below
jQuery(function ($) {
$('#billing_invoice_ask').change(function(){
if($(this).is(":checked")) {
$('#billing_vat_number_field').addClass('validate-required');
} else {
$('#billing_vat_number_field').removeClass('validate-required');
}
});
});
Im using bootstrap 4, html, css, js the lot when trying to do this.
I'm trying to show some text boxes depending on the choice of the select option.
So if I choose "adadelta" I'd like to have only 4 specific text boxes(number type) show and everything else remain hidden. Should mention that the below form in hosted in a popover window which works fine, as such I've only included the form itself.
I've tried various javascript examples for similar situations but its just not showing the text boxes even when I try document.getElementById etc.
Any suggestions would be much appreciated.
<form>
<div class="form-group">
<label for="epochEdit">Epochs:</label>
<input type="number" class="form-control" id="epochEdit">
<label for="batchEdit">Batch Size:</label>
<input type="number" class="form-control" id="batchEdit">
</div>
<div class="form-group">
<label for="optChoose">Optimizer:</label>
<select class="form-control" id="optChoose">
<option selected>Open this menu</option>
<option value="sgd">sgd</option>
<option value="adadelta">adadelta</option>
<option value="rmsprop">rmsprop</option>
<option value="adam">adam</option>
<option value="adamax">adamax</option>
<option value="adagrad">adagrad</option>
<option value="nadam">nadam</option>
</select>
</div>
<div class="form-group">
<fieldset disabled>
<div class="form-group">
<label for="disabledNote">Note:</label>
<input type="text" id="disabledNote" class="form-control" placeholder="Optimizers will use keras default values!">
</div>
</fieldset>
<label for="lr">Learning Rate:</label>
<input type="number" class="form-control" id="lr">
<label for="rho">Rho:</label>
<input type="number" class="form-control" id="rho">
<label for="epsilon">Epsilon:</label>
<input type="number" class="form-control" id="epsilon">
<label for="decay">Decay:</label>
<input type="number" class="form-control" id="decay">
<label for="b1">Beta #1:</label>
<input type="number" class="form-control" id="b1">
<label for="b2">Beta #2:</label>
<input type="number" class="form-control" id="b2">
<label for="sDecay">Schedule Decay:</label>
<input type="number" class="form-control" id="sDecay">
<label for="moment">Momentum:</label>
<input type="number" class="form-control" id="moment">
<label for="nesterov">Nesterov:</label>
<input type="checkbox" class="form-check-input" id="nesterov">
</div>
<button id="subSettings" class="bg-color-3 btn btn-info"> Submit </button>
</form>
Try this
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var el = '<label for="lr">Learning Rate:</label>\
<input type="number" class="form-control" id="lr">\
\
<label for="rho">Rho:</label>\
<input type="number" class="form-control" id="rho">\
\
<label for="epsilon">Epsilon:</label>\
<input type="number" class="form-control" id="epsilon">\
\
<label for="decay">Decay:</label>\
<input type="number" class="form-control" id="decay">\
\
<label for="b1">Beta #1:</label>\
<input type="number" class="form-control" id="b1">\
\
<label for="b2">Beta #2:</label>\
<input type="number" class="form-control" id="b2">\
\
<label for="sDecay">Schedule Decay:</label>\
<input type="number" class="form-control" id="sDecay">\
\
<label for="moment">Momentum:</label>\
<input type="number" class="form-control" id="moment">';
function select() {
var optSel = $("#optChoose").val();
appendControls(optSel);
}
function appendControls(num) {
$('#elcontainer').empty();
if (num == "adadelta") {
$('#elcontainer').append(el);
}
}
</script>
</head>
<body>
<div class="container">
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text and one of type password:</p>
<div class="form-group">
<label for="epochEdit">Epochs:</label>
<input type="number" class="form-control" id="epochEdit">
<label for="batchEdit">Batch Size:</label>
<input type="number" class="form-control" id="batchEdit">
</div>
<div class="form-group">
<label for="optChoose">Optimizer:</label>
<select class="form-control" id="optChoose" onchange="select();">
<option value="">Open this menu</option>
<option value="sgd">sgd</option>
<option value="adadelta">adadelta</option>
<option value="rmsprop">rmsprop</option>
<option value="adam">adam</option>
<option value="adamax">adamax</option>
<option value="adagrad">adagrad</option>
<option value="nadam">nadam</option>
</select>
</div>
<div class="form-group">
<fieldset disabled>
<div class="form-group">
<label for="disabledNote">Note:</label>
<input type="text" id="disabledNote" class="form-control"
placeholder="Optimizers will use keras default values!">
</div>
</fieldset>
<div id="elcontainer"></div>
<label for="nesterov">Nesterov:</label>
<input type="checkbox" class="form-check-input" id="nesterov">
</div>
<button id="subSettings" class="bg-color-3 btn btn-info"> Submit</button>
</div>
</body>
If I click on submit button then kot value will be increased by 1...initially it will be 0, and after submitting data into databaseit the page will be redirected to that page only.
<table>
<tr>
<td>
<label for="kot_no">KOT No</label>
<input type="text" id="kot_no" name="kotno" value="" class="option">
<label for="table_no">Table No</label>
<input type="text" id="table_no" name="tableno" class="option" placeholder="0">
<br>
<br>
<label for="Menu">Enter Menu Name</label>
<input type="text" placeholder="Enter menu name" name="menuname">
<br>
<br>
<label for="quantity">Enter Quantity</label>
<input type="text" placeholder="Enter Quantity" name="quantity" style="margin-left: 25px">
<br>
<br>
<input type="submit" style="margin-left: 124px" class="button">
<br>
</td>
</tr>
</table>
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