I have three radio buttons.. each radio buttons on click have an independent form that appears. I need to remove form from DOM when i click on a radio button. and there are a third one not ready yet. When i click on the first radio button only its form appears, the other two are removed from DOM. Same for other.
I don't have a good idea about JavaScript.
Html:
<div class="page-header">
<h1>Backtesting{% if form.instance.pk %}: {{form.instance.title}} {% endif %}</h1>
</div>
<div class="row">
<div class='col-md-9'>
<form action="{% url "backtest" %}" method='POST' role='form' id='form'>
{% csrf_token %}
<div id="tabs">
<input type="radio" name="tabs" value="first" id="toggle-tab1" checked="checked" />
<label for="toggle-tab1">Long</label>
<input type="radio" name="tabs" value="second" id="toggle-tab2" />
<label for="toggle-tab2">Short</label>
<input type="radio" name="tabs" value="third" id="toggle-tab3" />
<label for="toggle-tab3">Long and Short</label>
<div id="tab1" class="tab" >
{% include 'tags/parameters_form.html' %}
<br />
{% if user.is_authenticated %}
<input type='submit' id='run' value='Run' class='btn btn-default'>
{% if user.profile.is_active %}
Name: {{ form.title }} <input type='submit' name='save' value='Save' class='btn btn-default'>
{% else %}
<p>
Expired account! you need to reactivate in order to save parameters.
</p>
{% endif %}
{% else %}
Please login in order to Run backtesting!
</br>
Our system needs your email in order to notify you once one or more of your simulations are done. This is a safer way for you to keep track of your previous simulations (/jobs).
{% endif %}
</div>
<div id="tab2" class="tab" >
{% include 'tags/parameters_backtest_form.html' %}
<br />
{% if user.is_authenticated %}
<input type='submit' id='run' value='Run' class='btn btn-default'>
{% if user.profile.is_active %}
Name: {{ form.title }} <input type='submit' name='save' value='Save' class='btn btn-default'>
{% else %}
<p>
Expired account! you need to reactivate in order to save parameters.
</p>
{% endif %}
{% else %}
Please login in order to Run backtesting!
</br>
Our system needs your email in order to notify you once one or more of your simulations are done. This is a safer way for you to keep track of your previous simulations (/jobs).
{% endif %}
</div>
</div>
</form>
</div>
</div>
{% endblock %}
<form action="{% url "backtest" %}" method='POST' role='form' id='form'>
{% csrf_token %}
<div id="tabs">
<input type="radio" name="tabs" value="first" id="toggle-tab1" checked="checked" />
<label for="toggle-tab1">Long</label>
<input type="radio" name="tabs" value="second" id="toggle-tab2" />
<label for="toggle-tab2">Short</label>
<input type="radio" name="tabs" value="third" id="toggle-tab3" />
<label for="toggle-tab3">Long and Short</label>
<div id="tab1" class="tab" >
<!-- first form will show when page load -->
<fieldset id="first" class="toggle">
{% include 'tags/parameters_form.html' %}
</fieldset>
<fieldset disabled id="second" class="toggle">
{% include 'tags/parameters_form.html' %}
</fieldset>
<fieldset disabled id="third" class="toggle">
{% include 'tags/parameters_form.html' %}
</fieldset>
.....
Js
$('[name="tabs"]').click(function(){
$('.toggle').prop("disabled", true);
var val = $(this).val()
$('#'+val).prop('disabled', false);
});
When you add disabled attr in fieldset then fieldset inner input field data will not post in form that means field will not work in fieldset tag if it have disabled attribute. So you can show specific form in each condition and add attribute disable in fieldset tag that inner field data will not post.
Read about https://www.w3schools.com/tags/att_fieldset_disabled.asp
If you cannot change DOM elements and add a class there my answer would be to attach a event listener to each of the buttons:
'use strict';
var button1 = document.getElementById('toggle-tab1'),
button2 = document.getElementById('toggle-tab2'),
button3 = document.getElementById('toggle-tab3');
button1.addEventListener('click', function () {
// Code that takes it away (hide DOM elements or whatever you need)
});
On a side note a better approach would be to add a function to all of the radio inputs and then based on the ID or value of the input radio you can alter the behavior:
<input type="radio" name="tabs" onclick="handleClick(this)" value="first" id="toggle-tab1" checked="checked" />
Then you can have a function:
function handleClick (e) {
if (e.id == 'toggle-tab1') {
// Code that takes it away (hide DOM elements or whatever you need)
}
};
function onclick(e){
var tab = document.getElementById('toggle-tab1');
tab.style.visibility = "hidden";
}
button1.addEventListener('click', onclick(e))
This should do the trick!
Problem is resolved with :
<input type="radio" name="tabs" value="first" id="toggle-tab1" {% if strategy == 'l' %} checked="checked"{% endif %} />
<label for="toggle-tab1">Long</label>
<input type="radio" name="tabs" value="second" id="toggle-tab2" {% if strategy == 's' %} checked="checked" {% endif %} />
<label for="toggle-tab2">Short</label>
<div id="tab1" class="tab" >
<form action="{% url "backtest" %}" method='POST' role='form' id='form'>
{% csrf_token %}
<input type="hidden" name="tabs" value="first" id="toggle-tab1" checked="checked" />
Related
I am a beginner in liquid and currently I am trying to develop a shopify store. In the products page, I am displaying the options as radio buttons and taking customer inputs. The prices are different for the variants. Now I am trying to display the variant price based on the customer input, I am a bit lost. This is what I have so far:
{% for product_option in product.options_with_values %}
{{ product_option.name }}
{% for value in product_option.values %}
<input type="radio" id = "{{ value }}" name="{{ product_option.name}}" value="{{ value }}" >
<label for="{{ value }}">{{ value }}</label>
{% endfor %}
<!--want to show the variant price here-->
<br>
{% endfor %}
</div>
I know that I can display all the variant prices like this:
{% for variant in product.variants %}
{{ variant.title }} - {{ variant.price | money }}
{% endfor %}
But that's not what I want. Is there any way to do it without having to use javaScript? Thanks in advance.
Liquid is a server side language. It is processed by the server and cannot offer any dynamic behaviour.
You need to change the price with Javascript. There is no other solution.
Using your code I've made a small example
document
.querySelectorAll("input[name='Size']").forEach(option =>{
option.addEventListener("change", function (event, target) {
document.querySelectorAll(".price").forEach((price) => {
if(price.dataset.option==option.value){
price.classList.remove("hide");
}else{
price.classList.add("hide");
}
});
});
})
.hide{
display: none;
}
<html>
<form>
Size
<input type="radio" id="S" name="Size" checked="checked" value="S">
<label for="S">S</label>
<input type="radio" id="M" name="Size" value="M">
<label for="M">M</label>
<br>
<p>Price:
<span class="price" data-option="S">£14.00</span>
<span class="price hide" data-option="M">£15.00</span>
</p>
<input type="number" min="1">
<button type="submit">Add to Cart</button>
</form>
</html>
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!
I have a form which I am prefilling through a GET request. I am setting the value of a checkbox to either Yes or No. I would like to set the checkbox to checked if the value is Yes.
script
<script>
if ($('#cisco').val() == 'Yes') {
$('#cisco').prop('checked', true);
}
</script>
form.html
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" name="cisco" id="cisco"
value="{{ request.GET.cisco }}">Cisco:
</label>
</div>
</div>
Do an if else statement in the HTML. You don't need the javascript.
<div class="field">
<div class="control">
<label class="checkbox">
{% if request.GET.cisco == "Yes" %}
<input type="checkbox" name="cisco" id="cisco" checked> Cisco:
{% else %}
<input type="checkbox" name="cisco" id="cisco"> Cisco:
{% endif %}
</label>
</div>
</div>
I am using October CMS and materializecss to create an options form on one of my pages. The form works fine and dynamically loads content when you click through the various options. However, I have noticed that if I click on the same option two times in a row the content disappears and no new data is inserted. Even the loading screen fails to appear. Debugging has shown that no ajax request is actually being fired off. Does anyone know how I can change this so that clicking twice would either leave the current content on the page or reload the content on the page? Below is the problematic radio element and the complete partial.
Radio Button:
<p class="optrow">
<input onclick="onsend()" type="radio" class="box" id="cat_all"
name="dates" value="all" data-request="onEventDeals"
checked="checked" data-request-update="'deals::default':'#deals'"
data-request-loading="#loading">
<label for="cat_all"> Show All</label>
</p>
Partial:
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header active"><i class="material-icons">format_list_bulleted</i>Deal Options</div>
<div class="collapsible-body"><form id="dealsoptions" class data-request="onTest" data-request-update="calcresult: '#deals'">
{# <p>
See All Deals - Clear
</p> #}
{# <h5><b> Deal Source</b></h6>
<hr>
<div id="dealsource">
<p class="optrow">
<input onClick="onsend()" type="checkbox" class="box" id="source_all" name="userProviders[]"
value="all" data-request="onLocalDeals" data-request-update="'deals::default': '#deals'"
data-request-loading="#loading" data-request-data="clear:1"/>
<label for="source_all"> Show All</label>
</p>
{% for provider in providers %}
<p class="optrow">
<input onClick="onsend()" type="checkbox" class="box sourcebox" id="source_{{ provider.userProviderID }}" name="userProviders[]" value="{{ provider.userProviderID }}" checked="checked" data-request="onLocalDeals" data-request-update="'deals::default': '#deals'" data-request-loading="#loading"/>
<label for="source_{{ provider.userProviderID }}"> {{ provider.providerName }}</label>
</p>
{% endfor %}
</div>
#}
<hr>
<h5><b> Event Date</b></h6>
<hr>
<div id="eventdate">
<p class="optrow">
<input onClick="onsend()" type="radio" class="box" id="cat_all"
name="dates" value="all" data-request="onEventDeals" checked="checked"
data-request-update="'deals::default': '#deals'" data-request-loading="#loading"/>
<label for="cat_all"> Show All</label>
</p>
{% set weekEnd = "this sunday"|date('Y-m-d') %}
{% set dates = {'Today':{'start':"now"|date("Y-m-d"),'end':"now"|date("Y-m-d")},
'Tomorrow':{'start':"now"|date_modify("+1 day")|date("Y-m-d"),'end':"now"|date_modify("+1 day")|date("Y-m-d")},
'This_Weekend':{'start':"this sunday"|date_modify("-2 day")|date('Y-m-d'),'end':weekEnd},
'This_Week':{'start':"now"|date("Y-m-d"),'end':weekEnd},
'This_Month':{'start':"now"|date("Y-m-d"),'end':"now"|date("Y-m-t")}} %}
{% for key,date in dates %}
<p class="optrow">
<input onClick="onsend()" type="radio" class="box type_{{ key }}"
id="cat_{{ key }}" name="dates"
value="{{ date.start }}:{{ date.end }}"
data-request-data="start:'{{ date.start }}',end:'{{ date.end }}'"
data-request="onEventDeals" data-request-update="'deals::default': '#deals'"
data-request-loading="#loading"/>
<label for="cat_{{ key }}"> {{ key|replace({'_':' '})|title }}</label>
</p>
{% endfor %}
</div>
{% partial 'deals::apps' %}
</form>
</div>
</li>
</ul>
I notice you have onClick="onsend()" on the input, this might be causing a problem for the AJAX handler to be fired off. Try removing it and see if it progresses further.
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