So I'm with a problem here that is as follows:
I have 2 forms. Form2 that sits inside form1. And I wanted a button to reset only the fields of form 2. But the input type="reset" that I place inside form 2, ends up clearing the 2 forms.
Would you like to make a button just to clear the form2 fields?
HTML explicitly forbids the insertion of form into another form .
In this part:
Content model: Flow content, but with form element descendants .
In this highlighted part of the link, you are telling which types of content categories a form can have within it. In this case you can have elements belonging to the flow content categories, except for another form element. (The exception is due to the fact that form is an element belonging to the flow content category). See more here .
One 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><inputtype="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>