Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Thanked 0 Times in 0 Posts

    New guy needs help with HTML and JSON

    Hi all,

    I have what i think is a simple piece of code needed to help with an internal project. I need a simple webpage where employees can send delivery requests. We have a Detrack account and they supply an API key so we can code to what we require.

    After a page with several predetermined fields like Date, po, address etc. User inputs data, and then submits. The code i have so far is this :-

    <form action="https://app.detrack.com/api/v1/deliveries/create.json" method="post">
        <input type="text" name="key" value="APIKEY" />
        <textarea name="json">[
          "deliver_to":"John Smith",
          "instructions":"Call John upon arrival.",
                "desc":"Test Item #01",
                "desc":"Test Item #02",
        <input type="submit" value="Submit API Request" />
    I don't know how to get input from the user to appear in the "json" field to be submitted in a single click. This example is using predetermined data.

    I've googled converting HTML to JSON but it's a bit above me. If someone could give me an example of one input field and have it convert to JSON in the <textarea name="json">[] i think i'd be able to repeat for all fiends required and have something that worked.

    Thanks for reading. Hope you can help


  2. #2
    Regular Coder
    Join Date
    Jan 2013
    Sunnyvale, CA
    Thanked 10 Times in 10 Posts
    Hi Adam,

    A quick glimpse of your JSON stream reveals that it is syntactically correct. To paraphrase your problem, you need to create a data entry form that will enable JSON-illiterate users to effectively submit orders via a JSON stream.

    I consider this a fairly complex challenge for someone new to web development, and if you are up to the challenge then here's something to get you started:

    Create a data entry form with nested tables. The outer table will contain the user's contact info fields and additional order-related information including the order date, time, PO, etc. The inner table will contain rows representing items, each displaying data-input controls where the user may enter item information and quantity, and a "Delete" button in case a row needs to be deleted. A "New Item" button below the last item (preferable left-aligned) will dynamically append another empty row.

    A "Submit" button will NOT submit the form, so do not assign its "type" property the value "submit". Instead, assign its "type" property the value "button", and assign its "onclick" event the function name of your javascript function that will process form submission.

    The processing function should dynamically build your JSON stream, looping item rows for each object in your JSON's items objects array.

    Upon completing the stream, you might want to append it to a form dynamically and then submit that form (this speaks to the limitation on the length restrictions imposed on data submitted via querystring, which is avoided when submitted as a form). You might also want to offer users a confirmation screen with a 'Back' button to enable editing.

    Good luck
    Last edited by sbhmf; 08-24-2014 at 02:36 PM.

  3. #3
    New to the CF scene
    Join Date
    Aug 2014
    Thanked 0 Times in 0 Posts
    Hi sbhmf,

    Yeah, it's sounding more complex than i thought and definitely over my head How long would it take to write something like this up? Ane how many smiley faces do i need to give?



Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts