CODEWITHSUNDEEP
javascriptphpforms
Sango Dragon
Sango Dragon

Reputation: 5

HTML form refuses to _Post. Why not?

I'm new to PHP, and this fancy style of html writing.

I've tried out an innumerable amount of fixes and work arounds, but the form here just will not save to the _POST global array, and I have no idea why. I go from tutorial to tutorial, and they are doing it the same way.

(I've even tried blindly applying some of the answers from previous similar questions, like setting action="<?=$_SERVER['PHP_SELF'];?>". That didn't work. I mean... I have not tried forwarding the action to another page, because I kind of need it to do this exact form over and over again. But I have tried setting action = index.php. No change.)

And the fact that it's probably just that I've just misspelled something is driving me insane. I was really hoping someone could clue me into what I am doing wrong.

Below is the HTML that's been echo'd out. The script.js is a "validation script", that basically just writes to the id="error" div.

The pre Array() was generated by the code section below the html.

<!doctype html>
<html lang="en">
<head>
    <script defer src ="script.js"></script>
    <title>Form Widget</title>
</head>
<body>
    <pre>Array
(
)
</pre>
    <div id="error"></div>
<!--Render Form here--> 
    <form action="" method="POST" id="form">
            <div>
                <label>Name</label><br>
                <input type="text" id="name" value=""/>
            </div>
            <div>
                <label>Email</label><br>
                <input type="text" id="email" value=""/>
            </div>
<button type="submit">Submit</button>
        </form></body>
</html>

Right here is the relevant php code. Or at least I presume it's the relevant bit, because everything else seems to be coming out just fine... save for the fact that the form is not saving. Haha.

<?php
//  if($_POST != null){         
    echo '<pre>';
    print_r($_POST);
    echo '</pre>';
    //  echo $_POST['name']
    //}
?>

Here's the script, in case it is of any interest

const name = document.getElementById('name') 
const form = document.getElementById('form') 
const errorElement = document.getElementById('error')

//We've been given no validation rules, so I added mock ones.
form.addEventListener('submit', (e)=> {
    let messages = []
    
    if (name.value == '' || name.value == null){
        messages.push('Name is required.')
    }
    
    if(messages.length > 0) {
        e.preventDefault();
        errorElement.innerText = messages.join(', ')
    }
})

Upvotes: 0

Views: 91

Answers (1)

Tangentially Perpendicular
Tangentially Perpendicular

Reputation: 5358

Your <input> tags need to have a name attribute. E.g. <input type="text" name="email">. the name attribute is different from the id attribute. Unnamed inputs aren't submitted by the browser.

Your form becomes

<!--Render Form here--> 
    <form action="" method="POST" id="form">
            <div>
                <label>Name</label><br>
                <input type="text" id="name" name="name" value=""/>
            </div>
            <div>
                <label>Email</label><br>
                <input type="text" id="email" name="email" value=""/>
            </div>
<button type="submit">Submit</button>
        </form>

Upvotes: 2

Related Questions