How to transform a div and input text?

Asked

Viewed 1,120 times

-1

I wonder how I could turn my dynamic form’s Divs 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 javascript code 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);
    }

inserir a descrição da imagem aqui

php javascript jquery html div

  • Wouldn’t it be simpler to create these Divs as disabled inputs? Why would it be enough to change the value of the disabled attribute, it would be simpler and the code would be cleaner. To change the way you are asking it would be necessary to destroy your form with Jquery and rewrite it as you need it

  • @Rúbiofalcão how could I do that ? type the categories are the ones that come from the database . I just make select the orders and give Submit .

  • You can add the attribute contenteditable="true" in the desired div it can be edited. There you treat the property innerHTML and not the value. That’s how Angouts chat works =)

1 answer

1

Uses the .replaceWith 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>

<div id="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");
...

  • But in my case that the form is dynamic , only when I click on the product it creates the div where I could put that part of that code ? @Thiagosantos and thank you .

  • Assigns a default category to all Ivs you want to convert and do as per the updated code.

  • thank you. @Thiagosantos

  • If you solve for yourself mark as correct answer, but if any doubt arises you can let me know. A hug

  • i’ll have to take the <script> $('#formRel') part. Submit(Function(Event){ Event.preventDefault(); var formDados = new Formdata($(this)[0]); $. ajax({ method: "POST", url: "report.php", date: $("#formRel"). serialize(), dataType : "html" }); }; </script> of my code ?

  • didn’t work ? and I don’t know if you understood me. the form it comes from the database and when I click on the orders it create a div of each order as it shows the image and type when I click to finalize request , wanted the Divs turn into input text name""

  • Are the Divs inside the form? If yes, to reuse your code you enter below Event.preventDefault(); and above the var formDados = new Formdata($(this)[0]); (here you can replace $(this)[0] by "#formRel") the FOR code:

  • well my form looks like this <div id="theproducts" class="col-Sm-5"> </div> <!-- left --> <span>Table:</span> <input type="text" name="table"value=""> <input type="text" id="theinputsum"> <!-- right --> <div id="thetotal" class="col-Sm-7"> <H1 id="total"></H1> how dynamic it is every time I click on an item as shown in the image it click a div with the selected order .

  • Let’s go continue this discussion in chat.

Show 4 more comments

Browser other questions tagged php javascript jquery html div

You are not signed in. Login or sign up in order to post.