Need a simple constructor in HTML + JQUERY
There is a task to create a condition builder on the front end. For example, there is a condition "if((action == true || action == true && val == 5) || (action == true && $val != 7) )" that needs to be replicated on the front end.
How it should be done.
Upon loading, a form appears that is divided into two blocks
1st block "Conditions"
1. Button to create a form
2. If this is the first element at its level, then it is empty; otherwise, a selector with && and || ("level_condition")
3. A selector that will choose a field from the available ones in the title and name array ("field_name")
[
{"name": "some_name", "title": "Some Name", "type": "select", "select_data": [{"name": 12, "value": 12}, {"name": 14, "value": 14}]},
{"name": "some_name_1", "title": "Some Name 1", "type": "boolean", "value": false},
{"name": "some_name_2", "title": "Some Name 2", "type": "integer", "value": 5},
{"name": "some_name_3", "title": "Some Name 3", "type": "string", "value": "string text"}
]
4. Selector with logical operations != == etc. ("operation")
5. Field for manually specifying a value or, if it is a boolean select, to specify values from the array in item 3. ("value")
6. Button to add a sublevel that has the same logic as the block above.
7. Delete button (if the parent is deleted, everything below it is also erased)
Thus, we will be able to replicate the logic with infinite nesting.
2nd block "Actions"
Selector with options "", "Error", "Action".
After selecting "Error", a text area appears for entering text
After selecting "Action", a selector appears as in item 3 with the possibility of adding new ones (here without a level) and a delete button.
Save button.
In the form, the nesting needs to be done correctly. It is expected that when submitting for saving, the response structure will be as follows. If two conditions are selected at the 1st level. In the 1st condition, select 1 sub-level, and so on.
conditions[0][level_condition] = ""
conditions[0][field_name]
conditions[0][operation]
conditions[0][value]
conditions[0][0][level_condition] = ""
conditions[0][0][field_name]
conditions[0][0][operation]
conditions[0][0][value]
conditions[0][1][level_condition] = "||"
conditions[0][1][field_name]
conditions[0][1][operation]
conditions[0][1][value]
conditions[1][level_condition]= "&&"
conditions[1][field_name]
conditions[1][operation]
conditions[1][value]
action_selector[error] = error text
action_selector[0][action][field_name]= the field that was selected
action_selector[0][action][value] = the value for the selected field
Image with an example of the overall concept, only there are extra buttons
Applications 1
-
729 10 0 Yuri, good afternoon.
An interesting task, I would gladly take it on.
This task can be solved without JQuery, but if necessary, I can use it.
-
680 7 0 Good day, I can complete your order. It is worth noting that such a task would be easier to do in SvelteJS, however, I can also do it in jQuery without any problems. Also, there are a few questions that I would like to discuss in private messages.
-
3698 111 3 5 Hello, Yuri!
I am ready to implement the task using jQuery. We can discuss the details in private messages.
Best regards, Yuri
-
3838 44 0 Good day, Yuriy!
I am ready to implement your project with a simple constructor in HTML + jQuery. Let's discuss the project in more detail.
Current freelance projects in the category HTML & CSS
Bls contact
500 USD
جميع الحقوق محفوظة. تومئ الى اسبانيا (BLS/VFS). لعدة أيام إشعار فوري كل نفس. التحقق العالمي (CAPTCHA)، وبرنامج السيلينيوم أو الكاتب المسرحي. AI & Machine Learning, HTML & CSS ∙ 5 hours 28 minutes back ∙ 5 proposals |
Landing page for a Shopify store based on a ready-made layoutA landing page needs to be developed for an online store on Shopify. The store is already operating on a purchased theme, so the task is to adapt the existing visual layout and structure to the capabilities of the current theme, without a complete development from scratch. The… Content Management Systems, HTML & CSS ∙ 8 hours 6 minutes back ∙ 21 proposals |
Add a block to the websiteFor the website: https://queenstabledance.com/ A content block needs to be created in two language versions - so that it can be edited in the admin panel. An example of the block is below. HTML & CSS ∙ 9 hours 44 minutes back ∙ 53 proposals |
Build a page on Elementor ProIt is necessary to build a page from scratch on a WordPress site using the Elementor plugin (Pro version). Desktop version + responsive version for tablet and mobile. We provide the design in Figma. The design document template is in the attachments (desktop version only).… HTML & CSS, Web Programming ∙ 12 hours 22 minutes back ∙ 53 proposals |
Updating plugins and themes for the WP site putevka.uz"A technical audit of the WordPress site needs to be conducted, checking the relevance, security, and compatibility of the installed plugins and theme. Based on the results, legal options for updating, replacing outdated solutions, or transitioning to officially available… HTML & CSS, PHP ∙ 17 hours 11 minutes back ∙ 33 proposals |