Doubt about click on submit php jquery


I tried to learn a little more, a few months ago as a learning I developed a very basic shopping cart, all in PHP . Due to several limitations every time I change the screen I reload some sections that do not vary, such as headers and footers, which I think is not the way. Investigating JQuery I found the function load and POST , but they did not work as I imagined.

  • I am on a page called detalle.php , here I visualize 1 article that I preselected and I can see its characteristics before loading it to the cart. The form is as follows:
  • <div id="detalle_titulo">
      <h3><?php echo $nombre?></h3>
    <div id="detalle_foto">
      <img src="<?php echo $imagen?>" width="180px" height="180px">
    <div id="detalle_precio">
      <p><strong>Precio :</strong> $
        <?php echo $precio?>
    <div id="detalle_stock">
      <p><strong>Stock :</strong>
        <?php echo $stock?>
    <div id="detalle_desc">
      <p><strong>Descripción :</strong>
        <?php echo $desc?>
    <form action="carrito.php" method="post" name="compra">
      <input name="id_txt" type="hidden" value="<?php echo $id?>" />
      <input name="nombre" type="hidden" value="<?php echo $nombre?>" />
      <input name="precio" type="hidden" value="<?php echo $precio?>" />
      <input name="cantidad" type="hidden" value="1" />
      <input name="stock" type="hidden" value="<?php echo $stock?>" />
      <?php if ($stock>0) { ?>
      <div id="detalle_caja_botones">
        <input class="boton_detalle" name="cancelar" type="submit" value="Cancelar" />
        <input class="boton_detalle" id="bbb" name="Comprar" type="submit" value="Comprar" />
      <?php }else{ echo "Producto temporalmente agotado"; ?>
      <input class="boton_detalle" name="Cancelar" type="submit" value="Cancelar" />
      <?php } ?>

    When I click on the button that I put on a test id="bbb" , I call cart.php and pass it through POST strong> 5 values, which I then take in cart.php to add them and display a table with the updated order. In this way, I am reloading the entire web with all its sections which I would like to avoid, since I only need to show a table and everything else is as it is. To not lose the thread, refresh that I am in detalle.php and call carrito.php passing it 5 values by POST . I wanted to try loading cart.php as an external HTML; In the header of detalle.php I added the JQuery library and the following:

    < script type = "text/javascript" >
      $(document).ready(function() {
        $('#bbb').click(function(evento) {
    < /script>

    ================================================================================================= ====
    .productos is the div where I want to show the table, first it occurred to me that I was recharging cart.php , then I tried event.preventDefault (); but the problem is that it does not send the 5 values by POST .

    Any suggestions on how to achieve what I need? Thanks in advance !!!

    asked by look68 19.10.2016 в 03:00

    2 answers


    What you need is to send the information via post but through an ajax, which will be responsible for loading only the layer (div) that has the data of the cart, example:

    $(document).ready(function() {
        $('#bbb').click(function() {
            var action = $('#compra').attr('action'); 
            var datos = $('#compra').serialize();
                url: action,
                data: datos,
                beforeSend: function(){ 
                success: function(response){ 

    Remember your form use id="purchase"

    I hope you serve


    answered by 19.10.2016 в 04:12

    Are you hitting any database? If so, you should send a post to the url. Then get the info. With it load you would load dynamically but also referring to a file

    answered by 19.10.2016 в 07:00