HTML5 form using Javascript

Question

I am trying to submit a form within a html5 page that send the data to another page in HTML5. However I do not want to use php, this needs to be able able to be demo'd just using an internet browser. Is this possible to do using Javascript?

An example of the form I am trying to submit is:

<form>
    <p>
        <label>What is the Name of your Business?</label>
    <p>
        <input type="text" class="resizedTextbox" name="BusinessName" value="">
        <br>
        <br>
    </p>
    <br>
    <p>
        <label>What type of Business are you starting?</label>
    <p>
        <input type="text" class="resizedTextbox" name="BusinessType" value="">
        <br>
        <br>
    </p>
    <br>

    <p>
        <label>What is the Main purpose of the Business?</label>
    <p>
        <input type="text" class="resizedTextbox" name="BusinessPurpose" value="">
        <br>
        <br>
    </p>
    <br>
    <button type="button" class="buttonClass" onclick="location.href='Step2.html'">
        Step 2 >>>
    </button>
</form>

Thanks in advance

You should learn how to use the label element properly. Without a for attribute or a form control inside it, a label is useless. — Quentin
– Quentin, Commented Mar 31, 2014 at 16:20
What is the point in this? If nothing happens to the data (it doesn't go to a server) then what are you trying to achieve? — user632287
– user632287, Commented Mar 31, 2014 at 16:24
Its for a demonstration at Uni, tutor wants us to display our work from a cd. There is no xammp or wamp on her machine, and I didnt want to buy server space. — user3396441
– user3396441, Commented Mar 31, 2014 at 16:29

Halcyon · Accepted Answer · 2014-03-31 16:17:36Z

3

Do a GET request and use JavaScript to fetch the query string on the landing page.

Use document.location.href to fetch the current URL (which has the query string).

answered Mar 31, 2014 at 16:17

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jeroen Over a year ago

You could also use local storage if you don't want to show it in the url.

Halcyon Over a year ago

You can but you have to be very careful how you do that. You don't want two instances to get mixed up.

aksu · Accepted Answer · 2014-03-31 16:21:21Z

0

Well you can parse the query string.

function queryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&amp;");
    for (var i=0;i&lt;vars.length;i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
      return pair[1];
    }
  }
  alert('Query Variable ' + variable + ' not found');
}

alert(queryVariable('BusinessName'));
alert(queryVariable('BusinessType'));
alert(queryVariable('BusinessPurpose'));

Remember to change your form method to GET.

Read more about query string parsing here.

answered Mar 31, 2014 at 16:21

aksu

5,2365 gold badges26 silver badges39 bronze badges

2 Comments

user3396441 Over a year ago

I am still struggling to follow, I am wanting to get 3 sets of values from 4 pages all together. So i will need 12 values submitted to a final page. If i want to get say 3 values from one form on one page and post them to another page, I understand I have to use the GET method in the form. But when I am receiving the data on the final page how do I call the values? Sorry, I am relatively new to html, if someone could perhaps show an example that would be very helpful. I appreciate all your responses so far

aksu Over a year ago

So you are looking for a way to get the input data? If so, then just type queryVariable('*input_field_name_here*') for ex. to variable. Example: If you want to get BusinessType named input value in another page, you can use this to get the data: var bType = queryVariable('BusinessType'). Variable bType holds now the value. Remember to include the queryVariable function!

L. Monty · Accepted Answer · 2014-03-31 16:19:45Z

0

Well at normal php would take the given parameters of the form and would use them in any way. You could simulate this via Javascript if you do a GET. So you would get a url that encodes the parameters. At the target page you could use those parameters and do some stuff via javascript by reading the url at pageload

$(document).ready(function(){
    var url = document.URL;
    //get the parameters and do some stuff
    ....
});

answered Mar 31, 2014 at 16:19

L. Monty

8829 silver badges18 bronze badges

Collectives™ on Stack Overflow

HTML5 form using Javascript

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related