Submit data from two forms by one independent button and insert data to DB

Question

I'm working on project that is build on Wordpress (I'm using WP because of friendly permissions and rights system) and basically it's written by myself in PHP with a few javascript elements on my own single-pages. Now I need your help. I generate two forms by my PHP script. The template of each form is in MySQL DB table. It's because of friendly editing and administration for each particular row in each form for my not-very-skilled-with-pc collegues that need edit forms without my help. So I have some administration page for forms, collegue makes some changes, save it and script will generate edited form. It works perfectly. Script generate something like below (don't look at messy code, it's only beta without css etc.)

<form id="f1" method="POST" class="form-product-item" style="display: block;">
<fieldset form="f1" name="f1_f">
    <legend> &nbsp; FORM 1 &nbsp; </legend>
    <table style="width: 320px; max-width: 320px; float: left; margin: 5px">
        <tr class="optional f1r1" name="f1r1_v" style="display: block;" >
            <td style="width: 120px; min-width: 120px; max-width: 120px; height: 48px; max-height: 48px;">
                <div class="optional f1r1" name="f1r1_v" style="display: block;" class="hidden-txt">Row 1 Form 1: </div>
            </td>
            <td style="width: 140px; min-width: 140px; max-width: 140px">
                <input type="text" class="optional f1r1" name="f1r1_v" style="display: block;" class="hidden-txt" placeholder="Row 1 Form 1" size="15" />
            </td>
            <td style="width: 60px; max-width: 60px; max-width: 60px">suffix</td>
        </tr>
    </table>

    <div style="clear: both"></div>
</fieldset>

<form id="f2" method="POST" class="form-product-item" style="display: block;">
<fieldset form="f2" name="f2_f">
<legend> &nbsp; FORM 2 &nbsp; </legend>
<table style="width: 320px; max-width: 320px; float: left; margin: 5px">
    <tr class="optional f2r1" name="f2r1_v" style="display: block;" >
        <td style="width: 120px; min-width: 120px; max-width: 120px; height: 48px; max-height: 48px;">
            <div class="optional f2r1" name="f2r1_v" style="display: block;" class="hidden-txt">Row 1 Form 2: </div>
        </td>
        <td style="width: 140px; min-width: 140px; max-width: 140px">
            <select id="f2r1_dm" name="f2r1_v" style="width: 120px">
                <option selected>- Choose -</option>
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </td>
        <td style="width: 60px; max-width: 60px; max-width: 60px">suffix</td>
    </tr>
    <tr class="optional f2r2" name="f2r2_v" style="display: block;" >
        <td style="width: 120px; min-width: 120px; max-width: 120px; height: 48px; max-height: 48px;">
            <div class="optional f2r2" name="f2r2_v" style="display: block;" class="hidden-txt">Row 2 Form 2: </div>
        </td>
        <td style="width: 140px; min-width: 140px; max-width: 140px">
        <input type="text" class="optional f2r2" name="f2r2_v" style="display: block;" class="hidden-txt" placeholder="Row 2 Form 2" size="15" />
        </td>
        <td style="width: 60px; max-width: 60px; max-width: 60px">suffix</td>
    </tr>

    <div style="clear: both"></div>
</table>
</fieldset>

Now I want to ask you friends, how to make one independent submit button below "FORM 2" (outside from form tags) that submit values from all fields from both forms at once and insert it to DB. I tried some advises I found here on stackoverflow but they did not work for me. I'm quite begginer with PHP and Java, AJAX I know very cursorily. So, for some advice or step by step tutorial I'll be very appreciate. Thank you very much for any help ;).

Sorry, tutorials here are unheard of because they are supposed to be long. Are both your forms being submitted to the same page? — AyB, Mar 12 '14 at 11:32
Please use http://www.sscce.org/ principles when asking questions. — setec, Mar 12 '14 at 11:51
@ICanHasCheezburger thank you for your comment. Yes, both forms being submited to the same page — Shalladan, Mar 12 '14 at 12:09
@Shalladan Why not simply put all your inputs under one form and submit them together? From what I see even your methods (`POST`) are same. Is there a reason you need to separate into two forms? — AyB, Mar 12 '14 at 12:11
@ICanHasCheezburger It's because in DB table I have several template groups for generating forms. Every template group (form) is for different product kind and has own checkbox at the top of page. Form is shown or hidden by javascript depends on user's choice in checkboxes. After that user fill only the forms he needs and submit only the fields he needs. — Shalladan, Mar 12 '14 at 12:23

score 0 · Answer 1 · answered Mar 12 '14 at 11:47

0

add a button outside the forms and and in it's onclick call a function say submitAll

window.onload = init;
function init() {
  document.forms[0].addEventListener('onsubmit',
        function{document.forms[1].submit();});
}

function submitAll(){document.forms[0].submit();}

answered Mar 12 '14 at 11:47

thank you very much for your comment. I tried your solution but probably I made a mistake. I set your script before my html forms and submit button below second form (tried input and button tags). But it doesn't work (for me). Could you direct me to right way? my php page with your advise - http://pastebin.com/wxFPZrJ5 – Shalladan Mar 12 '14 at 12:54
don't use `type='submit'` use `type='button'`, ``, and check if `submitAll()` is getting executed and then check if `onsubmit` is getting triggered by using `alert` – Mar 13 '14 at 05:24

score 0 · Accepted Answer · answered Mar 12 '14 at 13:43

This is as close as I can get to:

Add a button outside the forms at the end:

<input type="button" name="submit" id="submit" value="submit">

You will need to add this library:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

And then what we do is, when the user clicks on submit, we will clone all the other form elements along with its values onto your first form and submit it. This way, while on submit, all your form values will be passed from the first form.

<script type="text/javascript">
jQuery("#submit").click(function(e){
                $first_form = $("form").attr('id');
                $("form").each(function() {
                    $('#'+this.id + ' :input').not('#'+$first_form).clone(true).appendTo('#'+$first_form);
                        //getting all the selected options
                    var selects = $('#'+this.id).find("select");
                    $(selects).each(function(i) {
                        var select = this;
                        $('#'+$first_form).find("select").eq(i).val($(select).val());
                    });
                    //getting all the textarea values
                    var textareas = $('#'+this.id).find('textarea');
                    $(textareas).each(function(i) {
                        var textarea = this;
                        $('#'+$first_form).find("textarea").eq(i).val($(textarea).val());
                    });
                });
                $('#'+$first_form).submit(); 
            });
</script>

On the PHP that the form is being submitted to, you can do a var_dump($_POST); to see if you have received all the values correct.

thank you very much, this works for me in my application and also thanks for your advise in comments, because it directs me to rewrite some parts of my code of page structure (I would like to vote up for you but I can't yet - low rep) — Shalladan, Mar 13 '14 at 07:57

Submit data from two forms by one independent button and insert data to DB

2 Answers2