How to Set Checkbox Checked if Value Is Yes (Django) - javascript

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>

Related

Multiple form submit with one button

I have two form now which needs to submitted differently right now i want the both the forms to be submitted with single submit button.
<div class="row m-b-4">
<div class="col-md-12">
<div class="form-group label-static type-text" :class="{'has-error': errors && (errors.final_billing || errors.final_billing_was_added)}">
<label class="control-label" for="id_final_billing" v-show="_.isEmpty(billingInfo) || !billingInfo.has_close_out" v-cloak>
Final Billing <span v-show="_.isEmpty(billingInfo) || !billingInfo.has_close_out" class="req" v-cloak>*</span>
</label>
<div v-show="_.isEmpty(billingInfo) || !billingInfo.has_close_out" v-cloak>
<div class="radio" style="display: inline-block;">
<label>
<input type="radio" name="final_billing" :value="true" v-model="form.final_billing" />
<span class="circle"></span>
<span class="check"></span>Yes
</label>
</div>
<div class="radio m-l-4" style="display: inline-block;">
<label>
<input type="radio" name="final_billing" :value="false" v-model="form.final_billing" />
<span class="circle"></span>
<span class="check"></span>No
</label>
</div>
</div>
{% include "m_close_out_form.html" %}
{% include "a_close_out_form.html" %}
{% include "d_close_out_form.html" %}
when we select final billing one of these forms gets opened based on some condition
<button type="submit" form="entry" class="btn btn-primary btn-raised">Submit</button>
I have the below button in other html file
<button type="submit" form="close-out-form" class="btn btn-primary btn-raised">Approve</button>
So when i click on the Submit button with form="entry" i need to make submit on both the forms form="entry" and form="close-out-form"

Remove form from DOM using JavaScript

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" />

Symfony search form without reload page

I use symnfony and have form for search entity by parameters, but when submit form my page reload, I don't know how realized search form when fill out fields and under form I have result without reload page, like write in filed some word and in this time under update block with result
this my form with action, action wait get parameters and rendering in this view with form and result
<div class="filters" id="filter_form">
<form action="{{ path('outbound_invoices') }}" method="get">
<div class="choice-group" role="group" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="status" value={{ status_draft }} checked="checked">{{ status_draft|trans }}
</label>
<label class="btn">
<input type="radio" name="status" value={{ status_sent }}>{{ status_sent|trans }}
</label>
<label class="btn">
<input type="radio" name="status" value={{ status_paid }}>{{ status_paid|trans }}
</label>
</div>
<div class="choice-group" role="group" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="type" value="all" checked="checked">all
</label>
<label class="btn">
<input type="radio" name="type" value="contract">contract
</label>
<label class="btn">
<input type="radio" name="type" value="other">other
</label>
</div>
<input name="search" id="filter-employees" placeholder="{{ 'search'|trans }}" class="form-control">
<p>from Date: <input type="text" name="from_date" id="from_datepicker" dataformatas="dd-mm-yyyy"></p>
<p>to Date: <input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy"></p>
<input type="submit" value="Submit">
</form>
</div>
// block result
<table class="table">
<thead>
<tr>
<th>
{% trans %}invoice_number_short{% endtrans %}
</th>
</tr>
</thead>
<tbody>
{# #var outboundInvoice \AppBundle\Entity\OutboundInvoice#}
{% for outboundInvoice in outboundInvoices %}
<tr class="clickable" data-href="{{ path('outbound_invoices_show', {'id': outboundInvoice.id}) }}">
<td>
{{ outboundInvoice.invoiceNumber }}
</td>
{% endfor %}
</tr>
</tbody>
</table>
in action I just create query builder for find entities and rendering in template. How it's realized with ajax without reload and search in real time ?
Here is an example to post your form via ajax with jQuery:
var form = $('#my-form');
$.post(
form.prop('action'), //action url
form.serializeArray(), //serialized form data
function(result){ //callback
console.log(result);
}
);
Use the AJAX as you'd normally do:
//add jquery here
$('#filter-employees').click(function(e){
e.preventDefault();
$.ajax({
action:"/invoices"
//...
}).done(function(resp));
});
Then in the controller action, you need to verify if the request is a XMLHttpRequest one, and create the functionality accordingly.
/**
* #Route("/invoices", name="outbound_invoices")
*/
public function processAction(Request $request)
{
if ($request->isXmlHttpRequest()) {
//do work
}
return $this->redirectToRoute('whatever');
}
OBS: I would recommend you to use Angular for this type of things.

how to pass twig code from javascript to twig file?

I want to create a registration form for agent, but one agent should be able to register how many agent they want.
User complete fields (name, surname etc..) and they must answer the question:
Would you like add new agent? -> look add code:
<div class="form-group">
<label for="new_agent">Would you like add new agent:</label>
<div class="radio new_agent_div">
<label class="radio-inline">
<input type="radio" name="new_agent" id="new_agent" value="1"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="new_agent" id="new_agent2" value="0" > No
</label>
</div>
</div>
<div class="add-agents"></div>
if they checked Yes I run jquery code:
jQuery(document).ready(function($) {
$(".new_agent_div").change(function(){
var html = [
' <div class="form-group">',
' <label for="name">First Name</label>',
' <input type="text" class="form-control" name="name" id="name" value="{{app.request.get("name")}}" placeholder="">',
' {% if validation["name"][0] is defined %}',
' <span class="help-block">',
' <span class="glyphicon glyphicon-exclamation-sign"></span>',
' {{validation["name"][0]}}',
' </span>',
' {% endif %}',
' </div>'
].join('');
if ($('#new_agent').is(':checked')) {
$('.add-agents').html(html);
}
if ($('#new_agent2').is(':checked')) {
$('.add-agents').html('');
}
});
});
After that should be displayed again if add new user...
What's a problem? When I click 'Yes' I received Twig tags as string. Look:
twig tags
What should I do? Maybe some filters or something like this?
Why you did not put the html by default and hide/show when the radio value changes?
<div class="form-group">
<label for="new_agent">Would you like add new agent:</label>
<div class="radio new_agent_div">
<label class="radio-inline">
<input type="radio" name="new_agent" id="new_agent" value="1"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="new_agent" id="new_agent2" value="0" > No
</label>
</div>
</div>
<div class="add-agents" style="display:none;">
<div class="form-group">
<label for="name">First Name</label>
<input type="text" class="form-control" name="name" id="name" value="{{app.request.get("name")}}" placeholder="">
{% if validation["name"][0] is defined %}
<span class="help-block">
<span class="glyphicon glyphicon-exclamation-sign"></span>
{{validation["name"][0]}}
</span>
{% endif %}
</div>
</div>
And then the js looks like
jQuery(document).ready(function($) {
$(".new_agent_div").change(function(){
if ($('#new_agent').is(':checked')) {
$('.add-agents').css("display" , "block");
}
if ($('#new_agent2').is(':checked')) {
$('.add-agents').css("display" , "none");
}
});
});

October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear

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.

Categories