Repositioning multipart/form-data submit button

Question

I've got the following structure:

<form id="the_form" method='post' enctype="multipart/form-data">
    <table id="1">blabla</table>
    <table id="2">blabla
    <input type='submit' name='submit' />
    </table>
</form>
<table id="3'>
    <form>here are a couple of subforms</form>
</table>

Visually I would like to achieve this structure:

<form id="the_form" method='post' enctype="multipart/form-data">
    <table id="1">blabla</table>
    <table id="2">blabla
    </table>
</form>
<table id="3>
    <form>here are a couple of subforms</form>
    <input type='submit' name='submit' />
</table>

I can't change the way the forms are structured. I tried to put the input in a noscript and then make a link that submits the form but I think this doesn't work due to the fact that the form is a multipart/form-data. So how do I solve this? Does anybody know a css way to place the table 2 under 3 (table 3 has a non-fixed height, seems messy to fix this with javascript so I hope somebody has a better solution)? Or is there a javascript/jquery way to do this? Or am I over-thinking this and is there a simple solution?

Cheers, Adnan

Is there multiple forms (i.e. one form posts to "/a.php" and another to "/b.php") or do all the form fields nee to be sent in one request, to the same url? — Lee, Sep 03 '13 at 16:22

score 1 · Accepted Answer · edited May 23 '17 at 10:31

With jQuery (you should add it to the question's tags, by the way, since you are open to using it as a solution), you can decide which forms to submit when.

Read this if you have ideas re submitting multiple forms at once.

You can also use AJAX to submit form data to the server "on your own terms", without using the archaic <form> construct (with mandatory page redirection/refresh).

Submitting a form with jQuery looks like this:

$('#yourFormID').submit();

You can also change your Submit button from type="submit" to type="button" and then do something like this:

$('#thesubmitbutton`).click(function() {
     //check if all fields filled out, like this:
     var somefield = $('#somefield').val();
     if (somefield == '') {
          alert('Please complete all form fields');
          return false;
     }else{
          $('#myform1').submit();
     }
});

However, if you have multiple forms, you might want to check out how to do things with AJAX -- it's much simpler than many folks imagine. See this SO post for some simple examples to get you started.

Repositioning multipart/form-data submit button

1 Answers1