1 Replies - 14059 Views - Last Post: 31 January 2008 - 03:48 PM

#1 Shatila  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 30-January 08

How to Collect Data From HTML Form Using Javascript?

Posted 30 January 2008 - 05:09 AM

Im new to javascript, and I was just wondering where the data from a form goes after hitting the submit button. How do I contain that data? In our web applications development class, we have made (using html) a calendar with historical events on each date, and now we are tasked to provide an option for the user to "add a historical event" to the page of a certain date. I know that I need to make a form for the user to fill up, but I dont know how to contain that data so that it may be added to the page of the designated date. And so that right after the user clicks the submit button, the page of that designated date will appear with the newly added information.

We were told that the only way to do this was to use javascript, but still I'm confused about the whole process. A little enlightenment would be greatly appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: How to Collect Data From HTML Form Using Javascript?

#2 jackbenimble4  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 26-January 08

Re: How to Collect Data From HTML Form Using Javascript?

Posted 31 January 2008 - 03:48 PM

Usually that data is passed to a server side script which would process it, maybe store it in a database or file and then display the new page. Then every time that event needs to be displayed, it's recalled from wherever it was stored.

Javascript is not a server side language though. Javascript runs on the machine of the client, or the person using your website. Through javascript you won't be able to save the data. You can however manipulate the current page to show the event. Any changes would be lost when the page is refreshed. It's also possible to access the data on another page that the form sends you to.

Traditionally, when you submit a form the data is sent through a whole new request to the server. It can be to the same file or a different one. This data is then accessible to the script on the server side. Sense you are not using a server side language, one way is to make the form request a 'GET' request. This will include the data encoded into the URL. Then, through javascript, it's possible to dissect the url in order to retrieve the sent information.

Honestly, this is likely out of your ability if you've never worked with javascript before. If you have any specific questions, I can help you out. In the meantime... here's some related pointers:
  • Adding an 'onclick' event listener onto the 'submit' input element will let you execute code before the new request is made. By having the event listener return false, it will prevent the default action (submitting the page) in some browsers. More complex solutions are needed for wider browser support.
  • After a 'GET' request is complete, you can access the information through the url in javascript. One way might be to use the document.URL or document.location.href properties. Regular expressions might be useful here too.
  • You can get an input field's current value by using the value property. For example, here is a valid javascript line that sets the value of the input textbox with the "id" property (... id="input_date" ...) of 'input_date' into the variable date: var date = document.getElementById("input_date").value;

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1