Event click and submit forms

Question

The situation is this. There is a certain amount of input in the form, as well as in the form there are elements (pictures, etc.) on which click events hang. Being in input we press enter and for some reason it is caused click on a third-party element of the form. What could be the reason?

It works by clicking on the element .cart_item_delete The js code below is the only one in the entire js file that is associated with the .cart_item_delete class

 $(document).on('click', '.cart_item_delete', function() { if ($(this).find('.wrapper_answer').hasClass('show_answer')) { $(this).find('.wrapper_answer').removeClass('show_answer'); } else { $(this).find('.wrapper_answer').addClass('show_answer'); } return false; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form c lass="cart_form" method="post"> <div class="item_line_nomargin"></div> <div class="cart_left_wrap"> <div class="cart_border"> <div class="cart_item_photo"> <a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v"> <img alt="LED Телевизор LG 43UF670V" src=""> </a> </div> <div class="cart_item_text"> <div class="cart_item_name"><a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v">LED Телевизор LG 43UF670V</a> </div> <div class="item_avb availability_yes">В наличии</div> <div class="cart_item_quantity_wrap clearfix"> <a href="cart/view?id=425913" onclick="return cart.view(425913,'/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v')" class="view-product">Посмотреть товар</a> <div class="cart_item_quantity"> <a href="/cart?pc[0-388599]=1" class="quantity-cart-minus" onclick="return cart.quantity('0-388599',-1)"><span class="quantity-cart-minus"></span></a> <input type="text" name="pc[0-388599]" value="2" class="quantity" onclick="this.select()"> <a href="/cart?pc[0-388599]=3" class="quantity-cart-plus" onclick="return cart.quantity('0-388599',1)"><span class="quantity-cart-plus"></span></a> </div> </div> </div> <div class="cart_item_price_wrap"> <a href="?del[0-388599]=1" class="cart_item_delete"> <div class="wrapper_answer"> <div class="answer"> <p class="answer_text"><span>Вы уверены, что хотите удалить товар<br> из корзины?</span> </p> <div class="answer_buttons"> <button class="del_from_cart answer_button_left" value="no">Нет</button> <button class="del_from_cart answer_button_right" value="yes" onclick="return cart._delete('0-388599')">Да</button> </div> </div> </div> </a> <div class="product-code">Код: id425913</div> <s style="visibility: hidden">&nbsp;</s> <strong> <span class="span_word">Цена:</span> <span class="span_price">34&nbsp;157<span class="tRub">руб</span></span> </strong> <br> <a href="javascript:void(0)" onclick="return cart.toggle('0-388599')" title="Выбрать данный тип оплаты"> Цена в кредит: от <span>1&nbsp;982<span class="tRub">руб</span>/мес</span></a> </div> <div class="clear"></div> </div> <!--cart_border--> <div id="promo-code"> <div> <label title="Введите промо-код"> <span>Введите промо-код</span> <input id="promo-code-value" maxlength="19" placeholder="Введите промо-код" type="text"> </label> <button id="promo-code-apply" role="button" type="submit">Применить</button> </div> <span id="promo-code-message"></span> </div> </div>lass="cart_form" method="post"> <div class="item_line_nomargin"></div> <div class="cart_left_wrap"> <div class="cart_border"> <div class="cart_item_photo"> <a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v"> <img alt="LED Телевизор LG 43UF670V" src=""> </a> </div> <div class="cart_item_text"> <div class="cart_item_name"><a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v">LED Телевизор LG 43UF670V</a> </div> <div class="item_avb availability_yes">В наличии</div> <div class="cart_item_quantity_wrap clearfix"> <a href="cart/view?id=425913" onclick="return cart.view(425913,'/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v')" class="view-product">Посмотреть товар</a> <div class="cart_item_quantity"> <a href="/cart?pc[0-388599]=1" class="quantity-cart-minus" onclick="return cart.quantity('0-388599',-1)"><span class="quantity-cart-minus"></span></a> <input type="text" name="pc[0-388599]" value="2" class="quantity" onclick="this.select()"> <a href="/cart?pc[0-388599]=3" class="quantity-cart-plus" onclick="return cart.quantity('0-388599',1)"><span class="quantity-cart-plus"></span></a> </div> </div> </div> <div class="cart_item_price_wrap"> <a href="?del[0-388599]=1" class="cart_item_delete"> <div class="wrapper_answer"> <div class="answer"> <p class="answer_text"><span>Вы уверены, что хотите удалить товар<br> из корзины?</span> </p> <div class="answer_buttons"> <button class="del_from_cart answer_button_left" value="no">Нет</button> <button class="del_from_cart answer_button_right" value="yes" onclick="return cart._delete('0-388599')">Да</button> </div> </div> </div> </a> <div class="product-code">Код: id425913</div> <s style="visibility: hidden">&nbsp;</s> <strong> <span class="span_word">Цена:</span> <span class="span_price">34&nbsp;157<span class="tRub">руб</span></span> </strong> <br> <a href="javascript:void(0)" onclick="return cart.toggle('0-388599')" title="Выбрать данный тип оплаты"> Цена в кредит: от <span>1&nbsp;982<span class="tRub">руб</span>/мес</span></a> </div> <div class="clear"></div> </div> <!--cart_border--> <div id="promo-code"> <div> <label title="Введите промо-код"> <span>Введите промо-код</span> <input id="promo-code-value" maxlength="19" placeholder="Введите промо-код" type="text"> </label> <button id="promo-code-apply" role="button" type="button">Применить</button> </div> <span id="promo-code-message"></span> </div> </div> </form>

Jsfiddle example

It is necessary to assign with the help of a script, so that when it "entered" into input, no click was made
just the click is not made on the type submit, click on the icon of the tooltip in my form
Download the form on jsfiddle.net and download the link here

Alex Alex 6,232 five nineteen 29 · Accepted Answer · 2016-12-14T08:18:52

You do not specify the type of buttons, i.e. do:

 <button class="del_from_cart answer_button_left" type="button" value="no">Нет</button> <button class="del_from_cart answer_button_right" type="button" value="yes" onclick="return cart._delete('0-388599')">Да</button>

 $(document).on('click', '.cart_item_delete', function() { console.log('test click'); //для теста if ($(this).find('.wrapper_answer').hasClass('show_answer')) { $(this).find('.wrapper_answer').removeClass('show_answer'); } else { $(this).find('.wrapper_answer').addClass('show_answer'); } return false; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form c lass="cart_form" method="post"> <div class="item_line_nomargin"></div> <div class="cart_left_wrap"> <div class="cart_border"> <div class="cart_item_photo"> <a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v"> <img alt="LED Телевизор LG 43UF670V" src=""> </a> </div> <div class="cart_item_text"> <div class="cart_item_name"><a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v">LED Телевизор LG 43UF670V</a> </div> <div class="item_avb availability_yes">В наличии</div> <div class="cart_item_quantity_wrap clearfix"> <a href="cart/view?id=425913" onclick="return cart.view(425913,'/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v')" class="view-product">Посмотреть товар</a> <div class="cart_item_quantity"> <a href="/cart?pc[0-388599]=1" class="quantity-cart-minus" onclick="return cart.quantity('0-388599',-1)"><span class="quantity-cart-minus"></span></a> <input type="text" name="pc[0-388599]" value="2" class="quantity" onclick="this.select()"> <a href="/cart?pc[0-388599]=3" class="quantity-cart-plus" onclick="return cart.quantity('0-388599',1)"><span class="quantity-cart-plus"></span></a> </div> </div> </div> <div class="cart_item_price_wrap"> <a href="?del[0-388599]=1" class="cart_item_delete"> <div class="wrapper_answer"> <div class="answer"> <p class="answer_text"><span>Вы уверены, что хотите удалить товар<br> из корзины?</span> </p> <div class="answer_buttons"> <button class="del_from_cart answer_button_left" type="button" value="no">Нет</button> <button class="del_from_cart answer_button_right" type="button" value="yes" onclick="return cart._delete('0-388599')">Да</button> </div> </div> </div> </a> <div class="product-code">Код: id425913</div> <s style="visibility: hidden">&nbsp;</s> <strong> <span class="span_word">Цена:</span> <span class="span_price">34&nbsp;157<span class="tRub">руб</span></span> </strong> <br> <a href="javascript:void(0)" onclick="return cart.toggle('0-388599')" title="Выбрать данный тип оплаты"> Цена в кредит: от <span>1&nbsp;982<span class="tRub">руб</span>/мес</span></a> </div> <div class="clear"></div> </div> <!--cart_border--> <div id="promo-code"> <div> <label title="Введите промо-код"> <span>Введите промо-код</span> <input id="promo-code-value" maxlength="19" placeholder="Введите промо-код" type="text"> </label> <button id="promo-code-apply" role="button" type="submit">Применить</button> </div> <span id="promo-code-message"></span> </div> </div>lass="cart_form" method="post"> <div class="item_line_nomargin"></div> <div class="cart_left_wrap"> <div class="cart_border"> <div class="cart_item_photo"> <a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v"> <img alt="LED Телевизор LG 43UF670V" src=""> </a> </div> <div class="cart_item_text"> <div class="cart_item_name"><a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v">LED Телевизор LG 43UF670V</a> </div> <div class="item_avb availability_yes">В наличии</div> <div class="cart_item_quantity_wrap clearfix"> <a href="cart/view?id=425913" onclick="return cart.view(425913,'/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v')" class="view-product">Посмотреть товар</a> <div class="cart_item_quantity"> <a href="/cart?pc[0-388599]=1" class="quantity-cart-minus" onclick="return cart.quantity('0-388599',-1)"><span class="quantity-cart-minus"></span></a> <input type="text" name="pc[0-388599]" value="2" class="quantity" onclick="this.select()"> <a href="/cart?pc[0-388599]=3" class="quantity-cart-plus" onclick="return cart.quantity('0-388599',1)"><span class="quantity-cart-plus"></span></a> </div> </div> </div> <div class="cart_item_price_wrap"> <a href="?del[0-388599]=1" class="cart_item_delete"> <div class="wrapper_answer"> <div class="answer"> <p class="answer_text"><span>Вы уверены, что хотите удалить товар<br> из корзины?</span> </p> <div class="answer_buttons"> <button class="del_from_cart answer_button_left" value="no">Нет</button> <button class="del_from_cart answer_button_right" value="yes" onclick="return cart._delete('0-388599')">Да</button> </div> </div> </div> </a> <div class="product-code">Код: id425913</div> <s style="visibility: hidden">&nbsp;</s> <strong> <span class="span_word">Цена:</span> <span class="span_price">34&nbsp;157<span class="tRub">руб</span></span> </strong> <br> <a href="javascript:void(0)" onclick="return cart.toggle('0-388599')" title="Выбрать данный тип оплаты"> Цена в кредит: от <span>1&nbsp;982<span class="tRub">руб</span>/мес</span></a> </div> <div class="clear"></div> </div> <!--cart_border--> <div id="promo-code"> <div> <label title="Введите промо-код"> <span>Введите промо-код</span> <input id="promo-code-value" maxlength="19" placeholder="Введите промо-код" type="text"> </label> <button id="promo-code-apply" role="button" type="button">Применить</button> </div> <span id="promo-code-message"></span> </div> </div> </form>

When you press enter , when the input field is active, the form processes the event on the submit button and all its parents.
Therefore, you trigger an event on the link that is the parent for the button.

Yuri yuri 13.3k five 36 82 · Answer 2 · 2016-12-14T08:15:51

If you understand correctly, then that's how it is solved. A click event on another item is triggered by pressing a key. We write that when you click on enter on input , nothing happened, and when you release enter , the function is called

 $(function() { $('input[type="text"]').keydown(function(){ if(event.keyCode==13){ return false; }; }); $('input[type="text"]').keyup(function(){ if(event.keyCode==13){ alert($(this).attr('name')); /* Это чтобы показать, что работает :) */ return false; }; }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form c lass="cart_form" method="post"> <div class="item_line_nomargin"></div> <div class="cart_left_wrap"> <div class="cart_border"> <div class="cart_item_photo"><a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v"> <img alt="LED Телевизор LG 43UF670V" src=""></a></div> <div class="cart_item_text"> <div class="cart_item_name"><a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v">LED Телевизор LG 43UF670V</a></div> <div class="item_avb availability_yes">В наличии</div> <div class="cart_item_quantity_wrap clearfix"> <a href="cart/view?id=425913" onclick="return cart.view(425913,'/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v')" class="view-product">Посмотреть товар</a> <div class="cart_item_quantity"> <a href="/cart?pc[0-388599]=1" class="quantity-cart-minus" onclick="return cart.quantity('0-388599',-1)"><span class="quantity-cart-minus"></span></a> <input type="text" name="pc[0-388599]" value="2" class="quantity" onclick="this.select()"> <a href="/cart?pc[0-388599]=3" class="quantity-cart-plus" onclick="return cart.quantity('0-388599',1)"><span class="quantity-cart-plus"></span></a> </div> </div> </div> <div class="cart_item_price_wrap"> <a href="?del[0-388599]=1" class="cart_item_delete"> <div class="wrapper_answer"> <div class="answer"> <p class="answer_text"><span>Вы уверены, что хотите удалить товар<br> из корзины?</span></p> <div class="answer_buttons"> <button class="del_from_cart answer_button_left" value="no">Нет</button> <button class="del_from_cart answer_button_right" value="yes" onclick="return cart._delete('0-388599')">Да</button> </div> </div> </div> </a> <div class="product-code">Код: id425913</div> <s style="visibility: hidden">&nbsp;</s> <strong> <span class="span_word">Цена:</span> <span class="span_price">34&nbsp;157<span class="tRub">руб</span></span> </strong><br> <a href="javascript:void(0)" onclick="return cart.toggle('0-388599')" title="Выбрать данный тип оплаты"> Цена в кредит: от <span>1&nbsp;982<span class="tRub">руб</span>/мес</span></a> </div> <div class="clear"></div> </div><!--cart_border--> <div id="promo-code"> <div> <label title="Введите промо-код"> <span>Введите промо-код</span> <input id="promo-code-value" maxlength="19" placeholder="Введите промо-код" type="text"> </label> <button id="promo-code-apply" role="button" type="submit">Применить</button> </div> <span id="promo-code-message"></span> </div> </div>lass="cart_form" method="post"> <div class="item_line_nomargin"></div> <div class="cart_left_wrap"> <div class="cart_border"> <div class="cart_item_photo"><a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v"> <img alt="LED Телевизор LG 43UF670V" src=""></a></div> <div class="cart_item_text"> <div class="cart_item_name"><a href="/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v">LED Телевизор LG 43UF670V</a></div> <div class="item_avb availability_yes">В наличии</div> <div class="cart_item_quantity_wrap clearfix"> <a href="cart/view?id=425913" onclick="return cart.view(425913,'/katalog/products/audio-video-tv-tehnika/televizory/led-televizory/led-televizor-lg-43uf670v')" class="view-product">Посмотреть товар</a> <div class="cart_item_quantity"> <a href="/cart?pc[0-388599]=1" class="quantity-cart-minus" onclick="return cart.quantity('0-388599',-1)"><span class="quantity-cart-minus"></span></a> <input type="text" name="pc[0-388599]" value="2" class="quantity" onclick="this.select()"> <a href="/cart?pc[0-388599]=3" class="quantity-cart-plus" onclick="return cart.quantity('0-388599',1)"><span class="quantity-cart-plus"></span></a> </div> </div> </div> <div class="cart_item_price_wrap"> <a href="?del[0-388599]=1" class="cart_item_delete"> <div class="wrapper_answer"> <div class="answer"> <p class="answer_text"><span>Вы уверены, что хотите удалить товар<br> из корзины?</span></p> <div class="answer_buttons"> <button class="del_from_cart answer_button_left" value="no">Нет</button> <button class="del_from_cart answer_button_right" value="yes" onclick="return cart._delete('0-388599')">Да</button> </div> </div> </div> </a> <div class="product-code">Код: id425913</div> <s style="visibility: hidden">&nbsp;</s> <strong> <span class="span_word">Цена:</span> <span class="span_price">34&nbsp;157<span class="tRub">руб</span></span> </strong><br> <a href="javascript:void(0)" onclick="return cart.toggle('0-388599')" title="Выбрать данный тип оплаты"> Цена в кредит: от <span>1&nbsp;982<span class="tRub">руб</span>/мес</span></a> </div> <div class="clear"></div> </div><!--cart_border--> <div id="promo-code"> <div> <label title="Введите промо-код"> <span>Введите промо-код</span> <input id="promo-code-value" maxlength="19" placeholder="Введите промо-код" type="text"> </label> <button id="promo-code-apply" role="button" type="submit">Применить</button> </div> <span id="promo-code-message"></span> </div> </div> </form>

After all, in theory, a click should be generated only on the unput type submit, and not as in my case, on some third-party element
@amijin, if the button type is not specified, then it will accept any button as submit
it turns out that even if the form is input type submit, but if there is a button without a type in the form, then the click event on the first tree in the DOM without the type?

Event click and submit forms

2 answers 2

More articles: