Display related drop-downs using javascript - javascript

I have 3 drop-down boxes containing values of age, sport and relationship and all elements of them are loaded when we open the webpage.
Age = [0-10, 10-20, 20-30, 30-40]
Sport = [Soccer, Tennis, Golf, Chess]
Relationship = [Son, Brother, Father, Friend]
Now, elements of all three are inter-related with a mapping. For example, someone in age 20-30 can be a son, brother OR a friend; and can play soccer, tennis OR chess.
I want these drop downs to be dynamic, i.e, on selecting any value of any drop-down, the related options are displayed in the other two drop-downs. Shouldn't be an ajax call I think, since the all the fields are already loaded on the client.
Can anyone please tell me how can this be done in HTML using javascript(or any other way)? Any help would be great. Thanks.

U need to push the java script in this code. Which format you use. I will send the answer in your question with code

Related

I need an element in a JavaScript form (in React) for selecting several items

I’m building a React app dedicated to adventures and countries
I need some ideas concerning the form element I have to use for achieving a multiple selection
I’m currently building the component where the user can create activities, I’m almost done with it but there’s one thing that I don’t know how to tackle
It’s very simple, the user should be able to create multiple activities at once, simply by indicating several countries where the activity type will be held
For instance, if I create the skiing activity, and I indicate 3 countries, then 3 activities should be created.
I’m using a Form (a controlled form), the question is, how could I let the user select several countries, while letting the user know what countries are currently selected
So far, the form has the following look:
The countries come from a database, there could be many of them, and I’m loading a bunch of them in a cache in memory (an array of objects)
I’ll appreciate your valuable hints
Thanks in advance
Rafael

Compare two int columns in SharePoint list

I´m doing a course catalog app for sharepoint. And i have a list called Courses.
in that list i have two columns called: seats and FreeSeats.
When you make a new course the boss decide how many can apply to the course.
So for ex: 5 seats.
When the Fifth person apply there most be a stop.
So i thought if i have the column FreeSeats, it can count up everytime someone apply. And when it is the same as the column Seats it will NOT be able to apply.
So i guess i need some sort of count that add 1 everytime someone apply to the FreeSeat column. And in a if loop check if the value of freeSeats are smaller than Seats, you can apply. If its bigger than Seats it will come a stop message.
Someone have any idea how a code like this looks like? I have never done this before.
Since your new to this I would advise you go through this MSDN tutorial.
It outlines how you would do some basic CRUD functionality in a SharePoint app.
You can then adapt it for your particular purpose. This is how I started out :) good luck. Ignore the fact it mentions Napa the app structure should be similar in VS
MSDN SharePoint CRUD in App
Cheers
Truez
You can actually set this up without any code by creating a list of Free Seats with Titles ranging from 1 to #. In your signup lists you would create a lookup column for each course that points to the corresponding list of free seats and select the "Enforce unique values" option. That way, when a user signs up for the course, they must select one of the free seat values you have created, and cannot sign up for a value selected previously. You can use a workflow to update a list elsewhere to give you your signup counts for tracking if you wish.
To do this programmatically you would need a workflow or event receiver that counted the total number of list items with a Free Seats value selected and then remove the contribute rights for the list that people are using to signup. There is no other way to stop people from adding a new item once your quota is satisfied.

Multiple Entries post under One ID

I'm currently stuck with how to implement something into a database. I need multiple values to be carried over to a general page. To explain more in depth, let me tell you what I have done, and where I'm stuck.
I'm creating a New General Page form. I have a special offer form box generator, which upon pressing a button creates a new form consisting of six fields. For each new page, you can generate an infinite amount of offers. The problem I'd face if I give each offer an ID which gets imported to the general page is that it might either take ID=1 for one page and ID=2 for another page, or ID=1 and ID=2 will both be one every new page generated. What I need to do is get, for example, 4 offers for one page sent to the database, and when the New Page is generated it'll have the four offers called. How would I go about creating a database for them?
Momentarily my table for it looks as such:
||idOffer||price||idDays||idPersonQuant||offerInfo
where ID Days and ID Person Quantity is unique to the individual offer.
I know I have to get all of the offers under one ID which will be unique to every page, but how do I get various amounts of offers under one ID?
For those who want to get a look at the script, here it is: JSFiddle
It works, but not on JS Fiddle.
If there is any confusion, I will post a JSFiddle with my code for the entire form and how it's going to post stuff.
Thanks in advance! Been stuck on this for ages :/
If you want multiple "offers" under one ID, you can create a new table called offerGroup (or similar). Entries in this table will correspond to one "page", so when a new page is created, there should also be an associated offerGroup. The table wouldn't need to be complicated at all, just a primary key:
||idGroup
In the "offer" table, you can then reference the id of the group that the offer belongs to.
||idOffer||price||idDays||idPersonQuant||offerInfo||**idGroup**
This solves your problem where you might have anywhere from one to infinity offers on one page. I hope I understood your question correctly.

