Menu to filter results in Flask - javascript

I'm rather new to programming and super new to Flask. I'm implementing an html page which has a few filters on the left and it shows the results on the right.
For example a filter might be "2 people room". Selecting it, it would show only 2 people rooms in the div on the right.
All my data is in a DB.
What's the best way to implement it?
I'm thinking of this way:
- Implement onclick JS function that, when clicking on 2people room filter, it would select a subset of the data (only the 2 people rooms) and then create html for all that data (in Jinja2).
Is here a better way to do so?
thanks

You could use a HTML checkbox.
You could then have some JavaScript that displays the results based on which checkboxes are checked or not.
EDIT
I have quickly made a form here, using pure HTML/JavaScript. What you could do is make a GET request to your flask server using the contents of array. Or just make a basic SQL query to your database: SELECT houses FROM table WHERE rooms=array. ( That's not a valid SQL query, you will have to pass in the numbers properly)
<!DOCTYPE html>
<html>
<body>
<p>Filter Menu</p>
<form action="/action_page.php">
<input type="checkbox" name="room" value="0">Studio<br>
<input type="checkbox" name="room" value="1">One bed<br>
<br>
<input type="button" onclick="myFunction()" value="update filter">
</form>
<script>
function myFunction() {
var form = document.forms[0];
var array = [];
var i;
for (i = 0; i < form.length; i++) {
if (form[i].checked) {
array.push(form[i].value);
}
}
console.log(array)
// Make an SQL query with array
}
</script>
</body>
</html>

Related

saving user input to array

I have an assignment for my course I am battling with. I have to save user input (from answers to 9 math problems) into an array when the "submit" button is clicked and then use the array to perform functions like checking how many answers are correct and showing hit rate. I have written the html with a table and form combination but not sure how to start with the javascript.
Thanks!
Give id to all text box like this
I have included one text box, You can include it how much ever u want
<input name="text" type="text" maxlength="512" id="answer1" />
<button onclick="myFunction()">Submit</button>
function myFunction(){
var array= [];
var value = document.getElementById('answer1').value
array.push(value);
for(int i=0; i< array.length; i++){
//perform your operations
}}

How rails do nested form in one form?

The scenario is that, I want to design a Post form which is used to record what fruit I eat in one meal, include picture, content, many kind of fruit.
The model relationship is that,
Post has_many fruits
Fruit belong_to post
I usee Jquery-ui to make autocomplete in order to help user type their fruit. After they type there fruit tag, it will create a tag under the input field.
Like this
However how to I create this in form? I thought about dynamic nested form, but I don't want there're a lots of form, I wish there would be only one input and do the same thing with dynamic nested form.
Here is the github, please let me know if I need to provide more information.
$(document).on('click','#add_fruit',function(e){
e.preventDefault();
addFruitTag();
});
function addFruitTag(){
var content = $('#content').val().trim();
var fruit = $('#fruit').val().trim();
if(content.length <1 || fruit.length < 1){
alert("Please fill content and fruit");
}else{
$('#fruit_tags').append(
$('<input>')
.attr('type','checkbox')
.attr('name','fruits[]')
.attr('value',$('#fruit').val())
.prop('checked','true')
)
.append(
$('<label>')
.text($('#fruit').val())
)
.append($('<br>'));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="GET">
Content : <input type="text" id="content" name="content"><br/>
Fruit : <input type="text" id="fruit">
<button id="add_fruit">Add Fruit</button><br/>
<div id="fruit_tags">
</div>
<input type="submit" value="Create Post">
</form>
Note: I don't have much idea about auto complete plugin, so I have created the function addFruitTag(), call it where you are calling your function of adding hash tags of fruits.
And when you will submit the form to the server, you can retrieve the added fruits by accessing the fruits[] variable , which will be an array containing the selected fruits tags.

How to pass an a value from a page to another using javascript

How do you pass a value or an array from one page to another in html using javascript. I'm not allowed to use local storage or sessions only pass the variable from page to page. I'm sending values from a radio button. I intend to store the results in array as i am keeping track of the users answer to display the result at the end. How do i send an array to quiz_5.html? I intend to keep passing the array instead of using a cookie or local storage as i am not permitted to.
Below is My code:
<div>
<form>
<input type="radio" name="radio" value="correct" class="firstRow"> NASA.Gov
<input type="radio" name="radio" value="incorrect" class="secondRow"> Data.Gov <br>
<input type="radio" name="radio" value="incorrect" class="firstRow"> Facebook
<input type="radio" name="radio" value="incorrect" class="secondRow"> XYZ.net <br>
<input type="button" value="Submit & Next Question" onclick="getAnswer4(this.form)" class="firstRow">
<input type="button" value="Cancel & Clear Selection" onclick="clearOptions(this.form)" class="secondRow">
</form>
</div>
Javascript code:
function getAnswer4(form) {
var a[];
var value;
var checked = form.querySelector("input[type=radio]:checked");
if(!checked) {
alert('Please select an answer');
return;
}
else{
value = checked.value;
}
a.push(value);
location.href = "quiz_5.html";
}
You should just have one HTML button for the entire form. First, let's fix that form tag:
<form name='form' id='form' method='get' action='quiz_5.php'>
Now let's add a submit button to the bottom of the form:
<input type='submit' name='sub' id='sub' value='Submit' />
On quiz_5.html
var pre = onload;
onload = function(){
if(pre)pre();
var resultObject = {};
var fs = location.search.replace('?', '').split('&');
for(var i=0,l=fs.length; i<l; i++){
var z = fs[i].split('=');
resultObject[decodeURIComponent(z[0])] = decodeURIComponent(z[1]);
}
/* resultObject now has values based on name attibute
for instance resultObject.radio will hold value of name='radio' where it's checked */
}
Sorry if my comments seemed harsh, but I am all about new coders learning the basics themselves without relying on having the answers provided. Just to show it can be done - I just created three HTML pages. Created a form in the first two - each with your questions (questions 1 and 2 in the first page and question 3 in the second page), and passed the form values to the next one, using nothing more than html.
Then using only JavaScript on the second and third pages, I grabbed the values out of the URL and did stuff with them. On page two, I re-used the values from page 1 (think how that might have been done and why it is useful) so that all three values are passed to page 3 which then used JavaScript only to grab the 3 values, display them on the page (as shown in the code section below) and calculate the total and the percentage of answers that are correct. Note that I answered the questions so that I got question 2 incorrect.
Note that I am not giving the code used, but will give you the URL of the pages so that you can see the outcome of the previous two pages and can then start to think how I achieved this.
numbers1.html
numbers2.html?one=correct&two=incorrect
numbers3.html?one=correct&two=incorrect&three=correct
Question 1: correct
Question 2:incorrect
Question 3:correct
2/3
0.67% correct
Not a traditional answer I know, but it is not ideal for learners simply ask for the answer to be provided, especially when in 10 minutes I was able to put together the three pages that achieved the outcome. If you do not try then you will not learn for yourself.

Converting text to lowercase/uppercase with a pending a radio button

I am writing a Javascript program that takes a users input text, then (pending a radio button check – lowerCase/UpperCase) converts the input text to either lowercase/upperCase and outputs the value back to the form.
Purely trying to learn on my own Javascript. I am moderately new (but savvy) to JS. Pretty solid on HTML, CSS, Java, but BRAND new with interacting with page elements.
I have dug around for two days to try and solve this. I have even checked out a few books at my local library. (Currently reading the text, Microsoft guide to CSS/HTML, and JS). What other books would you recommend in order to under JS more?
Here is the code below. Although I know one can use CSS in order to convert this and I have done this. I'm purely just wanting to figure out Javascript.
<!DOCTYPE html>
<html>
<head>
<title> Case Changer By: Elliot Granet</title>
<style>
function convert(){
var convertedText = document.test.input.value;
if(document.getElementById("lowerCase").checked = true){
var output = convertedText.toLowerCase();
}else {
output = convertedText.toUpperCase();
}
document.getElementById('outputText').value = output;
}
convert();
</head>
The rest -
<body>
<h3>Choose your Conversion method below:</h3>
<form action="getElementById">
<fieldset>
<input id="lowerCase" type="radio" name="case" value="lowerCase">Lower Case<br>
<input id ="upperCase" type="radio" name="case" value="upperCase">Upper Case<br><br>
</fieldset>
<fieldset>
<textarea id="inputText" name="input" form="inputText">Enter text here to be Converted...</textarea>
</fieldset><br>
<fieldset>
<textarea id ="outputText" name="output" form="outputText">Converted text will appear here...</textarea>
</fieldset>
<input type="button" value="Convert">
</form>
</body>
</html>
You need to make few changes to make this function work.
style is an invalid tag to put js code. You need to put it inside <script> tag
If you are writing this function inside header yo may come across error since before DOM is ready it will try to get value of textarea with id inputText.
document.getElementById(idName').value but not is right syntax to get the value of element using id
Attaching convert() with the button. So when you will click on button the function will execute.
5.document.getElementById("lowerCase").checked = true this is wrong.It mean that checkbox will get checked as = will assign the value . Instead you need to compare the value. So use == or ===
if you declare var output inside if loop it wont be available inside else. So you need to declare it outside the if-else loop
Hope this snippet will be useful
HTML
<input type="button" value="Convert" onclick="convert()">
JS
window.load =convert; // convert function will be called after window is ready
function convert(){
var output; //variable declaration outside if-else loop
var convertedText = document.getElementById('inputText').value; //document.getElementById
if(document.getElementById("lowerCase").checked == true){ // == comparision
output = convertedText.toLowerCase();
}
else {
output = convertedText.toUpperCase();
}
document.getElementById('outputText').value = output;
}
EXAMPLE

How can I create a dynamic form using jQuery

How can I create a dynamic form using jQuery. For example if I have to repeat a block of html for 3 times and show them one by one and also how can I fetch the value of this dynamic form value.
<div>
<div>Name: <input type="text" id="name"></div>
<div>Address: <input type="text" id="address"></div>
</div>
To insert that HTML into a form 3 times, you could simply perform it in a loop.
HTML:
<form id="myForm"></form>
jQuery:
$(function() {
var $form = $('#myForm'); // Grab a reference to the form
// Append your HTML, updating the ID attributes to keep HTML valid
for(var i = 1; i <= 3; i++) {
$form.append('<div><div>Name: <input type="text" id="name' + i + '"></div><div>Address: <input type="text" id="address' + i + '"></div></div>')
}
});
As far as fetching values, how you go about it would depend on your intent. jQuery can serialize the entire form, or you can select individual input values.
.append() - http://api.jquery.com/append/
This is a pretty broad question and feels a lot like 'do my work' as opposed to 'help me solve this problem.' That being said, a generic question begets an generic answer.
You can add new address rows by using the append() method and bind that to either the current row's blur - although that seems messy, or a set of +/- buttons that allow you to add and remove rows from your form. If you're processing the form with PHP on the server side, you can name the fields like this:
<input type='text' name='address[]' />
and php will create an array in $_POST['address'] containing all the values.

Categories

Resources