Working with identical forms on the same page

Asked

Viewed 124 times

1

Hello, I need to insert the same form twice on the same page. Both call the javascript function to fill fields automatically. Example, select combo 1, ai fills combo 2, selects combo 2, and fills combo 3 fills via ajax. Since each field can have only one id, and the forms are on the same page, making it impossible to use the same id, what would be a solution to have these two forms on the same page, but know how to identify which form called the javascript function in order to fill the combos correctly.

javascript jquery html

  • Check, with javascript or Jquery, if the 1° form was set (all fields) if yes, call the ajax of form 2. I believe that each form has its ID.

  • @Marcelorafael understood, but how do I get the id of the form that is calling the function js? the function javascript has 3 parameters since step

  • Each form." html" is in a file, and each code.js is separate for each file? Or you put all the forms together on the same page and put the <script tag> ?

1 answer

1


See the HTML code below.

$(function () {
  $('input[type=button]').on('click', function() {
    formId = $(this).parent("form").attr("id");
    $('#flash').html('Botão do ' + formId + ' pressionado.');
  });  
});
input[type='button'] {
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="form1">
  <input type="button" value="Click" />
</form>

<form id="form2">
  <input type="button" value="Click" />
</form>

<div id="flash"></div>

Press "Run" to see this code snippet working.

There are two equal forms, each with its own id. In Javascript, with jQuery, it assigns an event of click on the buttons, thus reaching both forms. That is, the behavior of the two will be exactly the same. With the function parent, I seek the element form where the button you press is located and I can then identify which form was used. To check, just look at the message that appears in the div #flash.

The snippet of CSS code was just to make the look a little cleaner. It is not fundamental to the operation of logic.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.