Send JavaScript Data to PHP Page

Question

So I am new to JS and I am trying to take in a small amount of user input on a JS form. This input will then go to a PHP page as parameters for a result return on the PHP page.

I have been looking at tutorials and examples and I believe my form is named and labeled correctly, but I cannot seem to pull the form data, let alone send it to another page. I have been searching for an hour now with still no luck. :(

For reference, my JS form is page1.html and my PHP form that needs the data is page2.php. (in the same filepath)

Below is my Form code, the script at the top is just my attempt at the getting the data.

If someone could show me how to send form data to a "page2.php" I would be be very thankful! All I need is the two text box inputs as well as the gender type.

<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults () {
    var minWeight = form.minWeight.value;
    var maxWeight = form.maxWeight.value;
    var genderType = form.genderType.value;
    alert ("Weight Range: " + minWeight + " - " + maxWeight + "\n for all " + 
            genderType + "s" );
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
Enter minimum weight:
<input type="text" name="minWeight" value="0">
<BR>
Enter maximum weight: 
<input type="text" name="maxWeight" value="999">
<BR>
Select gender
<input type="radio" name="genderType" value="male"/>
Male
<input type="radio" name="genderType" value="female"/>
Female
<BR>
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(myform)">
</FORM>
</BODY>
</HTML>

*If the code to send form data is a little tricky, please explain it so that I can understand what is occurring.

Thank you very much!

Wait, so you want to know how to send data via POST/GET to page2.php or via AJAX to page2.php? — Klemen Tusar
– Klemen Tusar, Commented May 20, 2014 at 13:38
developer.mozilla.org/en-US/docs/AJAX/Getting_Started developer.mozilla.org/en/docs/AJAX — Hawk
– Hawk, Commented May 20, 2014 at 13:38
@techouse I am to use Javascript for page1.html. This will send that data to page2.php — Austin
– Austin, Commented May 20, 2014 at 14:39

Niet the Dark Absol · Accepted Answer · 2014-05-20 13:40:14Z

6

The reason your JavaScript doesn't work is because you named your form myform but you're trying to access form.

That said, you shouldn't be using JavaScript for this. Just a simple form will do:

<form action="page2.php" method="post">
    <p><label>Enter minimum weight: <input type="number" name="minWeight" value="0" min="0" required /></label></p>
    <p><label>Enter maximum weight: <input type="number" name="maxWeight" value="999" min="0" required /></label></p>
    <p>Select gender:
        <label><input type="radio" name="genderType" value="male" required /> Male</label>
        <label><input type="radio" name="genderType" value="female" /> Female</label>
    </p>
    <p><input type="submit" value="Submit" /></p>
</form>

Your PHP script can then reference $_POST['minWeight'], $_POST['maxWeight'] and $_POST['genderType'].

answered May 20, 2014 at 13:40

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

4 Comments

Austin Over a year ago

Thank you! Normally I would do this (use PHP), however for my task to learn more JS so I was told to try and make my form JS-based and then use PHP for the data-sifting. I guess you could you say the "constraint" on my task is that the form HAS to be JS. Is this not possible with JS or just messier? Thank you again!

Niet the Dark Absol Over a year ago

It's very messy to do it with JS, not to mention you're shutting out people who have JS disabled. Re-creating built-in functionality with JS is a surprisingly common, yet completely stupid thing to do. First example that jumps to mind is people trying to replicate drop-down menus. Most cases suck. Select2 works pretty well.

Austin Over a year ago

Hmmmm okay, I shall go ask if I can do this in PHP and mention your reasoning (which I agree with). It could be solely for just learning more JS....but I shall ask. If I have to do it in JS could you help point me in the right way? Thank you!

Austin Over a year ago

I can use this approach. Thank you Niet!

Collectives™ on Stack Overflow

Send JavaScript Data to PHP Page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related