0

I have this code here and I cannot figure out what Im doing wrong.

http://jsfiddle.net/m9hT6/

I cannot make "remove" link working and more importantly when I send it with "post" to another page to process with php, I cannot capture data into variable from consecutive forms Im creating. 

<html>
  <head>
    <style media="screen" type="text/css">

      * { font-family:Arial; }
      h2 { padding:0 0 5px 5px; }
      h2 a { color: #224f99; }
      a { color:#999; text-decoration: none; }
      a:hover { color:#802727; }
      p { padding:0 0 5px 0; }

      input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
    </style>

    <title>test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript">

    </script>
  </head>
  <body>


    <script>
      $(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
          $('<label for="ticketCantidad"><input type="text" id="ticketCantidad" size="20" name="ticketCantidad' + i + '" value="" placeholder="Valor de Tickets" /></label> <a href="#" id="remScnt">Remove</a>').appendTo(scntDiv);
          i++;
          $('<label for="ticketValue"><input type="text" id="ticketValue" size="20" name="ticketValue' + i + '" value="" placeholder="Cantidad de Tickets" /></label> <a href="#" id="remScnt">Remove</a><p></p>').appendTo(scntDiv);
          i++;
          return false;
        });

        $('#remScnt').live('click', function() {
          if (i > 2) {
            $(this).parents('p').remove();
            i--;
          }
          return false;
        });
      });

    </script>
    <form action="testProces.php" method="POST" name="testForm">


      <h1>Ticket Restaurante</h1> 
      <h2><a href="#" id="addScnt">Otro formulario</a></h2>

      <div id="p_scents">
        <p>

        </p>
      </div>

      <h1>Cheque Gourmet</h1> 
      <input name="submit" type="submit">
    </form>

  </body>
</html>
buzzsawddog
  • 662
  • 11
  • 32
Iznogud
  • 73
  • 6

1 Answers1

0

As far as the remove link,

$('#remScnt').live('click', function() {
      if (i > 2) {
        $(this).parents('p').remove();
        i--;
      }

a couple of issues.

One, jquery has no function .parents() - elements only have one parent each, so its parent.

Next, you can only have one element of a given ID on a page. You've given several items an ID of 'remScnt'. Change it to a class.

Next, you don't need the 'p' in the parent() call. Try

    $(this).parent().remove();
JAL
  • 21,295
  • 1
  • 48
  • 66
  • Thank man, the "remove" thing worked like a charm but I still cannot capture data from the form into a variable on the next page. So far I manage to capture from the first "ticketValue" but not from any other consecutive. – Iznogud Nov 29 '13 at 15:56
  • That might be your code on that page or maybe not. It looks like you have unique names for each input. That should work. You can also out each into an input array like here: http://stackoverflow.com/questions/3314567/how-to-get-form-input-array-into-php-array (I could probably help more if you post the server side code, maybe as a new question since it's about php and not JavaScript like this one) – JAL Nov 29 '13 at 18:48