I am trying to do the multiplication of two HTML inputs as they are typed. This code works for one of the tables.
HTML:
{%extends "dashboard.html"%}
{%block content_A%}
{% for o in org.office %}
<div class="col-md-18">
<div class="card">
<div class="header">
<h4 class="title">Weekly Report for {{org.organization_name}} {{org.organization_ID}}</h4>
<p>Office: {{o.owner_name}} {{o.office_ID}}</p>
<p>Week ending: {{we.strftime('%m-%d-%Y')}}</p>
<p>Invoice submitted: {{today.strftime('%m-%d-%Y')}}</p>
<table>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
{% if t[1] == o.office_ID%}
<h3>Backpacks: {{t[0]}}</h3>
<h5>Per Piece Profit: {{t[2]}}</h5>
<h4>Total Backpack Profit: {{t[4]}}</h4>
{% else %}
<h3>Backpacks: 0</h3>
{% endif %}
<hr>
</div>
<div class="col-xs-6">
<h3>Hotlines:</h3>
<div class="form-group row">
<div class="col-xs-4">
<input class="form-control" type="text" name="hln" maxlength="4">
<input class="hidden" type="text" name="or" value="{{t[3]}}">
</div>
</div>
<h5>Per Piece Profit: {{t[3]}}</h5>
<h4>Total Hotline Profit:</h4>
<input type="text" name="hlnt" readonly />
</div>
</div>
</div>
</table>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
Here is the Jquery that does the
$(document).on("keyup", "[name='hln']", function() {
var value = parseFloat($(this).val());
var or = $('input[name="or"]').val();
$('input[name="hlnt"]').val(value * or);
});
This works on a single table, however the html is created dynamicly in a Jinja for loop.
When there is more than one table the value is entered into all of them.
See the working example below it will work based upon the child, parent and sibling relationship or DOM Elements and will set the value according to which element the value has been changed
I have copied the code twice so that you can see changing value from one will not set values in all total fields
$(document).on("keyup", "[name='hln']", function() {
var value = parseFloat($(this).val());
// it will select the sibling element which mean the [name='or'] element1
var or = parseFloat($(this).siblings("input[name='or']").val());
// find the parent of input with class 'parent-class' and then find its child with name hlnt and set the value to it
$(this).parents(".parent-class").find('input[name="hlnt"]').val(value * or);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6 parent-class"> <!--add class here-->
<h3>Hotlines:</h3>
<div class="form-group row">
<div class="col-xs-4">
<input class="form-control" type="text" name="hln" id="hot" maxlength="4">
<input class="hidden" type="text" id="ovr" name="or" value="3">
</div>
</div>
<h5>Per Piece Profit: 3</h5>
<h4>Total Hotline Profit:</h4>
<input type="text" name="hlnt" id="output-value" readonly />
</div>
<!--copied same content as above to see how this work as saperately withot affeting others->
<div class="col-xs-6 parent-class"> <!--add class here-->
<h3>Hotlines:</h3>
<div class="form-group row">
<div class="col-xs-4">
<input class="form-control" type="text" name="hln" id="hot" maxlength="4">
<input class="hidden" type="text" id="ovr" name="or" value="4">
</div>
</div>
<h5>Per Piece Profit: 4</h5>
<h4>Total Hotline Profit:</h4>
<input type="text" name="hlnt" id="output-value" readonly />
</div>
Don't use a general selector like $('input[name="hlnt"]') this will get all the hlnt named inputs in the page. Instead find a common parent for the hln and hlnt inputs and search from that parent:
$(document).on("keyup", "[name='hln']", function() {
$this = $(this);
//get closest parent
//https://api.jquery.com/closest/
let parent = $this.closest('.col-xs-6');
var value = parseFloat($this.val());
var or = parent.find('input[name="or"]').val();
//use find() to find the child element
parent.find('input[name="hlnt"]').val(value * or);
});
Related
this is my first time using this site to ask a question. I'd appreciate the help, I have to turn in this bit of the project today as part of my course :(
I'm following this tutorial: https://www.youtube.com/watch?v=ncsCnC3Ynlw (chapter: stripe elements)
When I visit my checkout page, the card element isn't showing up.
I am at the stage around 3:45:00, and when looking at the checkout, the div for the card element is just a thin, empty bar.
Could anyone help me find where I made a mistake? I think it might be the connection between the script and the template or just the script itself, but I'm losing my mind trying to figure out what I've done wrong.
My views.py:
def BasketView(request):
carrinho = Carrinho(request)
total = str(carrinho.gettotal())
total = total.replace('.', '')
total = int(total)
stripe.api_key='sk_test_[...]'
intent = stripe.PaymentIntent.create(
amount=total,
currency='brl',
metadata={'integration_check': 'accept_a_payment', 'userid': request.user.id}
)
return render(request, 'pedido/pedido_novo.html', {'client_secret': intent.client_secret})
My html template:
{% load static %}
{% block title %}Livraria Aquaflora | Novo Pedido{% endblock %}
{% block adtscripts %}
<script src="https://js.stripe.com/v3/"></script>
<script src="https://unpkg.com/imask#6.0.7/dist/imask.js"></script>
<script src="{% static 'js/orderform.js' %}"></script>
<script src="{% static 'js/payment.js' %}" data-rel-js></script>
{% endblock %}
{% block conteudo %}
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<form id="payment-form" class="col-12 col-lg-6 mx-auto">
<div class="form-group">
<label class="small font-weight-bold">Nome</label>
<input type="text" class="form-control" id="custName" placeholder="Nome Completo" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">CPF</label>
<input type="text" class="form-control" id="cpf" placeholder="CPF" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">CEP</label>
<input type="text" class="form-control" id="cep" placeholder="CEP" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">Endereço</label>
<input type="text" class="form-control" id="ender" placeholder="Endereço com Número e complemento" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">Bairro</label>
<input type="text" class="form-control" id="bairro" placeholder="Bairro" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">Cidade</label>
<input type="text" class="form-control" id="cidade" placeholder="Cidade" required>
</div>
<div class="form-group">
<label class="small font-weight-bold">Estado</label>
<input type="text" class="form-control" id="estado" placeholder="Estado" required>
</div>
<hr class="my-4">
<h4 class="mb-3">Pagamento</h4>
<hr class="my-4">
<div id="payment-element" class="form-control form-control-payment">
</div>
<button id="submit" class="btn btn-primary btn-block py-2 mb-4 mt-5 fw500 w-100" data-secret="{{ client_secret }}">Pagar</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var CSRF_TOKEN = '{{ csrf_token }}';
</script>
{% endblock %}
and finally, my script,
var stripe = Stripe('pk_test_[...]');
var elem = document.getElementById('submit');
clientsecret = elem.getAttribute('data-secret');
var elements = stripe.elements();
var style = {
base: {
color: "#000",
lineHeight: '2.4',
fontSize: '16px'
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
card.on('change', function(event) {
var displayError = document.getElementById('card-errors')
if (event.error) {
displayError.textContent = event.error.message;
$('#card-errors').addClass('alert alert-info');
} else {
displayError.textContent = '';
$('#card-errors').removeClass('alert alert-info');
}
});
I figured it out. Leaving it here for other dummies like me.
Do not add the .js file to the top of the page. Add it to the bottom, after the /body tag. Turns out values will be NULL if the javascript loads before the page.
The Python code looks correct, at least it looks like mine does in my working integration using Django. So here's a couple of things to try:
You don't need the clientSecret until you use stripe.confirmCardPayment() so don't fetch it yet.
Try putting the data-secret="{{client_secret}}" on the <form> element. You'll need to add an events listener to the <form>'s "submit" event anyway to prevent the default submission and trigger the confirmation so might as well retrieve the client_secret then.
I know this doesn't answer why the button was no selectable but at least it gives you some next steps.
enter image description hereI want the second input field should be displayed only one time. From next iteration it should skip the statement of adding input field to UI.
<div class="row" *ngFor="let c of [1,2,3]" >
<div class="col-6">
<input type="text" name="first">`enter code here`
</div>
<div class="col-6">
<!-- This input field should be added only one time. Next iteration it should skip this line. -->
<input type="text" name="Second">
</div>
</div>
Not exactly sure about your condition here. If it shouldn't be repeated, wouldn't it be better to move it outside the *ngFor?
<div class="row" *ngFor="let c of [1,2,3]" >
<div class="col-6">
<input type="text" name="first">`enter code here`
</div>
</div>
<div class="col-6">
<input type="text" name="Second">
</div>
Or if for some reason you wish to have the input inside the *ngFor but only to render it once for the entire array, you could use first local variable + *ngIf.
<div class="row" *ngFor="let c of [1,2,3]; let first=first">
<div class="col-6">
<input type="text" name="first">`enter code here`
</div>
<div class="col-6" *ngIf="first">
<input type="text" name="Second">
</div>
</div>
I have a form for searching items in table
<div class="container">
<h4>Search product</h4>
<form>
<div class="row">
<div class="form-group col-md-8">
<label for="productName">Product name:</label>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" type="text" class="form-control search-box">
<div>
<div *ngFor="let product of products | async" (click)="gotoDetail(product)" class="search-result">
{{ product.name }}
</div>
</div>
</div>
</div>
</form>
</div>
And when I click the input then slides out the history of entered data and lower divs which I want to show.
How to hide the history of entered phrases?
I need only div with found products.
Turn off autocomplete in your input field.
autocomplete="off"
Turn off autocomplete
Try to add autocomplete="off" attribute to your input
I want to fade in a div class when a click action is made. But it's not working.
the picture above is produced by function gotData.
function gotData(data) {
var jobs = data.val();
var keys = Object.keys(jobs);
var container = document.getElementById('Jobcontainer');
var container2 = document.getElementById('jobpackage');
for (var i = 0; i<keys.length; i++) {
var k = keys[i];
var newCard = `
<li class="pos-card" id="Jobcontainer">
<div class="content">
<div class="title">`+jobs[k].JobTitle+`</div>
<div class="date">April 21</div>
<div class="refer">Refer</div>
</div>
<ul class="desc">
<li>`+ jobs[k].JobSummary + `</li>
</ul>
</li>`;
container.innerHTML += newCard;
}
}
in the same file html tag I have this html code
<div class="return">Return to listings </div>
<div class="container refer-card">
<div class="modal confirmed"><span class="close-modal"></span>
<h2>Thank you!</h2>
<p><span id="refer_name" class="focus"></span> has been submitted for the <span id="refer_pos" class="focus"></span> position.</p>
</div>
<div class="sign-up card">
<div class="card__header">
<h1>Employee Referral</h1>
<div class="description">For more information, please consult the employee handbook.</div>
</div>
<div class="card__content">
<form class="referral" method="post">
<div class="field line">
<input class="req" maxlength="240" type="text" name="name" value="" required="required" id="name"/>
<label class="placeholder" for="name">Full Name</label>
</div>
<div class="field line">
<input class="req" maxlength="240" type="email" name="email" value="" required="required" id="email"/>
<label class="placeholder" for="email">Email</label>
</div>
<div class="field line inline">
<input class="req" maxlength="240" type="text" name="position" value="" required="required" id="position"/>
<label class="placeholder" for="position">Position</label>
</div>
<!-- <div class="field inline right"><span class="dropdown-wrapper">
<select class="empty" name="department" id="choice">
<option value="" selected="selected">Department</option>
<option value="1">Development</option>
<option value="2">Sales</option>
<option value="3">QA</option>
<option value="4">Design</option>
<option value="5">HR</option>
<option value="6">Research </option>
</select></span></div> -->
<div>
<input type="submit" value="Submit" disabled="disabled" id="btn"/>
</div><a class="reset" href="#">Reset </a>
</form>
</div>
</div>
</div>
I am attempting to use the JS function below to fade in refer-card in the html tag when "refer" in picture above is clicked but for some unknown reasons nothing is happening and no error is displayed. Can you help figure out what I'm doing wrong or missing?
$('.refer').click(function(e){
e.stopPropagation();
$('.positions').addClass('fadeOut');
$('.refer-card').addClass('show');
$('.return').fadeIn('fast');
});
Try this codepen (http://codepen.io/anon/pen/gmdgmv)
Perhaps you have not defined jQuery, as it seems to work with a sample job block I put in place, and the basic CSS to hide the element you are trying to fade in. Also, bear in mind that if you've hidden it with '!important' in your CSS then the fade in will not work.
I added a console.log('clicked'); to your click handler verify that the block is executing.
It might be because you've called the [gotData] method that would append the html tag with the 'refer' class in play thus by that time, (refer) class didnt register or bind the [click] event handler after loading the DOM
In this case, you need to attach / bind them beforehand using (on) or (delegate) method (If you want to apply this in jQuery)
Using (on) method:
$('.refer').on('click', function(event) {
$('.positions').addClass('fadeOut');
// rest of code
});
Using (delegate) method:
$(document).delegate('.refer', 'click', function(event) {
$('.positions').addClass('fadeOut');
// rest of code
});
Hope this helps for your case.
I have a form named 'myForm'. and I want to add a div tag has id defined 'original', every time I hit a button.
Can anyone help me out to add the tags?
The additional tags has to be after the original one, but still inside of myForm.
Should I use clone() function??
Plz somebody let me know.... Here are my codes....
<form name="myForm">
<div id="original" class="original">
<div class="separator-2"></div>
<div>
<div class="form-group" >
<input type="text" class="form-control" name="AAA" style="width:400px"/>
</div>
<div class="form-group">
<input type="text" class="form-control" name="BBB" style="width:400px">
</div>
</div><br>
</div>
</form>
<button id="myButton"/>
<script>
var form = document.getElementById('myForm');
document.getElementById('myButton').addEventListener('click', function(e) {
form.appendChild(addAdditionalTags());
});
function addAdditionalTags() {
//?????????? What should I write here???
}
</script>
You have to use Node.cloneNode() to clone the node, and then add it to the document by using Node.appendChild().
Warning: cloneNode() may lead to duplicate element IDs in a document.
If your element uses an ID, you should always change it to a unique ID, so you have to do with the name attribute in order to have it in forms' post/get data when you submit.
Cloning a node copies all of its attributes and their values,
including intrinsic (in–line) listeners. It does not copy event
listeners added using addEventListener() or those assigned to element
properties. (e.g. node.onclick = fn) Moreover, for a element,
the painted image is not copied.
For your example, you can do something like this to have the <div id="original-1" class="original"> cloned and inserted to the document form with a unique id and input names like this:
document.getElementById('cloneElement').addEventListener('click', function(e) {
var form = document.getElementById('myForm');
var formOriginals = form.getElementsByClassName('original');
var cloned = formOriginals[0].cloneNode(true);
var new_index = formOriginals.length + 1;
cloned.id = 'original-' + new_index;
cloned.getElementsByTagName('input')[0].name = 'field-' + new_index + 'a';
cloned.getElementsByTagName('input')[1].name = 'field-' + new_index + 'b';
form.appendChild(cloned);
});
<form name="myForm" id="myForm">
<div id="original-1" class="original">
<div class="separator"></div>
<div class="groups">
<div class="form-group" >
<input type="text" class="form-control" name="field-1a" style="width:400px"/>
</div>
<div class="form-group">
<input type="text" class="form-control" name="field-1b" style="width:400px">
</div>
</div><br>
</div>
</form>
<button id="cloneElement">Clone Form Element</button>
This will result having an html dom tree like this and it will clone <div id="original-1" class="original"> element each time we hit the clone button:
<form name="myForm" id="myForm">
<div id="original-1" class="original">
<div class="separator"></div>
<div class="groups">
<div class="form-group">
<input type="text" class="form-control" name="field-1a" style="width:400px">
</div>
<div class="form-group">
<input type="text" class="form-control" name="field-1b" style="width:400px">
</div>
</div><br>
</div>
<div id="original-2" class="original">
<div class="separator"></div>
<div class="groups">
<div class="form-group">
<input type="text" class="form-control" name="field-2a" style="width:400px">
</div>
<div class="form-group">
<input type="text" class="form-control" name="field-2b" style="width:400px">
</div>
</div><br>
</div>
</form>