CODEWITHSUNDEEP
jqueryhtmlcssformshtml-table
Ujjwal Chowdary
Ujjwal Chowdary

Reputation: 125

Submit button used out of the form

Can I use submit button out of the form and still process the form action on clicking submit button? Below is the code. I am new to programming. Please help me. 

<body>
<input type="submit" name="submit" value="submit" />
<form action="" method="get" name="myform">
  <table width="200" border="1" cellspacing="10">
    <tr>
      <td>Name</td>
      <td><label for="name"></label>
      <input type="text" name="name" id="name" /></td>
    </tr>
    <tr>
      <td>email</td>
      <td><label for="email"></label>
      <input type="text" name="email" id="email" /></td>
    </tr>
    <tr>
      <td>Group</td>
      <td><input type="checkbox" name="IT" id="IT" />
        IT 
          <input type="checkbox" name="ECE" id="ECE" />
        <label for="ECE"></label>
        ECE
        <input type="checkbox" name="Mech" id="Mech" />
        <label for="Mech"></label>
        Mech</td>
    </tr>
    <tr>
      <td>Hobbies</td>
      <td><label for="hobbies"></label>
      <input type="text" name="hobbies" id="hobbies" /></td>
    </tr>
  </table>
</form>
</body>

Upvotes: 2

Views: 2063

Answers (4)

dsgriffin
dsgriffin

Reputation: 68616

You can do it either by using HTML5, pure JavaScript or jQuery:

Using JavaScript:

<form action="" method="get" id="theForm">
// Form here
</form>

<input type="submit" onclick="document.forms[0].submit();" />

Using jQuery:

<form action="" method="get" id="theForm">
// Form here
</form>

<input type="submit" id="submitTheForm" />

$('#submitTheForm').click(function(){
    $('#theForm').submit();
});

Using CSS (if if you only want it outside the form for aesthetic reasons):

A better option might be to leave your submit inside the form, and position it elsewhere using CSS (if that's the reason you wanted it outside the form).

Using HTML5:

Finally, you should look into using HTML5's form attributes. Note that they are supported in all major browsers (Chrome, Firefox, IE10) but not in older versions of IE (IE9, IE8 etc). This should also work:

<form id="something" method="post"> 
<input type="text"/> 
</form> 

<input type="submit" form="something">

Upvotes: 4

What have you tried
What have you tried

Reputation: 11148

Yes, you can do this using jQuery

<a href="#" id="submit-form">Submit</a>
<form id="someid">

</form>

jQuery:

$("#submit-form").click(function(){
$("#someid").trigger("submit");
})

Upvotes: 3

sdespont
sdespont

Reputation: 14025

Using JQuery :

<form action="" method="get" name="myform" id="myform">
...
</form>

<input type="button" id="submitform" value="click me to submit the form" />

$('#submitform').click(function(){
    $('#myform').submit();
});

Upvotes: 2

Pankucins
Pankucins

Reputation: 1720

You'll have to use some javascript to achieve this. Here's an example

<input type="button" onclick="document.forms['myform'].submit()" value="Submit" />

Upvotes: 1

Related Questions