Filter Datalist input - javascript

I have two drop down list inputs ,both of them comes from datalist , i want that base on the input that the user choose, to filter the other input to show only relevant results .
I am rendering the data from python back to HTML page
The data contains company name and bank account number,
So i want base on the company that user choose to show only the relevant account to the selected company
<form id="the_form" method="POST">
{% csrf_token %}
From:
<input name="start_date" class="datepicker" type="date" value={{start_date}}/>
To:
<input name="end_date" class="datepicker" type="date" value={{end_date}}/>
<input type="text" list='List_of_Companies' data-search-in="Company" id="Input1" name="Companyname" placeholder="Choose a Company" value="{{ Company}}"/>
<input type="text" list='List_of_Accounts' data-search-in="Account" id="Input2" name="Accountname" placeholder="Choose an Account ID" value="{{ Account_Id}}"/>
<br> <br>
<button name="action" type="submit" id="showccounts" value="show">Show</button>
<button name="action" type="submit" value="download">Download</button>
<datalist id="List_of_Companies">
<select id="filenamelist" size="5" class="select">
{% for Company in info_list %}
<option value="{{ Company.3 }}">{{ Company.3 }}</option>
{% endfor %}
</select>
</datalist>
<datalist id="List_of_Accounts">
<select id="filenamelist" size="5" class="select">
{% for Company in info_list %}
<option value="{{ Company.0 }}">{{ Company.3 }}</option>
{% endfor %}
</select>
</datalist>
</form>
{% load staticfiles %}
<div id="loading" style="width:300px;height:300px;display:table-cell; vertical-align:middle; text-align:center">
<img src="{% static "app/images/Loading_icon.gif" %}" style="margin:auto">
</div>
<table id="theTable" hidden>
<thead>
<tr>
{% for c in columns %}
<th>{{ c }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for r in rows %}
<tr>
{% for c in r %}
<td>{{ c }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
{% block scripts %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

Related

Shopify adding two products to cart with one checkout button

So I have a bundle I created to add two products to cart once those products are selected. I want them to be added to cart at the same time. I'm currently only getting one product being added, with the name="id". How can I create the values in input for both to checkout?
Here's my form:
<form method="post" action="/cart/add" class="col-button ">
<input id="idPrice" type="hidden" name="id" value="" />
<input id="designPrice" type="hidden" name="id" value="" />
<input min="1" max="2" type="hidden" id="quantity" name="quantity" />
<button name="checkout" {%unless product.available %}style='margin-bottom:20px;'{% endunless %}type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="collection-add-to-cart {% if settings.cart_action == 'ajax' %} ajax-submit {% endif %}action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %} {% if product.available == false %}disabled{% endif %}" data-label={{ add_to_cart_label | json }}>
{{ 'layout.general.checkout' | t }}
</button>
</form>
Thanks in advance!

Adding subtotals from HTML input and adding them with Javascript without Refresh

I want to add specific inputs from my HTML template and add them using javascript. I have reached the part where I can add all the inputs with ('[type="number"].form-control') but I want to be able to specifiy the inputs by ID so that I can have different subtotals.
here is a print screen of what I want to acheive:
I want to add Item 1 and Item 2 and get a subtotal. Add Item 3 and 4 and 5 and get subtotal. Then add the 2 subtotals together.
<!-- language: lang-js -->
<script>
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
qa('[type="number"].form-control').forEach(input=>input.addEventListener('keyup',function(e){
/* add the value against the id to the object described above */
results[ this.name ]=Number( this.value );
if( Object.keys( results ).length==2 ){
q('th#Total').textContent=[ ...Object.values( results ) ].reduce((a,v)=>a+v);
}
}));
</script>
<!-- language: lang-html -->
<table class="table table-hover text-nowrap table-borderless">
<tbody>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_1"
id="item_1"
{% if form.is_bound %}value="{{ form.item_1.value }}"{% endif %}/>
{% for err in form.item_1.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_1_amount"
id="item_1_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_1_amount.value }}"{% endif %}/>
{% for err in form.item_1_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_2"
id="item_2"
{% if form.is_bound %}value="{{ form.item_2.value }}"{% endif %}/>
{% for err in form.item_2.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_2_amount"
id="item_2_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_2_amount.value }}"{% endif %}/>
{% for err in form.item_2_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<thead class="table-light">
<tr>
<th scope="col">subtotal</th>
<th scope="col" id="Total"></th>
</tr>
</thead>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_3"
id="item_3"
{% if form.is_bound %}value="{{ form.item_3.value }}"{% endif %}/>
{% for err in form.item_3.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_3_amount"
id="item_3_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_3_amount.value }}"{% endif %}/>
{% for err in form.item_3_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_4"
id="item_4"
{% if form.is_bound %}value="{{ form.item_4.value }}"{% endif %}/>
{% for err in form.item_4.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_4_amount"
id="item_4_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_4_amount.value }}"{% endif %}/>
{% for err in form.item_4_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
autocomplete="off"
type="text"
class="form-control"
name="item_5"
id="item_5"
{% if form.is_bound %}value="{{ form.item_5.value }}"{% endif %}/>
{% for err in form.item_5.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25"
name="item_5_amount"
id="item_5_amount"
style="float:left"
{% if form.is_bound %}value="{{ form.item_5_amount.value }}"{% endif %}/>
{% for err in form.item_5_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<thead class="table-light">
<tr>
<th scope="col">subtotal</th>
<th scope="col" id="Total2"></th>
</tr>
</thead>
<thead class="table-light">
<tr>
<th scope="col">Grand Total</th>
<th scope="col" id="Grandtotal"></th>
</tr>
</thead>
</tbody>
</table>
<div class="text-center">
<button
class="btn btn-primary mt-5"
onclick="stepper1.previous()"
>
Previous
</button>
<button type="submit" class="btn btn-success mt-5">
Submit
</button>
</div>
My question:
How to add Item 1 and 2 together to get Subtotal 1 then add 3 and 4 together to get subtotal 2 and then add the 2 subtotals to get the grand total.
I've spun a codepen of the code I'm about to explain here (with comments in the JS as well): https://codepen.io/marcusparsons/pen/vYZrVpy?editors=1010
The best way to achieve that kind of functionality is to group your inputs together with a couple more binding classes. What I did was add an extra primary class and then a subset class for targeting groups so that way individual groups can be calculated dynamically (meaning you could have any amount of inputs in a group and each value will be taken into account without extra code). And also, they each have a primary class because we're also getting a Grand Total.
For example, you want to add item 1 and item 2 together for Subtotal 1. Well, you could do that manually, but I always ask the question, "What if I have 1,000 inputs I want to equal Subtotal 1?" In this case, classes come in super handy, like so (I stripped some of your server side code to be able to work with just the HTML and JS needed):
<input
autocomplete="off"
type="number"
<!-- Added subtotal-group and subtotal-group-2 class -->
class="form-control w-25 subtotal-group subtotal-group-2"
name="item_4_amount"
id="item_4_amount"
style="float:left">
Basically, item 1 and item 2 got the subtotal-group and subtotal-group-1 classes. And then items 3, 4, and 5 got the subtotal-group and subtotal-group-2 classes.
And then, in the JavaScript, I target each of the groupings and apply them to the target elements you want. I also changed the event keyword to input from keyup because if you only target keyup on a type="number" input, you will miss the events that occur when up and down arrows are clicked/touched and you'll miss copy/paste events from user. When in doubt, I go with input over keyup for the event to listen to.
//Gather totals for subtotal-group-1 which is item 1 and item 2
//you could expand this ad infinitum by adding input type=number elements to the class subtotal-group and subtotal-group-1
//Keeping these elements grouped together with these classes allow us to be flexible and group things together
//Classes are powerful!!!
const resultGroupSet1 = [...qa('.subtotal-group-1')]
.map(s => Number(s.value))
.reduce((a,v) => a+v);
q('th#Total').textContent = resultGroupSet1;
And then rinse and repeat for each subsequent group:
const resultGroupSet2 = [...qa('.subtotal-group-2')]
.map(s => Number(s.value))
.reduce((a,v) => a+v);
q('th#Total2').textContent = resultGroupSet2;
And to get the final group total, just target the primary .subtotal-group class:
const resultGroupSetGrandTotal = [...qa('.subtotal-group')]
.map(s => Number(s.value))
.reduce((a,v) => a+v);
q('th#Grandtotal').textContent = resultGroupSetGrandTotal;

how to disable input type = text on check box click if i have many inputs of the same name

I'm getting many data and i'm looping into them in html so there are many inputs with the same name
My html code :
{% for Permission in Permissions %}
<tr>
<td style="text-align:center;"> {{Permission.perm_label}} </td>
<td style="text-align:center;"> <input type="checkbox" class="permUsersClass" id="permUsers" name="permUsers" value="permUsers" {% if Permission.perm_users != 0 %} checked {% endif %}> <input type="text" id="permUsersText" name="Users" value="{{Permission.perm_users }}" > </td>
<td style="text-align:center;"> <input type="checkbox" id="permProfile" name="permProfile" value="permProfile" {% if Permission.perm_profile != 0 %} checked {% endif %} > <input type="text" id="permProfileText" name="Profile" value="{{Permission.perm_profile }}"></td>
<td style="text-align:center;"> <input type="checkbox" id="permSchedule" name="permSchedule" value="permSchedule" {% if Permission.perm_schedule != 0 %} checked {% endif %}> <input type="text" id="permScheduleText" name="Schedule" value="{{Permission.perm_schedule }}"> </td>
<td style="text-align:center;"> <input type="checkbox" id="permAccount" name="permAccount" value="permAccount" {% if Permission.perm_accounting != 0 %} checked {% endif %}> <input type="text" name="Accounting" value="{{Permission.perm_accounting}}"> </td>
</tr>
{% endfor %}
My javascript functiom
$('.permUsersClass').change(function () {
$('input[name=Users')[0].disabled = !this.checked;
}).change();
In javascript how to disable specific text box and not just the first one

Django language selection does not work with Firefox

I'm trying to set up a language selector using the Framework Django.
I used this code:
<form action="/i18n/setlang/" method="post">
{% csrf_token %}
<input name="next" type="hidden" value=""/>
<select class="select-style" name="language" onchange="this.form.submit();" style="width:100px">
{% for lang in LANGUAGES %}
<option value="{{ lang.0 }}" {% if lang.0 == LANGUAGE_CODE %} selected="selected"{% endif %}>{{ lang.1 }}</option>
{% endfor %}
</select>
</form>
It works well with Chrome and Safari but not Firefox.
The 1st language (English) is not displayed in the drop-down menu.
/ setting.py /
LANGUAGES = (
('en', gettext('English')),
('fr', gettext('French')),
('nl', gettext('Dutch')),
('it', gettext('Italian')),
('es', gettext('Spanish')),
('th', gettext('Thai')),
)
Thanks
EDIT
I've finally fixed my problem adding a selected=selected field option which is displayed only in Chrome and Safari but at least all languages are displayed in FF.
<form action="/i18n/setlang/" method="post">
{% csrf_token %}
<input name="next" type="hidden" value=""/>
<select class="select-style" name="language" onchange="this.form.submit();" style="width:100px;font-size:12px;">
<option selected="selected" disabled="disabled">Select your language</option>
{% for lang in LANGUAGES %}
<option value="{{ lang.0 }}" {% if lang.0 == LANGUAGE_CODE %} selected="selected"{% endif %}>{{lang.1|title}}</option>
{% endfor %}
</select>
</form>

JQuery not hiding the buttons upon ready

When I try to use the below code with jfiddle, I comment out the jinja and the buttons hide as expected, but in the browser, the input buttons don't hide
{% extends "layout.html" %}
{% block body %}
<div>
{% if session.logged_in %}
<form action="{{ url_for('add_entry') }}" method=post class=add-entry>
<dl>
<dt>Stock Ticker:
<dd><input type=text size=30 name=stockname>
<dt>Date:
<dd><input id="datePicker" type="date" name='start_date'>
<dd><input type=submit value=Add>
</dl>
</form>
{% endif %}
</div>
<div>
<form action="{{ url_for('edit_entry') }}" method=post class=edit-entry>
<table class="entries">
<tr>
<th>stock ticker</th>
<th>date bought</th>
<th> Edit</th>
</tr>
{% for entry in entries %}
<tr>
<td><h2>{{ entry.stockname }}</h2></td>
<td>{{ entry.start_date|safe }}</td>
<td>
<input type="hidden" name="name" value="Edit"/>
<input class="show" type="button" id="edit-button" value="Edit"/>
<input class="hide" type="button" id="cancel-button" value="Cancel Changes"/>
<input class="hide" type="submit" id="save-button" value="Save Changes"/>
</td>
</tr>
{% else %}
<em>Unbelievable. No entries here so far</em>
{% endfor %}
</table>
</form>
</div>
{% endblock %}
<script>
$(document).ready( function() {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
$('#datePicker').val(today);
$(".hide").hide();
});
</script>
and layout.html consists of...
<!doctype html>
<title>Flaskr</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
<h1>Flaskr</h1>
<div class=metanav>
{% if not session.logged_in %}
log in
{% else %}
log out
{% endif %}
</div>
{% for message in get_flashed_messages() %}
<div class=flash>{{ message }}</div>
{% endfor %}
{% block body %}{% endblock %}
</div>
Fiddle: http://jsfiddle.net/5ZNTf/
You are defining lots of
<input type="submit" id="save-button" value="Save Changes"/>
in your for loop, so you have multiple input tags with the same id on the page, thus it does not work. Try giving the inputs a class instead.
Use class instead of id for your input elements.
<input type="hidden" class="name" value="Edit"/>
<input type="button" class="edit-button" value="Edit"/>
<input type="button" class="hide" value="Cancel Changes"/>
<input type="submit" class="hide" value="Save Changes"/>
Change the selector to use class.
$("input[class=hide]").hide();
Try this: http://jsfiddle.net/5ZNTf/1/
Id's need t be unique. If you would like to hide multiple elements with the same name use a class.
<button class="hide">Cancel</button>
<button class="hide">Save</button>
Then add a css class to hide them. It's more reliable IMO.
.hide {
display: none;
}
The issue had to do with localhost not property reading in jquery -_-
"//url" instead of "http://" or "https://" only works remotely

Categories