Q:

Fomulário dentro de formulário php/ajax/js

Bom a primeira vista, o título já demonstra o erro, porém esse é o processo que necessito mas não tenho ideia de como executá-lo.
Dado um form simples por exemplo:

<form method="post" action="trata_form.php">
    <input type="text" placeholder="Insira sua cor"/>
    <button type="submit">Add</button></br></br>
    <input type="checkbox" value="vermelho"/>Vermelho</br>
    <input type="checkbox" value="vermelho"/>Azul</br>
    <input type="checkbox" value="vermelho"/>Branco</br>
    <input type="submit" value="Envia Form"/>
</form>

A ideia é que quando o user clique no botão após inserir uma nova cor, essa ação irá inserir a nova cor na tabela de cores e através de um ajax o form será atualizado com um checkbox contendo a nova cor. Até ai ok.
A dúvida é se essa ação(clicar no botão para adicionar nova cor) deve ocorrer através de um "action" ? se sim como eu devo proceder, pois o "action" do form já está presente, no entanto este só deve "agir" após a nova cor ter sido inserida e apresentada.
Não é necessário um código pronto, apenas uma caminho para eu compreender como solucionar esse processo.
Desde já, tks!  

A:

Não sei se fui claro na resposta.
Só pra exemplificar de forma bem improvisada:
<form method="post" action="trata_form.php">
    <input id="nova-cor" type="text" placeholder="Insira sua cor"/>

    <button id="add-cor" type="button">Add</button></br></br>

    <div id="cores">
        <input type="checkbox" value="vermelho"/>Vermelho</br>
        ...     
    </div>
    <input type="submit" value="Envia Form"/>
</form>
<script>
$("#add-cor").on("click", function(){
    var novacor = $("#nova-cor").val();
    $.ajax({
        ...chame aqui a url para adição da nova cor
    }).done(function() {
        $("#cores").append...
    });
});
</script>

