In Progress

Create JavaScript to make form easier to edit

The client has an HTML form with two text fields: one to add and edit hours open and one to add and edit hours active. The format the hours are required to be in are a headache to manually edit. I've created several "dummy" selection fields to select days and hour ranges. I need a JavaScript program created to interact with the text fields and these dummy selection fields. My goal is to convert these text fields into hidden fields and interact with these hours using the dummy code only.

Attached is a basic html mockup of the form.

The JavaScript should perform the following functions:

1. Insert selected ranges into the appropriate text fields (either hours open or hours active) using the dummy selection fields. The format is "day:open-end" with several ranges separated by a semi-colon:

m:9-17;t:9-17;w:9-17;r:9-17;f:9-17;s:10-17;u:12-17

f:18-3;s:18-3;u:18-230

2. The script should also insert a "Human formatted" version into the displayopen or displayactive lists:

<ul id="displayopen">

<li>Monday 9:00 am - 5:00 pm <span>Remove</span></li>

<li>Tuesday 9:00 am - 5:00 pm <span>Remove</span></li>

<li>Wednesday 9:00 am - 5:00 pm <span>Remove</span></li>

<li>Thursday 9:00 am - 5:00 pm <span>Remove</span></li>

<li>Friday 9:00 am - 5:00 pm <span>Remove</span></li>

<li>Saturday 9:00 am - 5:00 pm <span>Remove</span></li>

<li>Sunday 9:00 am - 5:00 pm <span>Remove</span></li>

</ul>

3. If the "Remove" text is selected it should remove the corresponding list item and range in the text field.

4. Ensure that the entries in the text fields and lists are in the following order: Monday-Sunday, 6:00 am - Sunset

5. Amend existing text entries and list items if new entries overlap:

m:9-17 already exists, user tries to add m:15-18, existing entries are changed to m:9-17

u:18-230 already exists, user tries to add u:17-23, no changes made as those hours are fully inside existing range

6: Prevent invalid entries and provide an alert message:

m:17-13 => "Not a valid range"

7: Remove invalid syntax if field is already populated with incorrect code:

<input type="text" name="open" id="open" value="m-w:noon to 9:00 pm;f:18-3;f:18-3;s:18-3;u:18-0;u:0-230;Really active around the dance floor" />

becomes

<input type="text" name="open" id="open" value="f:18-3;s:18-3;u:18-230" />

8: Create corresponding list if text field is already populated:

<input type="text" name="open" id="open" value="f:18-3;s:18-3;u:18-230" />

<ul id="displayopen">

<li>Friday 6:00 pm - 3:00 am <span>Remove</span></li>

<li>Saturday 6:00 pm - 3:00 am <span>Remove</span></li>

<li>Sunday 6:00 pm - 2:30 am <span>Remove</span></li>

</ul>

This script should use best scripting practices (such as passing JSLint), be well structured to allow for easy modifications later if needed, be fast, efficient, cross browser compatible, and NOT use any JavaScript libraries. Some HTML can be modified/added/removed if needed, but work with me on it. This script will be inserted before the end body tag and near the end of the html to limit file requests to be as fast as possible.

We are tired of getting cookie cutter bids from people who post on projects, have not looked at the job requirements, and cannot do the job. Please provide a comment specific to this job in your bid.

attached

Skills: HTML, Javascript, Website Design

See more: w 9 form 2012, program to make website, message dance, javascript website projects, javascript edit code, html 5 syntax, html 5 form tag, design by human, cookie by design, 4 tries, w-9 from, OPEN SPAN , name to be changed, javascript to c++, javascript projects, javascript mockup, create and edit, cookie cutter, convert existing projects, javascript items, invalid tag, code convert javascript code, input hidden can post, post form hidden, javascript colon

About the Employer:
( 91 reviews ) Cairo, Egypt

Project ID: #2516726

Awarded to:

SonnyHudson

Good Day! A sample and more details are in pm. Thank you, Sonny.

$100 USD in 2 days
(18 Reviews)
4.8

8 freelancers are bidding on average $138 for this job

jqMike

JavaScript guru here. Would be glad to work on your project. Please contact me.

$250 USD in 2 days
(61 Reviews)
7.0
diggitalbrains

Please see PM. Regards, DiggitalBrains

$150 USD in 2 days
(32 Reviews)
4.9
alrazon

Is it "Remove" text selected or clicked? Thanks.

$200 USD in 3 days
(12 Reviews)
4.2
vishalkumarnjain

A beautiful and complex project. Ready to work on this.

$125 USD in 5 days
(3 Reviews)
2.4
ankp

Hello, I have experience in various front end design and web design. I'm very interested in your job post involving these skills. I recently worked in an IT company based in India. And I am a skilled designer c More

$100 USD in 1 day
(4 Reviews)
1.9
Sikas

I've read your requirements regarding the JS

$50 USD in 2 days
(0 Reviews)
0.0
xyme

Bid details are in PM, thanks.

$125 USD in 3 days
(0 Reviews)
0.0
arindamchowdhury

I have an experience of 2 years in solving date related problems in my project works in a leading Software Solutions Company. Please contact me in my email id with the project details.

$250 USD in 10 days
(0 Reviews)
0.0