Form Inside li and inside Loop

Question

Method Get Not Working iam not reciving any value when i hit the button that is inside li

<?php 
 for ($j = 0; $j < sizeof($subcat); $j++) {
   if($subcat[$j][3]==$cat[$i][0]){
   ?> 
   <li>
    <form name="form_producto_menu" action="" method="GET">
       <input class="btn-menu-prod" type="button"  value="<?php echo $subcat[$j][1];?>" onclick="test();">
       <input type="hidden" name="categoria" value="<?php echo $cat[$i][0]; ?>">
       <input type="hidden" name="subcategoria" value="<?php echo $subcat[$j][0]; ?>">
    </form>
  </li>
<?php 
    }
}
?>

Iam having trouble with form, if i put the form outside the loop it works fine but i need it inside the loop and inside the tag li becuase outside ill recive long repeating array,but if it is inside ill get just the button i hit

This is what i want and not working :

<?php 
require_once ('db/consultas.php'); 
$reg = new Consultas(); 
$cat=$reg->SelectCategoria();
$subcat=$reg->SelectSubCategoria();
if (isset($_GET['categoria'])) {
print_r($_GET); 
}
?>  
<!DOCTYPE html>
<html>
<head>
<title>Productos</title> 
<?php include 'head.php'; ?>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>

<?php include 'header.php' ?>
<div class="col-lg-2 col-sm-3 " style="padding:0; margin:0;">
    <div class="contenedor-menu" style="margin-top: 100px;">
        <a href="#" class="btn-menu">Menu <i class="fa fa-bars"></i></a>
        <ul class="menu-producto ">
            <li><a href="#"><i class="icono izquierda fa fa-home" aria-hidden="true"></i>Inicio</a></li> 
            <?php
            for ($i = 0; $i < sizeof($cat); $i++) {
                ?>
                <li><a href='#'><?php echo $cat[$i][1]; ?><i class='icono derecha fa fa-chevron-down' aria-hidden='true'></i></a>
                    <ul>
                        <?php 
                        for ($j = 0; $j < sizeof($subcat); $j++) {
                            if($subcat[$j][3]==$cat[$i][0]){
                                ?> 
                                <li> 
                                    <form name="form_producto_menu" action="" method="GET">
                                        <input class="btn-menu-prod" type="button"  value="<?php echo $subcat[$j][1];?>" onclick="test();">
                                        <input type="hidden" name="categoria" value="<?php echo $cat[$i][0]; ?>">
                                        <input type="hidden" name="subcategoria" value="<?php echo $subcat[$j][0]; ?>">
                                    </form>
                                </li> <?php 
                            }
                        }
                        ?>
                    </ul>   
                </li> 
                <?php
            }

            ?> 
        </ul> 
    </div>
</div> 
<div class="container-productos-main col-lg-10 col-sm-9">
    <div class="container-productos ">
        d
    </div>
</div> 
<?php include 'footer.php'; ?> 
</body>
</html>

This works but not what i need :

<?php 
require_once ('db/consultas.php'); 
$reg = new Consultas(); 
$cat=$reg->SelectCategoria();
$subcat=$reg->SelectSubCategoria();
if (isset($_GET['categoria'])) {
print_r($_GET); 
}
?>  
<!DOCTYPE html>
<html>
<head>
<title>Productos</title> 
<?php include 'head.php'; ?>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<form name="form_producto_menu" action="" method="GET">

<?php include 'header.php' ?>
<div class="col-lg-2 col-sm-3 " style="padding:0; margin:0;">
    <div class="contenedor-menu" style="margin-top: 100px;">
        <a href="#" class="btn-menu">Menu <i class="fa fa-bars"></i></a>
        <ul class="menu-producto ">
            <li><a href="#"><i class="icono izquierda fa fa-home" aria-hidden="true"></i>Inicio</a></li> 
            <?php
            for ($i = 0; $i < sizeof($cat); $i++) {
                ?>
                <li><a href='#'><?php echo $cat[$i][1]; ?><i class='icono derecha fa fa-chevron-down' aria-hidden='true'></i></a>
                    <ul>
                        <?php 
                        for ($j = 0; $j < sizeof($subcat); $j++) {
                            if($subcat[$j][3]==$cat[$i][0]){
                                ?> 
                                <li> 

                                        <input class="btn-menu-prod" type="button"  value="<?php echo $subcat[$j][1];?>" onclick="test();">
                                        <input type="hidden" name="categoria" value="<?php echo $cat[$i][0]; ?>">
                                        <input type="hidden" name="subcategoria" value="<?php echo $subcat[$j][0]; ?>">

                                </li> <?php 
                            }
                        }
                        ?>
                    </ul>   
                </li> 
                <?php
            }

            ?> 
        </ul> 
    </div>
</div>
</form> 
<div class="container-productos-main col-lg-10 col-sm-9">
    <div class="container-productos ">
        d
    </div>
</div> 
<?php include 'footer.php'; ?> 
</body>
</html>

and this is my JS:

function test()
{
var form = document.form_producto_menu;
alert('hola');
form.submit();
}

Edit: On both case i get the message from my JS, it is working fine but when form is inside the loop the submit doesnt work but i still getting the message of my JS. when i hit the button i get Empty Value of the method "GET"

You're saying what's not working, but you're not telling us how it's supposed to work. — DiddleDot, Oct 18 '16 at 16:54
Why the Javascript at all? Just use a `submit` button and you're done... — Andreas, Oct 18 '16 at 17:00
@Andreas well i did this way just to test because later ill put some code inside it — KhaldunT, Oct 18 '16 at 17:03
@DiddleDot Sorry, When i hit the button i should get value from the method GET but iam not reciving any of it :( but when the form is outside the loop it works, what i need is inside the loop — KhaldunT, Oct 18 '16 at 17:05
Have a look at this [link](http://stackoverflow.com/questions/11111670/is-it-ok-to-have-multiple-html-forms-with-the-same-name). When the form tag is inside the loop you're putting multiple forms with the same name on the page. So you have to either put them all in the same form tag or figure out how to specify which form you're submitting. — DiddleDot, Oct 18 '16 at 17:06

score -1 · Answer 1 · answered Oct 18 '16 at 17:23

Use event delegation instead of the inline click handler.
Remove the onclick attribute and instead add a "global" submit handler on the ul.menu-producto, preferable with .addEventListener() (The principles of unobtrusive JavaScript).

An example with a stripped version of your markup.
The script part has to be executed after the ul.menu-producto element is available in the DOM.

var wrapper = document.querySelector("ul.menu-producto");

wrapper.addEventListener("submit", function(evt) {
  evt.preventDefault(); // stop submission

  var form = evt.target,   // event.target === the form the user wanted to submit
      categorie = form.categoria.value;    // just an example
  
  console.log(categorie);

  //form.submit();
})

<ul class="menu-producto">
  <li>
    <form action="" method="GET">
      <input type="submit" value="Submit" />
      <input type="hidden" name="categoria" value="1">
    </form>
  </li>
  <li>
    <form action="" method="GET">
      <input type="submit" value="Submit" />
      <input type="hidden" name="categoria" value="2">
    </form>
  </li>
</ul>

Form Inside li and inside Loop

1 Answers1