My database does not receive the radio button values

Question

My database does not receive the radio button values

Navigation

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

0

I have a form where I have three radios with the same name but different value, when I choose one the database only saves the value of the first radio that appears in the form without respecting the selection as I can solve this?

This is my form

    <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>

This is the Js that I work with

$(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);
        })
    } 
}

javascript html

asked by Eiren Leza Caballero 28.02.2018 в 20:48

source

2 answers

0

First: Change the unique Ids by classes. Then you have to go through all the elements with class s1 and add the values to an array and then move to the ajax request. Your backup must be prepared to wait for an 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>

I hope you serve

answered by 28.02.2018 в 21:09

Search in elasticsearch by number of aggregations How to add fragments in order within an activity with a button?

score 0 · Accepted Answer

I have the answer, it works without problem now:

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);
        })
    }
}