Handling several input fields in html form with AJAX and PHP

Question

I have this form but I am getting the http_bad_response (400) when trying to test it. Can somebody throw some light on this?

I am new in this field and trying to improve still. Also, I would like to know if the radio inputs should be treated different when trying to catch them in the PHP script.

HTML form:

<form id="cform" action="mailer1.php" method="post">
    <div class="form-row">
        <div class="col">
            <input type="text" class="form-control" id="name" placeholder="Nombre" name="name">
        </div>
        <div class="col">
            <input type="text" class="form-control" id="phone" placeholder="Teléfono" name="phone">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="email" placeholder="Correo" name="email" required>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="dim" placeholder="Dirección de inmueble" name="dim">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="diudad" placeholder="Ciudad" name="ciudad">
        </div>
        <div class="col">
            <input type="text" class="form-control" id="poblacion" placeholder="Población" name="poblacion">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="viviendas" placeholder="N° Viviendas" name="viviendas">
        </div>
        <div class="col">
            <input type="text" class="form-control" id="garajes" placeholder="N° Garajes" name="garajes">
        </div>
        <div class="col">
           <input type="text" class="form-control" id="trasteros" placeholder="N° Trasteros" name="trasteros">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-4">
            <input type="text" class="form-control" id="viviendas" placeholder="Locales" name="locales">
        </div>
        <div class="col-4">
            <input type="text" class="form-control" id="garajes" placeholder="Ascensores" name="ascensores">
        </div>
        <label class="mr-1" for="ol">Portería:</label>
        <div class="col-1 custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="r1" name="por" value="customEx">
            <label class="custom-control-label" for="r1">Sí</label>
        </div>
        <div class="col-1 custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="r2" name="por" value="customEx">
            <label class="custom-control-label" for="r2">No</label>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <input type="text" class="form-control" id="asunto" placeholder="Asunto" name="asunto">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <textarea class="form-control" id="ozc" placeholder="Otras zonas comunes" name="ozc" rows="3"></textarea>
        </div>
        <div class="col">
            <textarea class="form-control" id="mensaje" placeholder="Su Mensaje:" name="mensaje" rows="3"></textarea>
        </div>
    </div>   
</div>

<!-- Modal footer -->
<div class="modal-footer">
    <button type="submit" class="btn btn-success">Enviar</button>
</div>
</form>

PHP:

// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get the form fields and remove whitespace.
    $name = strip_tags(trim($_POST["name"]));
    $name = str_replace(array("\r","\n"),array(" "," "),$name);
    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    $mensaje = trim($_POST["mensaje"]);
    $phone = trim($_POST["phone"]);
    $dim = trim($_POST["dim"]);
    $ciudad = trim($_POST["ciudad"]);
    $poblacion = trim($_POST["poblacion"]);
    $viviendas = trim($_POST["viviendas"]);
    $garajes = trim($_POST["garajes"]);
    $trasteros = trim($_POST["trasteros"]);
    $locales = trim($_POST["locales"]);
    $ascensores = trim($_POST["ascensores"]);
    $asunto = trim($_POST["asunto"]);
    $ozc = trim($_POST["ozc"]);

    // Check that data was sent to the mailer.
    if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Set a 400 (bad request) response code and exit.
        http_response_code(400);
        echo "Oops! There was a problem with your submission. Please complete the form and try again.";
        exit;
    }

    // Set the recipient email address.
    $recipient = "[email protected]";

    // Set the email subject.
    $subject = "New contact from $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Message:\n$message\n";

    // Build the email headers.
    $email_headers = "From: $name <$email>";

    // Send the email.
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        // Set a 200 (okay) response code.
        http_response_code(200);

        echo "Thank You! Your message has been sent.";              

    } else {
        // Set a 500 (internal server error) response code.
        http_response_code(500);
        echo "Oops! Something went wrong and we couldn't send your message.";
    }
}
else {
    // Not a POST request, set a 403 (forbidden) response code.
    http_response_code(403);
    echo "There was a problem with your submission, please try again.";
}

Don't Panic · Accepted Answer · 2020-04-29 01:36:34Z

1

Since you are returning your own http status codes, when you see 400 it could mean either a real 400, ie Apache saying there is a client data error, or it could be your own PHP code returning 400.

So, let's look at the 2nd case first. The PHP code would returns 400 in this case:

if (empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {

Scanning through the code, $message is not defined, and it will always be null. That means empty($message) will always be true, and that whole test will always be true. So, you'll always see a 400 response.

Notes:

The form HTML is invalid, there is an unbalanced <div>. You can use a validator to check, eg https://validator.w3.org/, or if you use an IDE they will help.
I don't think it is a good idea to return http error codes like this, for 2 reasons. Firstly, you can't tell if it is a real 400 error, or just something your code is doing, making debugging and maintenance harder. Secondly, this is not a 400 response according to the spec. The request succeeded, with a completely valid payload - it is just that your application rejects it. 400 should mean something technically wrong, at the network/data layer.

edited Apr 29, 2020 at 1:36

answered Apr 29, 2020 at 1:09

Don't Panic

14.1k5 gold badges35 silver badges55 bronze badges

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

1 Comment

Joe Smith Over a year ago

Hello. Thank you for your message. I realized that a hour ago before your response, but I still appreciate your answer. ¡Thanks a lot!

Collectives™ on Stack Overflow

Handling several input fields in html form with AJAX and PHP

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related