Take ID value and place inside the Hidden field

Question

Colleagues.

I’m taking through Javascript the value of a result and putting inside an ID:

document.getElementById("ValorUnitarioTriplo").innerHTML = " USD "+triplo.toFixed(2)+"";
...............
<div id="ValorUnitarioTriplo">USD 0.00</div>

Cool. It works. But I would like that value to be within the value of an Hidden input. Is it possible to do this? This way I send it to the database using PHP and Mysql.

Answer 1

Just do it the same way, using the ID of an input you create, and using .value instead of .innerHTML:

function gravar(id, val){
    var valor = " USD " + val.toFixed(2);
    document.getElementById(id).innerHTML = valor;
    document.getElementById('input_' + id).value = valor;
}

And having the HTML

<div id="ValorUnitarioTriplo">USD 0.00</div>
<input type="hidden" name="vut" id="input_ValorUnitarioTriplo" />

You can use it on JS like this:

gravar('ValorUnitarioTriplo', 456.7879);

Don’t forget to attribute name at the input for the server to fetch the value.

Answer 2

Evident! People do it all the time:

HTML:

<input type="hidden" name="x" id="hidden-field">

Javascript

document.getElementById("hidden-field").value = "seu valor";

Javascript/jQuery

$("#hidden-field").val("seu valor");

Answer 3

It’s basically the way you’re already doing it.

Let’s say you already have the input, just look for the id and set the value. It would look like this:

<input type="hidden" name="txtValor" id="txtValor" value="">
--
document.getElementById("txtValor").value = "1";

document.getElementById("txtValor").value = "1";
alert('Valor do input:' + document.getElementById("txtValor").value);

<input type="hidden" name="txtValor" id="txtValor" value="">

Answer 4

I was with the same problem and I did according to the code below in the controller I made a method to return a list of the Json search

 public JsonResult BuscaNomePaciente(string text)
      {
       var list = PRep.Lista().Where(x => x.Nome.Contains(text)).Select(c => 
        new { ID = c.ID, Nome = c.Nome }); 
           return Json(list, JsonRequestBehavior.AllowGet);   
       }

In View Create this code snippet has been implemented below:

//Referência das bibliotecas Jquery, Jequery ui
<link href="~/Content/themes/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>



<div class="form-group">
    @Html.LabelFor(model => model.Id_Paciente, htmlAttributes: new { @class 
 = "control-label" })
    <input type="text" id="busca" class="form-control" placeholder="Busca 
Paciente" />
    <input type="text" id="hidden-Nome" name="Id_Paciente" />
</div>

<script>
   $("#busca").autocomplete({

          source: function (request, response) {
           var text = $("#busca").val();
              $.ajax({
                 type: "GET",
               url: "/Paciente/BuscaNomePaciente",
               dataType: "Json",
               data: { text: $("#busca").val() },
               success: function (data) {  

                response($.map(data, function (item) { 
                    return { label: item.Nome, value: item.ID }; // e 

returned two values Name, and my control ID })); }

           })

       },
       minLength: 2, // Busca a partir de 4 caractere digitado no campo
        delay: 100,
        select: function (event, ui) {

            alert("ID do Nome Selecionado :" + ui.item.value)

            $("#hidden-Nome").val(ui.item.value);  //  obtem o id da do Paciente 
selecionada e adicioná-lo no input #hidden-Nome   

    }
});

</script>