There is html:

<form method="POST" enctype="multipart/form-data" id="main-image-form"> <input name="image_url"> <button type="submit" enctype="multipart/form-data" class="save btn btn-warning"> <b>-100 G</b> <img src="reload.png'"> </button> <div name="main" onclick="backgroundPreview(this);"></div> <button name="btn"></button> </form>

And JS:

 jQuery(document).ready(function ($) { $('#main-image-form').submit(function(e){ // some code }); }); function backgroundPreview(elem) { console.log(elem); console.log(elem.name); }

Firstly , the first JS function works even when you click on the button , whose name="btn" . I do not understand why. Judging by the function, it should only work when you click on a submit form button.

Secondly , when you click on the div , in which name="main" , the backgroundPreview function is called, to which the element object is transferred from html. The object itself in the console is printed. But instead of its name parameter, undefined is displayed in the console. Why? After all, this div has a name attribute. If this div changed to button , then the name will be printed, but then the first JS function will be called, as described in the first paragraph, and I should not allow this.

What can I do to ensure that when I click on a div only one second JS function is invoked, and I could get the name attribute from this div from JS?

  • one
    1. "Judging by the function" it is triggered when the form is submitted (the submit event); 2. The name element is not characteristic of the div element. Attributes that are not peculiar to an element can be obtained using el.getAttribute(attribute_name) - Nikita Umnov 2:29 pm
  • 2
    Regarding the first item - if the button is inside the form tag, then you need to explicitly set type="button" , since default is type="submit" - Vladimir
  • The first comment answered the second question, the second to the first - fedotsoldier

1 answer 1

Firstly , the first JS function works even when you click on the button , whose name="btn" . I do not understand why. Judging by the function, it should only work when you click on a submit form button.

The <input type="button|submit"> <button></button> or <button></button> in the form will be the submit button for the form itself.

For the code to work properly, use the type="button" tag for the button with the name="btn" .

Secondly , when you click on the div , in which name="main" , the backgroundPreview function is called, to which the element object is transferred from html . The object itself in the console is printed. But instead of its name parameter, undefined is displayed in the console. Why? After all, this div has a name attribute. If this div changed to button, then the name will be printed, but then the first JS function will be called, as described in the first paragraph, and I should not allow this.

As you have already been answered in the comments, for the div there is no name attribute, use, let's say a data-name . In jQuery, get the data-name attribute data-name via .data('name') .

Example:

 $('#dsa').on('click', function(){ $('.asd').each(function(){ let dataName = $(this).data('name'); console.info(dataName); }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="asd" data-name="1">one</div> <div class="asd" data-name="#0f0">green</div> <div class="asd" data-name="#id1">id1</div> <br> <button id="dsa">Получить все data-name</button>