I am using an html template for my website, and wants to collect information to my django backend. Specifically, I want to return the value of email address from this part of the code
<input type="text" placeholder="Email" value="" style="height: 30px; width: 250px; border: 2px solid grey; padding: 7px; margin-top: 10px; margin-bottom: 10px; font-size: 20px;">
if i put {{%form.email%}} in to value="", it'll write <input id= inside the box, and "> outside of the box.
if I put {{%form.email%} behind this part of html code, it will generate another box. But i only want to use this box.
How should i do it?
Usually you want to generate a field by using a Django-Form Class. There you can also customize your entire field: For your example you would have to create a class like this in your forms.py
class EmailForm(forms.Form)
email = forms.CharField(widget=forms.EmailInput(attrs={'class': 'email-input',
'placeholder': 'Email'})
You can also use
{'style': 'height: 30px; width: 250px; border: 2px solid grey; padding: 7px; margin-top: 10px; margin-bottom: 10px; font-size: 20px;'}
instead of {'class': 'email-input'} for your style, but it's usually better to use a css class.
The email in your class is basically your entire email field but it automatically generates a name and id so it's easier to use.
Now if you want the value of your field in the backend you have to do a GET or POST request (I think in this case POST). You will get the value by using the following pattern in the method in which you want to handle the recieved data: (works but not optimal) field_value = request.POST.get('fieldname') or even better as Daniel pointed out in the comments with field_value = form.cleaned_data['fieldname'].
So In your case it would be something like this: email = form.cleaned_data['email']. This will return the value that was typed into the field for later backend-use.
Related
I'm trying to make little progress indicators for a form that change depending on the page you are on. I thought the easiest way to do this would be to create the circle ID's, style them, and then just add a class list with one or two stylistic changes to show something different as a specific page was brought up.
When my function executes, the new class with the changes is being added -- the dom is proving that -- but, the style is not overtaking the original.
I've tried classList.Add, classList.toggle, className.add/Classname.toggle. Nothing seems to work.
Why might that be?
function nextPage()
{
var step2 = document.getElementById("step2");
step2.classList.toggle("newClass");
};
#step2
{
height: 27px;
width: 27px;
border: 1px solid #e5e5e5;
background: linear-gradient(#f2f2f2, #e9e9e9);
border-radius: 50%;
content: "";
margin-left: 95.5px;
float: left;
}
.newClass
{
background: linear-gradient(#f2f2f2, #8c66ff);
}
<div id="step2"></div>
<br />
<p id="next" onclick="nextPage()">Next</p>
Calculating CSS Specificity Value:
As we know, it was because simply using the class name by itself had a lower specificity value and was trumped by the other selector which targeted the unordered list with the ID value. The important words in that sentence were class and ID. CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID.
For more info https://css-tricks.com/specifics-on-css-specificity/
So, more specificity use Class aswell as IDs.
!importent, also works but it note a good practice.
Hope this will help you..
Your id step2 will always override your class newClass.
Easiest solution is just to change .newClass { ... } to #step2.newClass { ... } in your CSS to make it more specific
function nextPage()
{
var step2 = document.getElementById("step2");
step2.classList.toggle("newClass");
};
#step2
{
height: 27px;
width: 27px;
border: 1px solid #e5e5e5;
background: linear-gradient(#f2f2f2, #e9e9e9);
border-radius: 50%;
content: "";
margin-left: 95.5px;
float: left;
}
#step2.newClass
{
background: linear-gradient(#f2f2f2, #8c66ff);
}
<div id="step2"></div>
<br />
<p id="next" onclick="nextPage()">Next</p>
Good day all.
I've a page with a form, there is a option (a checkbox) that MUST be checked in order to submit the form, so basically there is a simple javascript like this:
function checkbox_tick_action (){
$("#mt-container #option").prop( 'checked',true );
$("#mt-container #option").attr('checked','checked');
console.log("ticked");
}
binded on the submit event.
This work pretty fine, but on some mobiles, the checkbox isn't updated, so this happen:
the form is submitted (the checkbox IS ticked, but shown as unticked).
landing on the next page, and hitting the back button, the checkbox is now showed as ticked.
I have done a number of test and I'm prett sure is a matter of "updating the DOM" or something that simply does not render the new "visual" of the checkbox.
anyone has a hint on how to solve this issue?
is there a way to force the render of an element, via js?
Note that this is actually working on most devices.
one of the devices that has this issue is Samsung ACE, using the stock browser.
all the phones that has this issue, are somehow dated.
the issue is present on android phones mostly, with 2.3.3 or less.
I have try this:
function checkbox_tick_action (){
$("#mt-container #option").prop( 'checked',true );
$("#mt-container #option").attr('checked','checked');
var opt = document.getElementById('option');
opt.style.display='none';
opt.offsetHeight;
opt.style.display='block';
console.log("tick 2");
with no luck actually.
the HTML is:
<input type="checkbox" name="option" id="option" value="true" data-tid="checkBox">
The CSS:
#mt-container input:not(checked) + label:before {
border: 1px solid #3E3E3E;
background-color: #EFEFEF;
content: "\00a0";
display: inline-block;
width: 14px;
height: 14px;
font-size:15px;
line-height: 15px;
}
#mt-container input:checked + label:before {
border: 1px solid #3E3E3E;
background-color: #EFEFEF;
color: #3E3E3E;
content: "\2714";
font-size: 15px;
text-align: center;
line-height: 15px;
font-weight: bold;
}
#mt-container input:checked, #mt-container input:not(checked) {
position:absolute;
top:-500px;
left:-900px;
}
If you are using Google material design, add "is-checked" class to element's
parent, as
$("#option").parent().addClass("is-checked");
to render visualisation. hope this will work!
This question already has answers here:
How to prevent ENTER keypress to submit a web form?
(29 answers)
Closed 7 years ago.
I have developed a search feature in my application. Users can search for streets by typing the address in an input box. Onkeyup, the a function is called that compares the input against a database full of addresses. The function gives back 5 suggestions which are showed below the inputbox like a sort of dropdownmenu. This works perfectly fine. The user can afterwards select one of the suggestions, which triggers another function.
What I want to implement now is that, when the user presses ENTER, the second function is automatically called with the first suggestion. I thought it would not be that difficult to program, but I'm facing some difficulties. When I press enter, the page refreshes instead of going to the function.
Here is my code:
<div id = "toolbar">
<form id ="suggestions">
<input type = "text" id = "insertText" autocomplete="off" onkeyup = "if(event.keyCode == 13) {SearchAddress(option1.text)} else {giveSuggestion()}" onfocus='showOptions()'
<option class="option" id = "option1" onmousedown = "searchAddress(option1.text)"></option>
<option class="option" id = "option2" ... </option>
</form>
</div>
CSS
#toolbar {
position: fixed;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px;
background: #ccc;
border-bottom: 1px solid #333;
}
#suggestions {
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
left: 310px;
top: 5px;
background-color: white;
font-size: 12px;
}
.option{
display:none;
cursor: default;
padding: 0px 3px;
}
Any suggestions?
When you hit enter the browser tries to submit the form.
So, there are two possible solutions:
Remove form tag, if you don't need to send any data from it to the backend.
Add onsubmit="return false;" to the form tag.
I guess the browser didn't know what event is So......
<input type = "text"
id = "insertText"
autocomplete="off"
onkeyup = "function(event){if(event.keyCode == 13)
{SearchAddress(option1.text)}
else {giveSuggestion()}"
onfocus='showOptions()'}" />
The default behavior of form will refresh the page, so place replace the form tag to div, and handle the form submit yourself use library like jQuery or vanilla XMLHttpRequest object.
I'm making a grid of divs that can be toggled on and off. I need to post the values of these toggled divs to a database.
Currently I have jQuery waiting for clicks on the divs and then changing checkbox values on a hidden checkbox element...
$('.icon').click(function(){
var checkValue = $(this).attr("data-c");
// Then tick hidden checkbox where data-c = checkbox
});
As I end up posting this data with ajax, is there a better way to do this?
Here's what it looks like:
You actually don't need JS.
Use a <label> elements to wrap your checkbox and a span.
Change the style of that inner span using the input:checked next sibling selector +:
label.icon span{
cursor: pointer;
display: inline-block;
width: 75px;
height: 75px;
background:url(http://i.stack.imgur.com/ceycQ.jpg) no-repeat;
border: 3px solid #0186C9;
border-radius: 12px;
}
label.icon input{ /* hide the checkbox */
position: absolute;
visibility: hidden;
}
label.icon input:checked + span{ /* when input is checked */
background-position: 0 -75px;
}
<form action="">
<label class="icon">
<input type="checkbox" name="dog">
<span></span>
</label>
</form>
on form submit you'll submit all the correct data without a single line of JS
I've found a similar question here: Jquery Use Image As CheckBox
As an alternative to storing the value in a check box you could store it in a object? For example:
window.icons = {};
$('.icon').click(function() {
var id = $(this).data('identifier');
window.icons[id] = !!window.icons[id];
});
Also check out this example for a similar use http://jsfiddle.net/bdTX2/
I'm using a badge icon to display the number of cart items. It works great when the number is 1 or more but if there are no items in the cart, it doesn't display zero, but rather half of it disappears. I've posted screenshots of what it looks like with a value of 1+ and then what it looks like when the cart is empty. Further, even after an item is added to the cart, the badge doesn't pop up with the number until refreshing or going to the next page after the item has been added.
I'm thinking I probably have to add more script but just learning and not sure how I would do this.
To give the full picture: This is a BigCommerce site so the cart info is generated by an internal server. It is referenced by variable %%GLOBAL_CartItems%% (in code below) and normally displays as a text string, "View Cart.." along with the total number of items in the cart. Since I only want the number, I added script that replaces the text with numeric values only. I've included both the HTML and script below.
What it looks like with 1 or more in cart:
What it looks like with no items in cart:
<li style="display:%%GLOBAL_HideCartOptions%%">
<span><i class="icon-large sprite-glyphicons_halflings_115_shopping-cart2x icon-2x" style="position: relative; top: 14px; right: 16px;"></i><span id='cart-items' class="badge badge-info" style="position: relative; top: 18px; right: 17px;">%%GLOBAL_CartItems%%</span></span>
</li>
<script type='text/javascript'>
var $cart_items = $('#cart-items');
$cart_items.text($cart_items.text().replace(/[^0-9]/g, ''));
</script>
Badge CSS:
.badge {
padding: 1px 9px 2px;
font-size: 10.998px;
font-weight: bold;
line-height: 14px;
color: #ffffff;
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #999999;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
Add the folowwing CSS to your styleshtee file or add it inline
.cart-items {
display:block;
min-width:25px;
}
I suspect that the html(or its css at least) of the badge icon is responsible for its disappearance, as in it is not correctly put together.Post a code sample, and we will try to fix it. As for the number not being updated until refresh, my first question would be do you capture the event when a buyer puts something in the cart? That would be the time to update the number, say like:
$("#cart").on('update', undefined, cart.NumberOfItems, updateBadgeIcon);
function updateBadgeIcon(event)
{
var newNumber = event.Data;
$('#badgeNumber').html(newNumber);
};
Take a look at jQuery documentation, and jQuery on method.
Figured out the answer to my own issue:
turns out I was missing some CSS for the badge:
.badge:empty {
display: none;
}
Guess I thought this would be in the bootstrap already...either I erroneously deleted it somehow or maybe it just needed to be added. Either way, problem solved.