0

Tengo un formulario donde tengo tres radios con el mismo nombre pero diferente valor, cuando elijo uno la base de datos solo guarda el valor del primer radio que aparece en el formulario sin respetar la selección como puedo solucionar esto?

Este es mi formulario

    <div id="Tambor" class="tabcontent">
                        <div class="md-form form-sm">
                                <input type="text" id="idorden" class="form-control">
                                <label class="container">
                                    <input type="radio" id="s1" value="1" name="tambor">
                                    <span class="checkmark1"></span>
                                </label>
                                <label class="container">
                                    <input type="radio" id="s1" value="2" name="tambor">
                                    <span class="checkmark2"></span>
                                </label>
                                <label class="container">
                                    <input type="radio" id="s1" value="3" name="tambor">
                                    <span class="checkmark3"></span>
                                </label>
                        </div>              
                    </div>

<div class="text-center mt-2">
  <button class="btn btn-info" id="enviar">Enviar</button>
</div>

Este es el Js con el que trabajo

$(document).ready(function() {

   $("#enviar").click(function(){
     create();
   });
});

function read(Id) {
    $.ajax({
        method: "POST",
        url: "http://localhost:8080/api/API/dolly/",
        data: {
            param: 2,
            Id: Id
        }
    }).done(function(data) {
        $("#nel").empty();
        if (data.length > 0) {
            var html = "";

            $.each(data, function(i) {
                console.log(data[i]);

            })

        }
    })
}

function create() {

    if ($.trim($("#idorden").val()) && $.trim($("#s1").val())){

       var idorden = $.trim($("#idorden").val());
       var s1 = $.trim($("#s1").val());


        $.ajax({
            method: "POST",
            url: "http://localhost:8080/api/API/dolly/",
            data: {
                param: 1,
                idorden: idorden,
                s1: s1
            }

        }).done(function(data) {
          console.log('se mando');

            read(0);
        })
    } 
}
2
  • 1
    Veo que estas utilizando Ids repetidos. cuando los Ids deben ser unicos. Commented el 28 feb. 2018 a las 19:52
  • En mi base de datos esta el campo con ese nombre (s1) es por eso el ID y quiero que el valor 1,2 o 3 segun el radio se guarde en ese campo Commented el 28 feb. 2018 a las 19:57

2 respuestas 2

0

Primero : Cambia los Ids únicos por clases. Luego tienes que recorrer todos los elementos con la clase s1 y agregar los valores a un array y luego pasar a la petición ajax. Tu backed debe estar preparado para esperar un array.

$(document).ready(function() {

  $("#enviar").click(function() {
    create();
  });
});

function read(Id) {
  $.ajax({
    method: "POST",
    url: "http://localhost:8080/api/API/dolly/",
    data: {
      param: 2,
      Id: Id
    }
  }).done(function(data) {
    $("#nel").empty();
    if (data.length > 0) {
      var html = "";

      $.each(data, function(i) {
        console.log(data[i]);

      })

    }
  })
}

function create() {

  if ($.trim($("#idorden").val()) && $.trim($("#s1").val())) {

var idorden = $.trim($("#idorden").val());
var s1 = [];

$(".s1").each(function(){
  s1.push($(this).val());
});

    $.ajax({
      method: "POST",
      url: "http://localhost:8080/api/API/dolly/",
      data: {
        param: 1,
        idorden: idorden,
        s1: s1
      }

    }).done(function(data) {
      console.log('se mando');

      read(0);
    })
  }
}
   

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="Tambor" class="tabcontent">
      <div class="md-form form-sm">
        <input type="text" id="idorden" class="form-control">
        <label class="container">
           <input type="radio" class="s1" value="1" name="tambor">
            <span class="checkmark1"></span>
        </label>
        <label class="container">
           <input type="radio" class="s1" value="2" name="tambor">
           <span class="checkmark2"></span>
        </label>
        <label class="container">
          <input type="radio" class="s1" value="3" name="tambor">
          <span class="checkmark3"></span>
        </label>
      </div>
    </div>

    <div class="text-center mt-2">
      <button class="btn btn-info" id="enviar">Enviar</button>
    </div>

Espero te sirva

4
  • Acabo de correrlo con lo que me explicaste pero no logre conseguir nada, ahora ni siquiera se guarda nada Commented el 2 mar. 2018 a las 19:46
  • Muestra la parte donde recibes los valores del fornt-end. Commented el 2 mar. 2018 a las 19:48
  • function create() { if ($.trim($('input[name=tambor]:checked').val())){ var s1 = $.trim($("#s1").val()); $.ajax({ method: "POST", url: "localhost:8080/api/API/prueba", data: { param: 1, s1: s1 } }).done(function(data) { console.log('se mando'); read(0); }) } Commented el 2 mar. 2018 a las 20:35
  • Esa es tu funcion que envia hacia el backend yo me refiero al codigo que recibe estos datos Commented el 2 mar. 2018 a las 20:39
0

Tengo la respuesta, funciona sin problema ahora:

HTML

<!DOCTYPE html>
<html lang="en">
    <body>

    <div id="Tambor" class="tabcontent">
           <input type="radio" id="s1" value="1" name="tambor">
           <input type="radio" id="s1" value="2" name="tambor">
           <input type="radio" id="s1" value="3" name="tambor">
    </div>

    <div class="text-center mt-2">
      <button class="btn btn-info" id="enviar">Enviar</button>
    </div>

    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="js/prueba.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>

</html>

Javascript

$(document).ready(function() {

  $("#enviar").click(function() {
    create();
  });
});


function create() {

    if ($.trim($("#s1").val())){

      var s1 = $('input[name=tambor]:checked').val()

        $.ajax({
            method: "POST",
            url: "http://localhost:8080/api/API/prueba/",
            data: {
                param: 1,
                s1: s1
            }

        }).done(function(data) {
          console.log('se mando');

            read(0);
        })
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.