0
315
VistasBotón de opción HTML que guarda el valor del primer botón de opción en la base de datos
Soy nuevo en trabajar Javascript y ajax. Estoy creando un formulario básico y guardando los valores en la base de datos Mysql. Después de presionar el botón Enviar, solo el valor del primer botón de opción se guarda en la base de datos. ¿Puede alguien ayudarme? Aquí está mi código HTML:
<form> <div class="form-group"> <div class="form-group"> <label>Email:</label> <input type="email" class="from-control" name="Name"> </div> <label class="form-check-label">Gender</label> <div class="form-check-inline"> <input type="radio" class="form-check-input" name="Sex" id="Sex" value="Male" />Male <input type=radio class="form-check-input" name="Sex" id="Sex" value="Female" /> Female </div> <div class="form-group"> <button class="btn btn-primary" type="submit" id="btn_submit">Submit</button> <button class="btn btn-seconday" type="button" id="btn_cancel">Cancel</button> </div> </div> </form>Y mi código Javascript:
<script type="text/javascript"> $(document).ready(function () { $('#btn_save').on('click',function() { var Email = $('#Email').val(); var Sex = $('#Sex').val(); $.ajax({ type : "POST", url : "https://localhost/newCrud/test/save", dataType : "JSON", data: {Email:Email, Sex:Sex}, success : function (data) { $('[name = "Email"]').val(""); $('[name = "Sex"]').val(""); } }); return true; }); }); </script> La estructura de la base de datos 
Datos guardados del envío del formulario 
Amablemente, ayúdenme con mi problema, muchachos, investigué bastante y no pude encontrar una solución a mi problema. Gracias por sus sugerencias.
4 Respuestas
Responde la pregunta0
Parece un problema del modelo de datos.
Está recuperando el valor de su html donde el Nombre sea igual a "Sexo". Tiene dos entradas con el Nombre igual a "Sexo". Jquery elegirá la primera entrada con el nombre "Sexo" del DOM. Por lo tanto, siempre está actualizando el sexo a cualquiera que sea el valor de la primera entrada con el Nombre "sexo".
Ese es tu problema.
Podemos brindarle una solución adecuada si vemos cómo se ve su tabla para la instancia de base de datos en la que está insertando.
0
Los ID siempre deben ser únicos. Cuando haces var Sex = $('#Sex').val(); Solo obtendrá el primer resultado, ya que aparece primero en el DOM. Hay muchas formas diferentes, pero una opción fácil para obtener los valores sería...
Nota: en mi ejemplo, la mujer ya está marcada.
function getRadioValue(name) { var inputs = Array.from(document.getElementsByName(name)); checkedRadio = inputs.filter(x => x.checked); if (checkedRadio.length) { return checkedRadio[0].value } } console.log(getRadioValue("Sex")); <div class="form-check-inline"> <input type="radio" class="form-check-input" name="Sex" value="Male" />Male <input type=radio class="form-check-input" name="Sex" value="Female" checked /> Female </div>0
De forma predeterminada, se debe seleccionar un botón de opción.
0
El atributo id de HTML debe ser único. En ese caso, siempre obtendrá el primer valor del id correspondiente.
Manera más fácil de resolver su problema:
var Sex = $('input[name="Sex"]:checked').val();