I'm created a form where values are coming from my view and the value is daily basis and I want to give a drop down where user can change it to weekly basis and the values will be multiplied by 7.
As you can see in the above picture, I'm giving a drop down option where user can change it to weekly basis and monthly basis and the value inside the form will change as per the selection. But I'm not aware how I can achieve this.
My code:
return render(request, 'test.html',
{'List1': l1, 'List2': l2, 'List3': l3}
and my form.html is readonly form which renders these list in order.
<form>
<div class="form-row">
{% for l in List1 %}
<div class="form-group col-md-4">
<label>x</label>
<div class="input-group mb-3">
<input type="text" value="{{l}}" readonly>
</div>
</div>
{% endfor %}
</div>
........simliary for rest list.
</form>
I want to multiply every value inside form by 7 when user selects weekly in drop-down. How can I achieve it?
Related
I'm working on a website using python django as a back end, and am currently trying to pull values from a HTML form and pass it to a django form. This is due to only certain fields needing access to data from the database and needing JS on the page to show/hide based on the values of certain selects in the HTML. What I need to do is to set the value of an object's attribute that is passed in from the views.py
<script>
output = document.getElementById("example");
{{ form.fieldImChanging.value }} = output.value;
</script>
...
<form action="" method="POST" class="row gy-2 gx-3 align-items-center">
<label for="example">TestField</label>
<input type="text" name="example" maxlength="16" size=20 required="">
...
<input class="btn btn-success col-3 mt-2" type="submit" value="Submit">
Back
</form>
Where the trouble lies is in getting that context variable to set, because as of right now that will just create a variable named after whatever the default value of fieldImChanging is in the django form. Is there a way to do this with django at all?
Facing an issue that I could easily solve with the help of JS, but failing to do it in twig. I have a couple of fields in twig, and a submit button. I would want to validate these fields' data in frontend before actually submitting them, and have the "Submit" button disabled as long as the condition is unsatisfacatory. The problem in case:
<div class="col-lg-12">
<div class="form-group field">
<label>Description:</label>
<textarea model="description" name="description"></textarea>
</div>
</div>
<div class="col-lg-6">
// checking if user has forgotten to add description, to prevent data submitting
<button type="submit" class="btn btn-default blue" {% if description == "" } % disabled="disabled" {% endif %}>
Submit
</button>
</div>
In JS or AngularJSi could easily solve this problem, but is there any means of achieving the same result in Twig? I need it to check the status of description dynamically and react accordingly.
Already tried:
min-length - does not prevent submitting, only colors the field after it is activated, does not work
Is there any means to do it? Thank you in advance!
The thing I have here doesn't work. It will just get rid of the field once choose US and doesn't go back to the choices even if choose something else.
teacher_signup.html
{% block content %}
<h2>Sign Up As Teacher</h2>
<form method="post">
{% csrf_token %}
{% for field in form.visible_fields %}
{{ field | as_crispy_field}}
{% if field.name == "country" %}
<input type="button" value="cube" onclick="getcube()"/>
{% endif %}
{% endfor %}
<button class="btn btn-success" type="submit">Sign Up</button>
</form>
<script>
function getcube(){
var county=document.getElementById("id_country").value;
alert(county);
}
$(document).ready(function() {
$("#id_country").change(function(){
if (this.value=="US"){
$("#id_state").replaceWith();
}
});
});
</script>
{% endblock content %}
forms.py
class TeacherSignUpForm(SignupForm):
country=CountryField(blank_label='(select country)').formfield()
# this is just doing the same thing as country=forms.CharField(max_length=20, widget=forms.Select(choices=COUNTRY_CHOICES), required=True)
state=forms.CharField(max_length=20,required=True)
I want to replace the state field with
state=forms.CharField(max_length=20, widget=forms.Select(choices=STATE_CHOICES), required=True, strip=True)
if the country=="US" and if they choose something else, then it will just show the text field.
This is how I would approach it:
I would create both fields in your form (e.g. a state_us field with the select widget and state field with the normal text input widget). You make one of the two hidden initially depending on the initial value you want to give to country (or if country is initially empty, make them both hidden).
In the form's clean method, where the form is bound (i.e. there was some data submitted), you can set the appropriate field hidden based on the value of the country. That's so that the form with errors is rendered correctly.
Also in the clean method, you verify whether the correct field is populated depending on cleaned_data['country'].
In your template, both fields are rendered, and your javascript checks for the value of country and hides either "id_state_us" or "id_state" (and shows the other). It should also always copy the selected value for the state_us field to the state field and clear it when a different country is selected. That way the submitted state data always contains the state.
I'm trying to generate multiple pairs of a number form and a checkbox.
Clicking the checkbox disables the number field, The problem is that only the first pair is working. Can someone help me?
here's my code: addHRGrade.blade.php
#extends('layouts.default')
#section('content')
<!-- opening the form -->
{{ Form::open(array('url' => 'students/create', 'method' => 'PUT')) }}
#foreach($students as $stud)
<ul>
<li>
<!-- Printing the students retrieved from the dataabase -->
{{ $stud->LName. " , " .$stud->FName }}
<!-- Making a text field for every students -->
<div ng-app="" >
<input name="grade" id="no_grade" type="checkbox" value="0" ng-model="checked" />
<label>No Grade</label>
<input name="grade" id="num_grade" type="number" value="65" ng-model="number" ng-disabled="checked"/>
</div>
</li>
</ul>
#endforeach
<!-- Save button -->
<p> {{Form::submit('Save')}} </p>
<!-- Closing the form -->
{{ Form::close() }}
#stop
Main issue
You're declaring one ng-app="" per table row. I don't think that's what you want to do. You should wrap everything into a single app. Also, you don't assign anything to ngApp and also ngController so your not able to implement any further logic.
Side issues
When you fixed the main issue, you'll see, that every checkbox and textbox will display the same value, since you assign the same model to each checkbox resp. textbox.
The value="65" won't do anything. You want to display the models data, so the models data (which is undefined at startup). To set the initial value use ng-init="number=65".
I have a page in my app which contains a muti-step form. To achieve this I have 3 forms in separate tabs. The js then only allows you to continue to the next step when the form your on successfully validates.
The first form is working perfectly and I've used the same structure on the second form too (as below).
<div class="stepped-content" ng-show="steps[steps_index.yourDetails].active">
<form name="yourDetails" class="form-horizontal vs-onsubmit" ng-submit="submitForm('yourDetails')" novalidate>
<div class="form-group" ng-form="organiser_name">
<label class="col-sm-4 control-label">Event organiser</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="organiser_name" ng-model="event.organiser_name" placeholder="You or your company's name." ng-required="true" />
<div ng-messages="yourDetails.organiser_name.$error">
<div ng-message="required">Please tell us who is organising this event.</div>
</div>
</div>
</div>
</form>
</div>
However when I print out {{ yourDetails.organiser_name | json }} it is undefined. {{ yourDetails }} itself is defined though:
{
"$error": {},
"$name": "yourDetails",
"$dirty": false,
"$pristine": true,
"$valid": true,
"$invalid": false,
"$submitted": false
}
I'm struggling to see anything wrong with what I've written, so maybe I'm missing a rule that disallows more than one form in angular?
Thanks
Not more than one form, but the name of the form will be used to put the FormController onto the scope.
If you have two or more forms with the same name property, the last one processed will overwrite the previous ones.