Send value of an input radio to php

Question

Send value of an input radio to php

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

Good afternoon, I have a form that will send me the user's data via email, and I have 3 input type="radio" that each informs me what the user wants, how do I send the values of it to php?

var frm = $("#form-carro");
    frm.submit(function (e) {
        $.ajax({
            type: "POST",
            url: "./form-carro.php",
            data: frm.serialize(),
            success: function () {
                $("#cform").append("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button><i class='fa fa-thumbs-o-up'></i><strong>Obrigado!</strong> Sua mensagem foi enviada!</div>")
            }
        }), e.preventDefault()
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><formid="form-carro">
  <label class="margem-direita" style="margin-right: 5%" for='seguro'>
    <input id='seguro-novo' type="radio" name="seguro" value="Seguro Novo">Seguro Novo</label>
  <label class="margem-direita" style="margin-right: 5%" for='seguro'>
    <input id='renovacao' type="radio" name="seguro" value="Renovação">Renovação</label>
  <label class="margem-direita" for='seguro'>
    <input id='sinistrado' type="radio" name="seguro" value="Sinistrado">Sinistrado</label>
</form>

php

asked by anonymous 18.11.2016 / 17:18

2 answers

2

To work with frm.serialize() of the form, try this:

<?php

if ($_POST) {
  echo $_POST['seguro'];
die();
}
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><script>$(function(){varfrm=$("#form_carro");
            frm.submit(function (e) {
                e.preventDefault();
                $.ajax({
                    type: "POST",
                    url: frm.attr('action'),
                    data: frm.serialize(),
                    success: function (data) {
                        /* o alert irá imprimir o
                           retorno do que foi 
                           enviado para o PHP */
                        alert(data);
                        $("#cform").append("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button><i class='fa fa-thumbs-o-up'></i><strong>Obrigado!</strong> Sua mensagem foi enviada!</div>")
                    },
                    error:function(error) {
                        console.log(error);
                    }
                });
            })
        });
    </script>
</head>
<body>

<div id="cform"></div>
<form id="form_carro" method="post" action="./form-carro.php">
    <label class="margem-direita" style="margin-right: 5%" for='seguro'>
        <input id='seguro-novo' type="radio" name="seguro" value="Seguro Novo">Seguro Novo</label>
    <label class="margem-direita" style="margin-right: 5%" for='seguro'>
        <input id='renovacao' type="radio" name="seguro" value="Renovação">Renovação</label>
    <label class="margem-direita" for='seguro'>
        <input id='sinistrado' type="radio" name="seguro" value="Sinistrado">Sinistrado</label>
    <input type="submit" value="Enviar">
</form>
</body>
</html>

18.11.2016 / 18:22

How to check if an element has a class, or has an "active" class Repository Synchronization - GIT

score 2 · Accepted Answer

It starts with some errors and faults in your html, the error is that it does not close the <label> tags and I assume you want to send the information with the% http POST method, which is defined in the <form> tag and the action that is the php script that will process server-side information.

<form id="form-carro" method="POST" action="script.php"> <!-- AJUSTAR AQUI O NOME DO FICHEIRO PHP -->
  <label class="margem-direita" style="margin-right: 5%" for='seguro-novo'>
    <input id='seguro-novo' type="radio" name="seguro" value="Seguro Novo">Seguro Novo</label>
  </label>
  <label class="margem-direita" style="margin-right: 5%" for='renovacao'>
    <input id='renovacao' type="radio" name="seguro" value="Renovação">Renovação</label>
  </label>
  <label class="margem-direita" for='sinistrado'>
    <input id='sinistrado' type="radio" name="seguro" value="Sinistrado">Sinistrado</label>
  </label>
  <input type="submit" value="enviar">
</form>

In script.php (this can have whatever name you want):

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    if(isset($_POST['seguro'])) {
        echo $_POST['seguro'];
    }
}

Note that if you want the data to be processed on the same page / file of the form simply do not set the action on <form> :

<form id="form-carro" method="POST">

And include the php that's up on the same page.

EDITION (I noticed the comments in the question you are asking with ajax):

I made a small but complete example, you can test it by putting it all in the same .php file (as it is) on the server, or you can put the php part in another file and set the correct url in the ajax request:

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    if(isset($_POST['seguro'])) {
        echo $_POST['seguro'];
    }
    die();
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><formid="form-carro" method="POST">
  <label class="margem-direita" style="margin-right: 5%" for='seguro-novo'>
    <input id='seguro-novo' type="radio" name="seguro" value="Seguro Novo">Seguro Novo</label>
  </label>
  <label class="margem-direita" style="margin-right: 5%" for='renovacao'>
    <input id='renovacao' type="radio" name="seguro" value="Renovação">Renovação</label>
  </label>
  <label class="margem-direita" for='sinistrado'>
    <input id='sinistrado' type="radio" name="seguro" value="Sinistrado">Sinistrado</label>
  </label>
  <input type="submit" value="enviar">
</form>
<script>
$('input[type="submit"]').on('click', function(e) {
    e.preventDefault();
    var seg = $('input[name="seguro"]:checked').val();
    $.ajax({
        url: '',
        type: 'POST',
        data: {seguro: seg},
        success: function (response) {
            // aqui coloca tudo o que quer que aconteça caso a requisição seja bem sucedida
            // trabalha os dados que vieram do servidor como quiser
            alert('escolheu: ' +response);
        },
        error: function(xhr, status, error){
            console.log("Fail: " + xhr.responseText);
        }
    });
    return false;
});
</script>