I have a FlaskWTForm that uses DecimalRangeFields. This is the code in Python:
class DummyForm(FlaskForm):
field1 = DecimalRangeField('field1', [validators.DataRequired(), validators.NumberRange(min=0, max=5)], default=0)
I'm trying to implement a button on the front end which changes the value of the DecimalRangeField. This is the basic html:
<p>{{ dummyform.field1.label }}: <span><output for="field1" id="field1">{{ dummyform.field1.data }}</span></output></p>
{{ dummyform.field1(step=0.1, oninput="outputUpdate(value, 'field1')") }}
<button onclick="autoFill(3.0)">3</button>
I'm trying to add the functionality in JS. here's the javascript:
function autoFill(option) {
document.getElementById("myForm").reset();
document.getElementById('field1').value = option;
}
Although this changes the value (in terms of the number displayed) that appears on the front end, it does not change the value on the slider itself. Also, when submitting the form, it does not use this updated value. All help is appreciated!
Here is what you have to do,
Assign an id to the flask form field from within jinja like this,
{{ dummyform.field1(step=0.1, oninput="outputUpdate(value, 'field1')", id="field1") }}
Afterwards, you can use javascript or jquery to get the flask form field from id and update its value.
$('#field1').val("The value you want to enter in the field")
Or
document.getElementById('field1').value = "The value you want to enter in the field";
Related
This is my form input field (without classes and such):
<input id="input_partnerID" type="value" name="partner_id" value=""/>
I want to set the input value to the contact id of the logged in user. I can get that value with this Qweb code:
<p id="value_parterID" t-esc="user_id.partner_id.id"/>
And to get that value in my input form I use this javascript. The method is called when the "accept terms and conditions" button is clicked.
function getID() {
document.getElementById("input_partnerID").value = document.getElementById("value_parterID").innerHTML;
}
This works but probably isn't the most efficient way to do this.
How can I use Qweb to fill in the input value in 1 or 2 lines preferably without javascript?
You can set the attribute value using t-att-value="".
So in my case I should use this input field:
<input type="value" name="partner_id" t-att-value="user_id.partner_id.id"/>
Which does the same as the given example with the <p> and javascript.
There is a html element:
<input type="text" id="someInput" name="someInput"></input>
It's value is set in JavaScript:
var tbIndx = 10;
document.getElementById("someInput").value = tbIndx;
Now,I want to construct a Django for-loop which would use the value of the html tag described above.Something like this:
{% for i in val %}//val is the innerHTML of the input box described above.
//code
{% endfor %}
Can we access a value like this in a Django template?Please suggest some methods for achieving this functionality.
Thanks
No you can't do this. Django for loop will run only for values passed from context in view.py. Better you submit the input value using Ajax. And return it to run in template from Ajax response.
I'm developing restaurant management system using MeteorJS. What I try to accomplish here is when I type in some number on "Quantity" column it multiples itself with the price in "Price" column, then displays total sales inside textbox in "Total" column. I'm aware that there're several solutions out there but I wonder if this can be done using Meteor template helpers.
Screenshot
Yes it can, Meteor template is reactive so you simply need to do something like:
<template name="costCalcualtor">
<input id="quantity">
<p id="price">$10</p>
<p>It'd be ${{totalCost}}.</p>
</template>
in your html, and in your JS, simply makes a Template.costCalcualtor event that fires every time user finish typing in the input of "quantity" id, parse the innerHTML as integer, multiply it by the price (another integer obtained by parsing innerHTML of the p of "price" id), Session.set('price',finalValue), then have totalCost as a Template.costCalcualtor helper function that returns a new value based on Session.get("price").
Update:
don't just return a variable in the keyup event, you should use Session.set("total", price*quantity); in the end, and the line var total = parseInt($('total').val(price * quantity)); doesn't really do anything.
then you need {{totalCost}} in the template. and define a helper to retrieve the value of the session variable "total": Session.get("total").
Here is a walk-through to demonstrate what I mean:
in your .js fileh:
if (Meteor.isClient) {
// counter starts at 0
Session.setDefault('counter', 0);
Template.salesAdd.helpers({
total: function(){
return Session.get("total")
}
});
Template.salesAdd.events({ 'keyup #meow': function() {
var quantity = parseInt($('#meow').val());
console.log(quantity);
Session.set("total", quantity); } })
}
in your .html file:
<head>
<title>meow</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> salesAdd}}
</body>
<template name="salesAdd">
<input id="meow">
<p> What you've typed: {{total}}</p>
</template>
run it & see the number changes as you type in <input>.
Meteor is very a powerful tool developed by great people, and what is nice about it is that it is easy-to-learn and it has good documentation, so I suggest you to go through the basic docs and if possible, the full api.
I have a form in Laravel using Knockout.js, the input data-bind gets the last data from mysql. Everything works fine but a simple textfield to write in some values for the data is not what I want and a multiselect is not working for me.
I've searched for something to add values to this textfield and I've found the TextExt plugin. Now I can add some values like on this site the Tags field and save them.
In TextExt JS I can set the tagged values on page startup with
tagsItems: {{ $title->language }},
title->language get the Data from mysql and shows it as tags, but now I have the tagged values on startup and the data-bind value with the same data only as text and I need to delete them first before I can edit it.
Is there a way to hide the value from the data-bind or clear it on startup? Here is the form code I'm using
<input type="text" id="language" class="text-core" data-bind="value: app.models.title.language, valueUpdate: 'keyup' " placeholder="Language">
**edit** this is the working form
{{ Form::label('language', trans('dash.language')) }}
{{ Form::text('language', Input::old('language'), array('class' => 'text-core')) }}
When I delete the data-bind value I can't update the data.
I found something to clear the textfield on focus, but I want the tagged values on start because the data-bind value is only shown as text.
Have you some ideas how to do this?
I am not a JavaScript person really, I write in ASP and use a SQL database in the backend. But our marketing director requested a change that will use JavaScript.
On our view cart page, we're currently displaying an input box with a modify button to allow customers to change the quantity of the listed item (in that row... there could be multiple products in their cart, each having their own quantity input).
<form method="post" action="updateitem.asp">
<input type="hidden" name="product_id" value="<%= PRODUCT_ID %>">
Quantity: <input type"text" name="quantity">
<input type="image" name="Submit" src="/graphics/modify.gif" align="middle" border="0" alt="Continue">
</form>
What I'd like to make work is something like this. Hrm, assuming I need to do my form/div name differently for each product? I can easily write the product_id into the id tags but then assuming I'd also need to loop through my function for each one. I've gotten this far in writing the replacement code:
Get Dataset from Database (items in cart) and loop through:
<form method="post" action="updateitem.asp" id="updateitems<%= PRODUCT_ID %>">
Quantity: <input type="text" name="qty<%= PRODUCT_ID %>" OnChange="Javascript:UpdateQty()")
<div id="showlink<%= PRODUCT_ID %>">
<br /><span class="BodyTiny">update</span>
</div>
</form>
END LOOP
So if the quantity changes, it displays the word "update" where they can click and it passes whatever quantity that is in the quantity field to the updateitem.asp (in a way I can then update it in the database in ASP/SQL). In the code above, if we could just insert the new # in the a href statement after quantity=, then I could fix it in the updateitems.asp page without a problem.
I'm not sure where to even begin honestly, I have this so far:
LOOP through dataset so each product has its own function
<script Language="JavaScript">
<!--
function UpdateQty(updateitems<%= PRODUCT_ID %>) {
Show div updateitems<%= PRODUCT_ID %>
Replace NEWQUANT within that div with the value in the input field qty<%= PRODUCT_ID %>
}
//-->
</script>
END LOOP
I'm having a few problems...
I am not sure how to write the function UpdateQty. It should A) display the stuff in div id=showlink, and B) add the # from the input named quantity quantity to the href so I can update it in the database on the next page
If they have JavaScript turned off, they should be able to enter a new quantity and just hit enter for it to submit the form. I believe this will work as its a form with 1 text input and 1 hidden one, so just hitting enter in the text input should submit it. But that should still work with whatever JavaScript is added to make the showlink div show if it changes.
Do I need to add a class to my CSS for showlink? If so, what do I need to put in it?
Any help would be greatly appreciated!
Mahalo!
so what you can do for updateQty is have one function that will be correct for all products in a list just by making a function that finds all the necessary elements by relative paths.
//in this function the context is the element, so the
//`this` variable can be used rather than a param
//for the product id
function updateQty() {
//show the update link
var parent = this.parentNode;
//assumes only the update text uses the class bodyTiny, and that there
//is only one element using it. obviously making this invariant true
//would be trivial by adding a different class name
var updateText = parent.getElementsByClassName("bodyTiny")[0];
updateText.style.display = 'block';
var updateLink = updateText.parentNode
, updateHref = updateLink.href;
//next we find the current quantity and replace it with the input
updateHref = updateHref.replace(/qty=(\d*)/, 'qty='+this.value);
//then we set the link element's attribute
updateLink.href = updateHref;
//now when you mouse over the link you should see the url has changed
}
You can also set your form to POST the equivalent data, and then I guess on the server side you will have your OnGetPage and OnPostback both delegate to the same method with the parameters either parsed out of the query string or out of the post data.
You can see it running on jsfiddle. Hopefully this helps!