I've got a form with 2 radio buttons.
Based on the radio buttons an unordered list is shown (hide/show using js).
This works as desired.
The list is used to select a service.
When I select a service with the 1st radio button "pre selected" it always passes the 1st value of the 2nd hidden list.
If I apply the list in 2 separate pages everything works fine.
What I'm trying to achieve: 1 page, 2 radio buttons, 1 list.
The selected value of the list is passed to paypal for payment.
As you can see, I'm populating the same field for both lists, I believe that, by doing this it would just take the selected value regardless of which list is visible.
Does anyone have an idea where I'm wrong in my logic?
Here's my code:
<div class="col-sm-12">
<div class="radio mt-20">
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="inh" checked onclick="show1();"> In-House service </label>
<label><input type="radio" name="optionsRadios" id="optionsRadios2" value="mob" onclick="show2();"> Mobile service</label>
</div>
</div>
<div class="col-sm-12">
<div class="form-group mb-10">
<div class="form-group">
<select name="form_massage" id="form_is" class="form-control">
<option value="In house Full body relax massage - €40">Full body relax massage - €40</option>
<option value="In house Full body strong massage - €45">Full body strong massage - €45</option>
<option value="In house Back and Neck massage - €20">Back and Neck massage - €20</option>
<option value="In house Back and Legs - €25">Back and Legs - €25</option>
<option value="In house Legs and Feet - €15">Legs and Feet - €15</option>
</select>
<select name="form_massage" id="form_ms" class="form-control hide">
<option value="Mobile - Full body relax massage - €50">Full body relax massage - €50</option>
<option value="Mobile - Full body strong massage - €55">Full body strong massage - €55</option>
<option value="Mobile - Back and Neck massage - €30">Back and Neck massage - €30</option>
<option value="Mobile - Back and Legs - €35">Back and Legs - €35</option>
<option value="Mobile - Legs and Feet - €20">Legs and Feet - €20</option>
</select>
</div>
</div>
</div>
</div>
The second select (or input) of the same name essentially overrides the first one, making it irrelevant as a form input on submit.
You need them to have different names if you want the first one to have an effect as a form input.
For your use case, the simplest solution may be to merge all the options into a single select and give them a class corresponding to which ones you want to be visible when (say, class=inh, class=mob). Then have your JS code show/hide the options, selecting them by class.
Related
Here is my Multiselect
<div class="form-group">
<label>Multiple select using select 2</label>
<select class="js-example-basic-multiple w-100" id='mls' name="resources" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="AM">America</option>
<option value="CA">Canada</option>
<option value="RU">Russia</option>
</select>
</div>
Whenever I try to post despite selecting multiple values I still get only one .
Here is stacktrace.
Variable Value
csrfmiddlewaretoken
'aI5tuSxOtxzGOpMDKR4RcH685yWUFpqkgTeBrYVbQ8kN9ODxnPOytllMTAb11Bib'
acc_id
'1'
resources
'AM'
I tried with getlist as well still getting single value we all can see single values are passing in request itself.
Not sure what might I am doing wrong here .
It seems you are send single value from front.
i tested it:
<form method="GET">
<div class="form-group">
<label>Multiple select using select 2</label>
<select class="js-example-basic-multiple w-100" id='mls' name="resources" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="AM">America</option>
<option value="CA">Canada</option>
<option value="RU">Russia</option>
</select>
</div>
<button type="submit">Show me markers</button>
</form>
i see in request:
"GET /test/testmarkers/?resources=WY&resources=AM HTTP/1.1" 200 1867
And i am sure, you are use not Form.send(). How are you send it?
I am using Bootstrap-select for multi-select items with Django. It works fine on desktop, but when the native mobile drop-down is enabled, the selected values of the dropdown do not populate.
HTML
<!-- start product brand info -->
<div class="row">
<div class="col-md-6 col-xs-*">
<div>
<label for="id_brand-name" class="form-label">Products</label>
</div>
<select multiple class="form-control selectpicker mb-3" id="id_brand-name" name="brand-name" mobile="true" multiple required>
{% for product in products %}
<option value="{{product.id}}" id="optiion">{{ product.brand.name | title }} - {{product.name | title}}</option>
{%endfor%}
</select>
<div class="invalid-feedback">
Select at least one product.
</div>
</div>
</div>
<!-- end product info -->
<script>
//Enble native drop down on mobile
window.onload = function () {
$('#id_brand-name').selectpicker({
container: 'body'
});
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$('#id_brand-name').selectpicker('mobile')
}};
</script>
No matter how many items are selected, the selector always shows Nothing selected. When the data is posted, it is apart of the form though.
I like to use bootstrap-select, but this problem has been bothering me for a long time
Similar questions can be found on github, but no perfect answer.
The reason is that it will always refresh his title, no matter how remove() is done externally, and you can't change it's style on iphone Safari and Firefox.
So my solution is: if you can't remove it, then join it.
You have to change the original file: bootstrap-select.js
Search for: bs-title-option, next line you will find:
this.selectpicker.view.titleOption.value = '';
And add two lines down:
this.selectpicker.view.titleOption.value = '';
// new add
this.selectpicker.view.titleOption.disabled='true';
this.selectpicker.view.titleOption.textContent=this.options.title;
//
Done
When you use $('#id_brand-name').selectpicker('mobile')
The title text show on first empty option, and it can't be choose.
try it!
I am building a dashboard which will have some information about users. I am trying to set value to select tag using Django but the value never get assigned. Here is my code.
My model look something like this
class User(models.Model):
first_name
last_name
reg_status
I need to fill in the template with the reg_status. The reg_status can contain three options, they are as mentioned below:
mailed
register
not register
The value of reg_status is dynamic. For example, if I pass in reg_status = mailed from my view, I need the <option value='mailed'> to be selected. However, if I pass in the reg_status = register from my view, I need the <option value='register'> to be selected.
Here is how I am trying to render the content in the template:
{% for u in user %}
<input type='text' value={{u.first_name}}/>
<input type='text' value={{u.last_name}}/>
<select value={{u.reg_status}>
<option value='mailed'>mailed</option>
<option value='register'>register</option>
<option value='not register'>not register</option>
</select>
{% endfor %}
The output give 'mailed' as selected for all instance even if the value is set to 'registered' or 'not registered'.
You can use a Jinja ternary operator. It's a little greedy because you're doing the same operation 3 times. You could also look into setting a global variable with Jinja (see the documentation, scroll down to Scoping Behavior).
<select value='{{ u.reg_status }}'>
<option value='mailed' {{ "selected='selected'" if u.reg_status == 'mailed' else "" }}>mailed</option>
<option value='register' {{ "selected='selected'" if u.reg_status == 'register' else "" }}>register</option>
<option value='not register' {{ "selected='selected'" if u.reg_status == 'not register' else "" }}>not register</option>
</select>
I'm a newbie to Django, and I want to add a sort of a button for sorting elements according to date, descending and ascending order.
The idea is to add a button or carousel in the template page. and based on the click decide the sorting if ascending or descending order.
I cant figure out how to link the button to the backend.
I know that the queryset:
post.objects.order_by('date')
the button is created as:
<div class="form-group">
<label class="font-weight-light text-warning text-info " for="exampleFormControlSelect1" >Sort by date</label>
<select class="form-control" id="sort">
<option id="NtF">New to old</option>
<option id = "FtN">old to new</option>
</select>
I am outputting data from a query to an html table for representation. On the Right corner of the table I have an "Update" button and a "Delete" button.
What I am trying to do is:
When I press on the update button a modal opens. Inside that modal I have a form which I want to have predefined the values from the current row and be able to edit the specific row
When I press the delete button on a row I want that row to be deleted and reload the page
This is my html table, the last two columns on the right are the buttons
**Survey Name** **Category** **Weight** **Update** **Delete**
Consultation Ambiance 20 Update Delete
Consultation Consultation 40 Update Delete
Consultation Follow Up 40 Update Delete
This is my first query which generates the table
<cfquery name="categories" datasource="#dsn#">
select s.name, s.id as surveyid, rc.categoryname, rc.id as categoryid, sc.cweight
from survey_categories sc
join surveys s on s.id = sc.surveyidfk
join rating_categories rc on rc.id = sc.categoryidfk
where sc.surveyidfk='#form.survey#'
</cfquery>
This is the form I am accessing when I press "Update"
This form has an extra cfloop around the select tag to get the rest of the categories that I have in the database in case the user needs to change the category.
So, for example if I pressed the update button on the second row on my table this form should have Consultation in the drop down menu and the number 40 on the bottom textbox
A small note that may help, the first query that outputs the table also output a unique id with the pair (id, surveyName, Category, Weight). So the update query in the end would be something like
update categories set category='Example', weight='30'
where id='345'
I don't know how much this can help.
<cfoutput>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel">Update</h3>
</div>
<div class="modal-body">
<form name="update" action="updateSCpair.cfm" method="post">
<input type="text" value="#categories.name#" class="input-xlarge" disabled> <br />
<select name="categories">
<cfloop query="ratingCat">
<option value="#ratingCat.id#" >#ratingCat.categoryName#</option>
</cfloop>
</select>
<br />
<input class="span3" type="number" placeholder="Enter Category Weight" required >
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</form>
</div>
</cfoutput>
UPDATE
TO make it more clear because I think I wrote too much. I need to call a modal on form submittion. I will need to replace my current buttons with a form and then pass all the data through hidden variables. The problem is that this is not working for me. I found another example here but it doesn't seem to work. EXAMPLE
I think the simplest way is to have two forms at the end of each row. You already have the buttons. The rest can be hidden fields.
Your update form would have a target attribute to launch your popup. Since you already have the values from your query, you just submit them to the popup as hidden fields.
Your delete form would submit to the current coldfusion page. At the start of the page, you would have something like this:
<cfif StructKeyExists(form, "DeleteMeOrSomethingLikeThat")>
code to delete record
</cfif>
This will get you started. If you want to improve it later on, you can.
Finally, do one thing at a time.