Fomulário inside form php / ajax / js

Question

Fomulário inside form php / ajax / js

Navigation

#1 by (2 votes)

2

At first glance, the title already shows the error, but this is the process I need but I have no idea how to do it.

Given a simple form for example:

<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>

The idea is that when the user clicks the button after inserting a new color, this action will insert the new color into the color table and through an ajax the form will be updated with a checkbox containing the new color. Until then, okay.

The question is whether this action (click on the button to add new color) should occur through an "action"? if this is how I should proceed, because the form's action is already present, however it should only "act" after the new color has been inserted and presented.

You do not need ready code, just a way for me to figure out how to solve this process.

Now, tks!

php javascript ajax

asked by anonymous 22.08.2016 / 22:32

1 answer

How to use CHARSET correctly in AngularJS Is it possible to send data from the typed view with IEnumerable to the Controller? [duplicate]

score 2 · Accepted Answer

I do not know if I was clear on the answer. Just to exemplify in a very improvised way:

<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>