Dialog inside php/ajax/js form

Asked

Viewed 38 times

2

Well at first glance, the title already shows the error, but this is the process I need but I have no idea how to execute 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 on the button after inserting a new color, this action will insert the new color in the color table and through an ajax the form will be updated with a checkbox containing the new color. So far ok.

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

There is no need for a ready-made code, just a way for me to understand how to solve this process.

From now on, Tks!

php javascript ajax

  • I don’t know if I understand correctly. But if there are two fields (one to add and one to choose), then there could be two forms distinct. One to add a color, another to choose the color. But anyway the action of ajax is independent of form. Then you can make the call by clicking the button, so get the typed data and send.

  • @Inkeliz thanks for the attention, so... This form is a large form, divided into parts through includes. This part of the color ( this is just an example, are characteristics actually) is a include that is contained in a modal... I can insert a new form inside this modal that is already part of a form?

  • @Inkeliz my difficulty, is in this insertion of the new "color " in the color table, since the shape I know is through an action, however I tried to put form inside form (what I believe is not possible) and this button "Add"(which is a Submit) triggered the primary form action, you see...

  • When you have AJAX, you don’t necessarily need a FORM, only event manipulation can be done. That wouldn’t help?

  • @Williamasimiliar and with ajax I could insert the new color in the table? I’m sorry if the question seems silly, but I don’t really know much, but if you say it gives I’ll turn around...

  • Yes. If you have the RGB, after the event, do the .css() fill a background of that table you want. I think searching for it will give you a light

  • @Williamasimiliar guy sorry, but I didn’t understand the link with ". css" and RGB, what would this RGB?

  • You cannot include a form within another form. In your case you would not even need another form. Leave your button with type="button" so it doesn’t trigger the main form Ubmit event. From this make your request ajax by this button.

  • @Danielferreira looks good... I’ll try and put the return...

  • @Magichat The answer you left as right, on .append() that’s where I’d put the .css(). I would edit the css of the result table where I would receive the RGB color (#FFFFFF is the White RGB, for example).

Show 5 more comments

1 answer

2


I’m not sure I was clear in my answer. Just to illustrate 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>

  • Cleared cool man, Tks!

Browser other questions tagged php javascript ajax

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