How to prepopulate few fields in a form, in a survey

I have a share point survey. When we responding to the survey, as we know, it will open NewForm.aspx. this page contains a ListFormWebpart in which questions from survey list will be displayed.
Now, i need to add few labels before the questions and these label values should be prepopulated from query string. What i am trying to achieve from this is, i wll created a link
with some values in query string and send to specific users. different users might have different values in query string. Whenever they click on the link, it should open the survey with prepopulated label values along with questions in list.
I am not sure, how to do it. I have tried to add some html control to web part(using share point designer) and through JavaScript i have tried to set query string values. Then i tried to put asp controls and trued. it didn't work. I am trying since last 2 days. No progress. I am using SharePoint 2003, WSS2.0
Can anybody, please help me to implement this solution.
You may find it easier to create a webpart with a custom form that enters data into the survey list.
The survey lists are useful as they are quite flexible, but your solution will likely make it hard to change your list in future. That means that a webpart specific for this survey may be a valid design decision for you.
An issue with your current implementation is that passing values specific to different users through the query string does not give you any guarantee that enterprising users will not change those values.
This may not really be an issue depending on your situation, but a custom control will allow you to query the current user and make decisions that way.
I have written some Java Script for reading query string, parsing and assigning values to controls based on their ControlID. I have used Content Editor Web Part to add this JavaScript to the Existing Survey page. Then this script has done job of prepopulating the fields.

How to create an N:N relation editor in web page?

I have to create a small "who does what" web application for incoming letter routing:
there is a relatively long list (about 600 items) of employees;
there is a short list (about 5 items) of tasks;
when assigning a task to an employee, due date must be specified;
As a result, i need a list (sequence of items matters in this case, since the first employee in the list is considered the "main responsible person"):
John Smith - write a response letter - 20.01.2010
Frederica Minoso - review the incoming letter - 18.01.2010
Robert Geer - review the incoming letter - 18.01.2010
If we had, say, 10 employees, the design would be quite easy - a drop-down list of employees, a drop-down list of tasks, a date picker for due date, a "Add to list button"
Like this alt text http://naivist.net/tmp/layout.jpg
And of course, I would add a result list with "move up"/"move down" buttons besides it.
However, a drop-down list of 600 items is obviously too much; this means that some user searching by name, surname, department must take place.
I am skilled enough to technically create the application (JavaScript, jQuery and ajax requests being my friends), but the trouble is - how to design the interface of the web form so that the users would understand what exactly they are doing? How to lay out the items in form? What to show in the beginning, what to hide?
Maybe there are there some modern UI form patterns I could use here? For instance, maybe a text box where user can type in and auto-suggest with closest matches drops out?
Maybe some draggable/droppable pattern can be applied (for instance, after you have entered user's name, you drop it on an appropriate task)? How easily do users typically adopt to such non-standard interfaces?
To state a question - how do people typically solve this kind of data input problems? Have you seen good examples of this somewhere on the web? Tell me, because I can't think of any right now.
Sorry, there are many questions and many of them are discussable. Should I mark it as "community wiki"?
As soon as I saw the problem, I thought AutoComplete. Since you thought the same, it is probably the obvious solution to the problem. The "To" field of emails has the same issue - how to select that one person from 1,000s of contacts.
Yahoo has some good accessibility considerations to be sure that the AutoComplete field works in a manner that is obvious and consistent with typical behavior.
Since the task contains 5 items, drop downs are acceptable. The recommended upper limit for drop downs is 7 items, so you are within the limit. One suggestion would be to end the tasks with "by" or "on" so that the line reads like a sentence - John Doe writes a response letter on 22/01/2010. Also, including a little visual aid in the drop down could increase conprehension in some situations.
To begin with with, I'm not sure I agree with the non-standard interface part. I suppose it depends on who the users actually are, but I would definitely say that that kind of text box/auto search functionality is becoming very standard from airline booking forms to search engines.
About the selection method, I would go for the text box method, so that when a user types in text a search starts the results of which are displayed in a drop down. The search should of course search both surnames and first names with some kind of intelligent regex at least.
On top of that I would still add a selection field, maybe not a drop down but perhaps a list box that contains all the employees, possibly with options to order the names by surname or first. This would be for those who don't know the spelling of a persons name, or can't quite remember the name.
Otherwise the layout you have there seems to work for me. I wouldn't play around with dragging and dropping anything. This of course creates a nice feeling to it, but is way more unclear on what should be done to assign the tasks. If you find yourself writing instructions on how to use the thing then you've gone overboard.
The other thing that I thought of would be to have an appleish menu where you have an empty list at first and when you click on the list, the input fields appear. The problem with this is that since the UI doesn't have indication on what you should do to add stuff to the list, people are easily left baffled.

Categories