简体   繁体   中英

Need Help Returning Data From HTML Form on New HTML Page using JavaScript

I'm having a bit of trouble with something I'm sure most of you will laugh at.

I have a form built into one HTML page (contact.html), and I need to have a second HTML page (submit.html) display the information entered into the form using JavaScript. Here is my form code from page 1:

<form name="contact" method="post" action="submit.html">
    <p>First Name: *</p><input type="text" name="first">
    <p>Last Name: *</p><input type="text" name="last">
    <p>Cell Phone Number:</p><input type="text" name="number">
    <p>E-mail Address: *</p><input type="text" name="address">
    <p>Comment: *</p>
    <p><textarea name="comments" cols="25" rows="5">
</textarea></p>
    <p><input type="submit" value="Submit"></p>
    </form>

Can someone please point me in the right direction? I'm literally brand new to JavaScript, so I don't understand much of any of it yet.

Thank you in advance, and please take it easy on me!

You can't get post parameters using javascript - post parameters are going through the headers in a hidden way and you have to set your second page to be some server side page (php,asp.net etc...) In php for example you can get post parameters using this:

$first_value = $_POST['first'];

If you still want to use only javascript you can change your method of the form to "get" ( method="get" ) and then the parameters will be in the URL - and then in the other page you can use a regexp to take the get params using this function:

function getQSParam(key,target){
    var value = '';
    if(!target){
        target = location.href;
    }

    var pattern = key + '=([^&]+)';
    var o_reg = new RegExp(pattern,'i');
    var matches = o_reg.exec(target);
    if(matches && matches[1]){
        value = matches[1];
    }

    return value;
}

So if the url will be like that: submit.html?first=karl&last=marx&... you can take those parameters using the function like that:

var first_value = getQSParam('first');
var last_value = getQSParam('last');

and so on...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM