html multiple fields differentiation on a form - html

i'm new to website development and i'm unsure of the technical word for this but i have a form with fields on it e.g.
User Info
Name
Surname
Address
User Modules
Module Name
Module Day
....
At present i have these fields in a form showing one after another, there is no separation between them. Is there a function in html that i can use to make the form a bit more readable? e.g. (like a group separation?) i know i can just indent the title but would like to know the proper way to do this.
User Info
Name
Surname
Address
User Modules
Module Name
Module Day
....

Use a FIELDSET and a LEGEND.

Related

Input multiple objects of a class in a single HTML or Flask form

For the sake of simplicity, say I want to build a shopping list using Flask using a table in a format that looks like this:
Name
Cost
Amount
Sell-By
Apples
1
5
2022-07-18
Bananas
0.7
7
2022-07-20
I want the shopping list page to initially look like this, with a user able to add any number of items before submission
Name
Cost
Amount
Sell-By
(User input)
(User input)
(User input)
(User input)
When submitted each line should be able to be initiated as a SQLAlchemy object and saved into a database.
I've tried using FieldList and FormField from WTForms but can't quite get the hang of it (and don't really feel it's appropriate in this situation anyway). I don't usually struggle with forms, but having multiple instances of the same form AND trying to put that in a dynamically generated table is really tripping me up, so any pointers are welcome.
The content/size of a shopping list should be adjustable during writing.
Therefore i suggest you take a look at JavaScript and add a simple Button that generates a new row´each time you click it. Each row then contains the needed String or Number fields.
If you send the form you can simply move the entries to your Database

Way to access individual fields of pages to display on a different page - Umbraco

I have a question about how to access fields from pre-existing pages and display them in a different page.
For example I have a document type called: "People" and I create a page for several people so that the structure of my content section looks like this:
Home
page1
page2
page3
People
person1
person2
person3
The document type "People" uses contains the fields:
Name, Age, Job, Description all as textboxes.
What would you suggest is the best way of accessing the values in these fields for each page so that you loop through each person under the parent "People" and display their name/age/desc?
Using:
#{
var selection = Umbraco.TypedContent(1108).Children()
.Where(x => x.IsVisible());
}
#foreach(var item in selection){
}
I can only access the metadata for each page such as #item.Id but I cant work out how to access the fields so say #item.Name returns the persons name.
Any help will be really appreciated! Cheers.
What you get from the query above is instances of your content as IPublishedContent. This is a pretty generic interface for any type of published content, so you will not be able to directly access the specific custom properties you have defined on your document types, as normal C# properties on this object.
However - if you have ModelsBuilder enabled in your site, you should be able to do the following and get the children returned as mapped POCO classes:
var selection = Umbraco.TypedContent(1108).Children<Person>()
(or <People> .. depending on what the actual document type alias of the child items is called)
If you are not using ModelsBuilder, you would have the option of just doing this inside your foreach loop to get the values of your properties instead:
var age = item.GetPropertyValue<string>("age");
Bonus note: please rename your Name property to something else (fullname or something like that). Using Name will clash with the built-in property used for the node name :)

"Create or update" form behavior when hitting back button

