How to transform a div and an input text?

Navigation
-1

I would like to know how I could transform the divs of my dynamic form into input text value when it is clicked on submit.

My form 

<div class="container">

           <h1 class="restaurant-title">Peixaria</h1>


          <div id="menu-panel" class="col-sm-12 paddingselect">

                  <?php
                     categoriaas();
                  ?>

          </div>


          <div id="menu-panel-2">




          </div>



          <div id="caja-panel">
            <div class="well">

            <form method="post" action="relatorio.php" id="formRel">
                <!-- left -->
                <div id="theproducts" class="col-sm-5">
                </div>
                <!-- left -->
                <span>Mesa:</span>
            <input type="text" name="mesa"value="">
                <input type="text" id="theinputsum">

                <!-- right -->
                <div id="thetotal" class="col-sm-7">
                   <h1 id="total"></h1>

                   <button  class="btn btn-lg btn-success btn-block"><i  type="submit" class="fa fa-shopping-cart" aria-hidden="true"></i> Finalizar Pedido</button>
                </div>
                <!-- right -->
</form>

            </div>
          </div>



     </div>
     <!-- container -->

<script>
$('#formRel').submit(function(event){

        event.preventDefault();
        var formDados = new FormData($(this)[0]);
$.ajax({
  method: "POST",
  url: "relatorio.php",
  data: $("#formRel").serialize(),
  dataType : "html"
});
};
 </script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Restaurant -->
    <script src="js/

restaurant.js ">

My code in javascript that makes the form dynamic 

$('.restaurantcatbtn').on('click', function(){

    var attrcat = $(this).attr('data-categoria');
    var datacat = 'categoria='+attrcat;

    $.ajax({

       type: 'POST',
       url: 'includes/processfunction.php',
       data: datacat,
       beforeSend: function(){
            $('#menu-panel-2').append('<div class="cssload-thecube"><div class="cssload-cube cssload-c1"></div><div class="cssload-cube cssload-c2"></div><div class="cssload-cube cssload-c4"></div><div class="cssload-cube cssload-c3"></div></div>');
       },
       success: function(data){
           $('#menu-panel-2').html(data);

       },
       error: function(){

       }

    });

});


    function agregarcaja(producto){

           var addproducto = $('#theproductitem'+producto).attr('data-nombre');
           var dataprocutstock = $('#theproductitem'+producto).attr('data-stock');
           var dataprocutprecio = $('#theproductitem'+producto).attr('data-precio');
           var addproductodiv = $('#cajaitem'+producto);
           var theinputsum = $('#theinputsum');

           if ($(addproductodiv).length)
            {
                return;

            }else{

                if (theinputsum.val() == ''){

                   theinputsum.val(dataprocutprecio);
                   $('#total').text('Total a pagar: $'+dataprocutprecio);

                }else{

                   var lastthevalue = theinputsum.val();
                   var thenextvalue = parseFloat(lastthevalue) + parseFloat(dataprocutprecio);
                   theinputsum.val(thenextvalue);
                   $('#total').text('Total a pagar: $'+thenextvalue);

                }

                $('#theproducts').append('<span id="cajaitem'+producto+'" data-precio="'+dataprocutprecio+'" data-cantidad="1" class="btn btn-block btn-sm">'+addproducto+' [$'+dataprocutprecio+'] <p id="thepitemcantidad'+producto+'" class="pull-right cantidad-item-p">1</p> <button style="margin-left:4px;" onclick="cantidadProductoPlus('+producto+')" class="btn btn-xs btn-success pull-right"><i class="fa fa-plus-square" aria-hidden="true"></i></button> <button class="btn btn-xs btn-danger pull-right"><i class="fa fa-minus-square" onclick="cantidadProductoMinus('+producto+')" aria-hidden="true"></i></button> </span>'); 

           }  

    }


    function cantidadProductoMinus(producto){

          var cantidad = $('#cajaiteminput'+producto).val();
          var precio = $('#cajaitem'+producto).attr('data-precio');
          var cantidaditem = $('#cajaitem'+producto).attr('data-cantidad');
          var theinputsum = $('#theinputsum').val();
          var theinputsumelement = $('#theinputsum');


          if (cantidaditem == 1){

              var thedeleteitem = parseFloat(theinputsum) - parseFloat(precio);
              theinputsumelement.val(thedeleteitem);
              if (thedeleteitem == 0){
                 $('#total').text('');
              }else{
                 $('#total').text('Total a pagar: $'+thedeleteitem);
              }

              $('#cajaitem'+producto).remove();

          }else{

              var thefinalcantidad = parseInt(cantidaditem) - 1;
              var thedeleteitem = parseFloat(theinputsum) - parseFloat(precio);
              theinputsumelement.val(thedeleteitem);
              $('#thepitemcantidad'+producto).text(thefinalcantidad);
              $('#cajaitem'+producto).attr('data-cantidad', thefinalcantidad);
              var minusprice = parseFloat(theinputsum) - parseFloat(precio);
              $('#theinputsum').val(minusprice);
              $('#total').text('Total a pagar: $'+minusprice);



          }


    }


    function cantidadProductoPlus(producto){
            var cantidaditem = $('#cajaitem'+producto).attr('data-cantidad');
            var precio = $('#cajaitem'+producto).attr('data-precio');
            var theinputsum = $('#theinputsum').val();
            var sumprice = parseFloat(theinputsum) + parseFloat(precio);
            var thefinalcantidad = parseInt(cantidaditem) + 1;
            $('#thepitemcantidad'+producto).text(thefinalcantidad);
            $('#cajaitem'+producto).attr('data-cantidad', thefinalcantidad);
            $('#theinputsum').val(sumprice);
            $('#total').text('Total a pagar: $'+sumprice);
    }

    
asked by anonymous 06.02.2017 / 14:50

1 answer

1

Use the .replaceWith of jQuery.

An example: 

function converter() {
  var elementos = document.getElementsByClassName('convs');
  var val = "";
  var len = elementos.length;
  
  for(var i = 0; i < len; i++) {
    val = $("#"+elementos[i].id).text();
    $("#"+elementos[i].id).replaceWith("<input class='convs' value='"+val+"' id='input"+elementos[i].id+"'>");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="algumTexto" class="convs">Algum texto</div>
<div id="algumTexto2" class="convs">Outro texto</div>

<button onclick="converter()">Converter</button>

Taking advantage of your code would look like this: 

<script>
$('#formRel').submit(function(event){

event.preventDefault();

  var elementos = document.getElementsByClassName('btn-block');
  var val = "";
  var len = elementos.length;

  for(var i = 0; i < len; i++) {
    val = $("#"+elementos[i].id).text();
    $("#"+elementos[i].id).replaceWith("<input class='btn-block' value='"+val+"' id='input"+elementos[i].id+"'>");
  }

var formDados = new FormData("#formRel");
...
    
06.02.2017 / 14:59
Calculating a specific value in a dataframe? Swap HTML divs [closed]