Javascript without form? - javascript

I'm building shopping mall website using Yahoo solution. My products have multiple options which are dependent on previous options. The problem is that in Yahoo, I have to locate options in the order form to appear in checkout page. Nested form doesn't work, of course. Here is one sample page:
http://parseven.com/sample-1.html
Can anybody help me please?

Your question is not very clear, but if I understand you correctly what you need is instead of using document.formname.subcategory.options[0] use document.getElementsByName("subcategory")[0].options[0].
document.getElementsByName("subcategory") will return you an array of all element on the page with the name="subcategory", from there you select the first one [0]. After that you can access all of its options.
I would suggest giving your dropdown an id instead of the name. Then you can use document.getElementById("unique-dropdown-id") and that will return you a reference to the select element, instead of array.
Adding more information based on new comments:
In order to make your new example (http://parseven.com/java_ex.html) work without form, remove opening and closing form tags from the page all together. Search for "document.formname.subcategory" and replace it with "document.getElementsByName("subcategory")[0]" and everything will work exactly the same way is it works now.
Since you need to submit your information to Yahoo, you have to keep form tag around, but you can't nest one form tag inside the other. Just leave the Yahoo's form tag intact and remove you other form tag.

Related

How to pass Filters Params to Url and Preload the page with filters using Select Tag > In Webflow [Finsweet]

Scenario of the function:
I want to pre-load the filters on another page when submitting a form from another page.
So in this page >> {LINK1}
I created a parameter and pass the values to another page.
In the another page, which is this: {LINK2}
The URL parameter values will be pre-loaded on the select tags.
I look up in this finsweet article:
https://www.finsweet.com/cms-library/add-ons#add1
That It’s possible to use this.
But I’m using select fields and haven’t found any resources that matches the functionality that I want to achieve.
I tried the finsweet attributes Filter but it only works on 1 collection list. I have 4 Collection List that needed to be filter with only using two select tags [countries, cities].
Live links to re-create the scenario only:
Under (Tell me the Rules Form Section) // creating the url parameters and pass it to another page
https://ride-beam-v2.webflow.io/rider
// getting the url parameters and set it to the 2 select tags
https://ride-beam-v2.webflow.io/beam-safe-academy
So to finalize, I only want to pre-load the filters if the parameter URL exists in that page.
If anyone, knows jquery or how finsweet cms library works or how filter is loaded into the DOM Elements and can guide me to the issue. It would be a great help not only to me but also to other Webflow developers that’s having the same issue as mine.

Close all forms with a button in Django

I building a threaded comment system (Reddit-like) in Django 3.0
A comment can have as many replies as possible.
For each comment made, a Reply form is shown below it.
Now, if I don't hide the forms, the page looks very bad, cluttered with textareas.
I need the following:
A 'Reply' button, clicking which the reply form can be displayed/hidden.
Here's what I have tried:
Added a class .replyForm to the forms.
Added a class .hideBtn to the hide Buttons.
Used JQuery:
$(".hideBtn").click(function(){
$(".replyForm").toggle();
});
Now, this works fine, but clicking a reply button opens up all the forms at the same time.
This is expected as the class belonging to each form is the same.
Using Django's template tags I managed to make the id of each form and button unique.
Example: id = "replyForm{{comment.id}}" which renders as replyForm123 if comment.id = 123
But I am not able to use this in any productive way.
I can't access the id outside the for loop (which displays the comments).
I tried adding the JQuery script inside the loop, and created 2 variable, one for the id for the button, and other for the form's id.
But as the loop executes, the variables change accordingly, and finally they store the id's of the last comment only, rendering all the other toggle buttons useless.
I feel that I am complicating things way too much, I am very new to JS and JQuery, and I'am only using them because I couldn't find a pythonic/django-based way for doing this.
Is there a simpler, more elegant way for doing this? Any help is appreciated
Edit 1:
I have found a very simple solution using Bootstrap 4's collapse class, but still want to know the JQuery way of doing this.
Try this:
$(".replyForm").click(function(){
$(this).toggle();
});

local visible text search on current web page

I need to do a local search visible text on a single simple html page. Users can simply use Ctrl+F to do that, but I would like to add a search box on the page to do the search instead. I thought of a couple ways to do this:
1- By forcing the browser's Find tool when a button on the page is clicked.
2- By a javascript/Jquery plugin that do LOCAL search on the current page.
I searched for both solutions but was not able to find anything useful. Does anyone here have any suggestions?
You can give a common class name to the tags that contains the display text and perform a search based on that class name. I had attached a link for your reference. you can make use of that funtion and call that function from a button click.
Generic Search in HTML Page

Selecting more than one value without checkboxes

Currenty I am using checkboxes to select more than one value in a form. So when creating a new post I can select all the categories it falls into. But the cat list is getting longer and is becoming a bit unmanagable.
I like how wordpress adds tags to each post via ajax. Wordpress has a text input field with autocomplete, you just start typing and then if it's already there (in the db) then it'll show and get adding to a list dynamically. If it's not found in the list then it gets inserted on form submit.
How can I achieve this or similar so that I don't have to use x amount of checkboxes?
Check out this jQuery library. It works on multi selects instead of checkboxes, but the logic and result is exactly what you need.
http://harvesthq.github.io/chosen/
(not affiliated, I've just used it a few times)
One option would be to make use a library such as jquery-autocomplete
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
This makes use of AJAX based functionality and will give you the ability to tweak it based on values stored in a database table. You can make a simple check function that, in the case the value can not be found, the user will have the option to simply press add and insert it into said library.
The rest is jsut a matter of styling and design.

Gradually opening html form

A little web design dilemma: I have a form with a lot of options, mainly radio buttons but not only.
I want the form to open up gradually, meaning at the beginning only two radio buttons are visible, and after the user picks one, more options appear under the chosen radio button. If the user then switches the pick, the page updates and shows the options under the new pick.
This happens on several levels, say 4 or 5 levels, and at the end there is a submit button that submits only certain inputs according to the branches the user chose. Also some of the branches have identical components even though the initial choice was different.
These are the options I could think of:
Build the complete form in the html body and use jquery to hide and show them according to the choices of the user. This means I have to write sections that repeat themselves twice.
Write nothing in the body, and append new elements when the user makes certain choices. This means the JavaScript is more complicated, because I have to make sure nothing appends twice.
Write an HTML skeleton of the form, and use append to fill it. Then use jquery to show and hide elements. This has none of the disadvantages but seems a bit unaesthetic.
Which one should I pick? Any better ideas?
It really comes down to your knowledge of javascript. The cleanest way would be to append to form using javascript. This way you can avoid having duplicates in your form.
If you are not that familiar with javascript and don't know how to append the form, then I would use javascript to show/hide the different parts of the form.
I think using javascript to append would be the correct way, but I don't see anything really wrong with using javascript to just hide parts of the form.
Probably going to use http://wiki.jqueryui.com/w/page/12137997/Menu
or JStree (http://www.jstree.com/) which I found out about from here http://wiki.jqueryui.com/w/page/12138128/Tree

Categories