Problema con función Jquery

[Alexis88]

Supongo que lo de los submenúes son grupos de elementos dentro del formulario, algo como:

Código HTML:

<form>
    <div>
        <!-- Elementos de la categoría 1 -->
    </div>
    <div>
        <!-- Elementos de la categoría 2 -->
    </div>
    <div>
        <!-- Elementos de la categoría 3 -->
    </div>
    <div>
        <!-- Elementos de la categoría N -->
    </div>
</form>
 

Ahora, bien. Si en cada grupo tienes un <input> oculto con el id "productMainCategoryId", al momento de tratar de obtener el valor del mismo, siempre va a tomar al que se encuentre en la categoría o submenú 1 ya que, cuando hay más de un elemento con el mismo id en el mismo documento, solo se considera al primero y no a los demás debido a que el id debe ser un valor único en el documento. Además, si en cada categoría o submenú tienes un botón de envío, al estar dentro del formulario que agrupa a las demás categorías o submenúes, se procesará todo lo que se encuentre allí.

Lo ideal sería que tengas un formulario por cada elemento o bien podrías validar el contenido del área de texto de la categoría o submenú en donde se encuentra el botón de envío pulsado mediante la delegación del evento click a los botones de envío (y ya no el evento de envío al formulario) y, luego de cancelar la acción, buscar dentro del elemento padre que representa esa categoría o submenú al área de texto y campo oculto que se encuentre allí. Teniendo esto, podrás realizar la validación solo en dicha categoría o submenú, aunque semánticamente no sea lo adecuado.

Código Javascript:

$("[name=submitCustomizedData]").on("click", function(event){
    event.preventDefault();
 
    var categoria = $(this).parent(), //El <div> que contiene al botón pulsado
        textarea = categoria.find(".product-message"),
        hidden = categoria.find("[type=hidden]"),
        mensaje = categoria.find("small");
 
    //El resto de instrucciones
});