CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Austin
Austin

Reputation: 3080

Send JavaScript Data to PHP Page

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!

Upvotes: 0

Views: 101

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324820

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'].

Upvotes: 6

Related Questions