Clear fields from a form

Question

So guys I have a problem here which is as follows:

I have 2 forms. The form 2 that is inside the form 1. And I wanted a button to reset only the fields of form 2. Only the input type="reset" that I put inside form 2, ends up cleaning the 2 forms.

Could I make a button just to clear the fields of the formule2 ?

Answer 1

HTML explicitly prohibits the insertion of form within another form.

see here

In this part:

Content model: Flow content, but with no form element Scendants.

In this highlighted part of the link, is telling what types of content categories a form may have within it. In this case it may have elements belonging to the flow content categories, except another element form. (The exception is due to the fact that form is an element belonging to the flow content category). See more here.

A possible alternative would be this:

$('input.limpar').on('click', function() {

  
  $('div.campos').find('input').val('');

});

input {

  display: block;
  
  margin-top: 5px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <input type="text" value="campo 1" />
  <input type="text" value="campo 2" />
  <input type="text" value="campo 3" />
  
  <div class="campos">
    
  <input type="text" value="campo 4" />
  <input type="text" value="campo 5" />
  <input type="text" value="campo 6" />
    
  </div>
  
  <input class="limpar" type="button" value="limpar" />
  
</form>