I have the following workflow on a website:
Some user John Doe declares a company through form 1
(fields: name, head office location)
After John Doe submits (HTTP POST) form 1, he is redirected (HTTP 302) to company form 2 with additional legal information about the company.
The problem is, if John Doe hits the back button of his browser during step 2, he will land on the form 1, with data filled by the browser (using values he already submitted — that's what Firefox and major browsers seem to do).
John Doe might then think he can use this form to update some information (e.g. fix a typo in the name of the company) whereas he will actually create a new company doing so, as we don't know on the server side whether he wants to declare a new company or update the one he just created.
Do you know any simple solution to handle that problem ?
Use javascript/jquery script after the page is loaded to empty all the inputs. This will prevent confusion of "updating the company".
jQuery would look something like this:
$('#elementID').val('');
You can also handle the situation by manipulating the browser history
on load of form 2, and pass the CompanyId generated on submit of form 1 using querystring. So that you can actually update the company as the user
Suppose John submits form1.html, a unique CompanyId "1001" is generated and redirected to form2.html. Now on load of form2 you can modify the browser history form1.html?companyid=1001 using
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 1", "form1.html?companyid=1001");
Now, when the user click back button and submits the form1 again. you can check for companyid in querystring and update the company.
I think it is more user-friendly when user can return back to previous form and update it (instead preventing the described behavior).
I use in most cases similar way to handle described problem:
Let's assume that user is on the page /some-page, that contains "Create new company" button.
When the user opens this page, will be executed special method createOrFindCompanyDraft() on the server-side. This method creates new company "draft" record in DB (only for the current user). For example, draft record has primary key id=473. When you execute this method again it will return the same record with the id=473 (with "draft" status). "Draft" record should't display on any other interfaces.
And "Create new company" has link /company/common/473.
When user go to /company/common/473, you display form 1, that will be filled from "draft" record. At first time user will see empty form.
Technically user will update the existing record, but you can display "Create new company" title on the page.
Then user go to form 2, for example, /company/legal-info/473, you create similar draft record for the this form (similar to step 1).
When user submit the form 2, you will remove "draft" status from the record id=473 (and any related records).
Next time when user open page /some-page, will be created new draft record for the current user.
Browser history will contain:
/some-page
/company/common/473
/company/legal-info/473
/some-page2
I like this approach, because all form only update records. You can go to previous/next form many times (for example "Back"/"Forward" browser buttons). You can close browser, and open not completed forms tomorrow. This way doesn't require any additional manipulation with the browser history.
try this
<form autocomplete="off" ...></form>
And Another
Use temporary tables or session to store the Page 1 form data. If the page 2 form is submitted use the temporary data of page 1 which is stored in database or in session.
Use a Separate key (Hidden field ) in both page 1 and page 2.
Actually I thought of a trick to obtain that "create on first post, update after" behavior (just like the user thinks it should behave).
Let's say the step 1 form is at the URL /create_company/. Then I could have that page generate a random code XXX and redirect to /create_company/?token=XXX. When I create the company I save the information that it was created through page with token XXX (for instance, I save it in user's session as we don't need to keep that information forever) and when the form is submitted, if I know that a company was already generated using this token, I know the user used the same form instance and must have used the back button since the token would be different if he explicitly asked for another company.
What do you think ? (I initially thought there should be a simpler solution, as this seems a little bit over-engineered for such a simple issue)
This is more like a UX question.
I'd think that the solution lies within the information given to the user on that form, to help them understand what they're doing.
Set a title that says 'Create a company', for example, and set your submit button as 'Create Company' will help your user with that. Use a unique id when you create the company object, and pass the id back to the same URL in order to perform an update. You should then update your title and button that tells user that they are updating instead of creating.
In that sense I'd say it's better to use a more generic URL like /company and /company?id=12345.
You could also consider using Restful API protocol to help your server identifies the CRUD operation. http://www.restapitutorial.com/lessons/httpmethods.html
Without the "routing" part of django it is hard to help. I can just answer my experience from the express.js-router functionality:
you can specify a post on /company, which is for new users.
you can specify another route for post on /company/:companyid for a changing form
and as a response from the create-post you can redirect to the different location.

How to store hidden fields inside message in web application?

I have web app (laravel 5.3, mysql) where users can comment any entity in project (almost every page contains something like chat)
I want to add possibility to mention other users inside message via '#' symbol ("Hello, #John, see here", for example).
When this message is posted to chat user named John must get notification about new message (via email, if he is offline).
Every message is connected to some page (/object/45, for example), so when email is sent user will know the page where he was mentioned.
The question is how to store this inside database?
message field has type text
In this example row would contain this data "Hello, #John, see here" (without quotes).
Problem is that there can be many users with name "John" so I can not not do simple:
select email from users where username = 'John' -- email is used as login
Also username can be something like #John Malkovich, so I have to parse string to find out, if "John" or "John Malkovich" was mentioned.
What is unique - user id.
So how to store this inside database?
Possible solution:
Hello, [user=34], see here - field in database
Parse string before displaying to web browser and replace this string with
Hello, #John, see here
but, obviously, no one can paste literal text '[user=123]' inside message, because it would be interpreted as userid.
P.S. Inside one message many users can be mentioned.
Maybe you could create something like <span value="user34">John Malkovich</span> and parse the value?
Or <span data-user-id="user34">John Malkovich</span> is probably better semantically.
Have absolutely no experience in this kind of stuff though, so don't take me too seriously ;)

Admin - Add new post - hook to display some custom input fields

i have a custom post type
this post type needs some fields to be inserted into a custom MySQL table (wp_my_custom_table) where i store some relations IDs with other products and a number to sort them
i don't know how to put these input fields them after the textarea. I know how to insert them at "save_post" action hook.
these are not registered as "custom fields", are just a few input fields needed for each post type like this
The tag doesn't work, so i put the code that i have tried as image:
I have found, there is a hook "edit_form_after_editor".