CODEWITHSUNDEEP
jqueryhtmlforms
Frantisek
Frantisek

Reputation: 7693

Submit an HTML form without having a submit button?

Can I submit a html <form> with <div> instead of <input type="submit"> ?

Like this:

<form method="post" action="" id="myForm">
  <textarea name="reply">text</textarea>
</form>

<div>Submit the form by clicking this</div>

Upvotes: 26

Views: 110765

Answers (11)

japrescott
japrescott

Reputation: 5015

The method you can use to submit a specific form is the following:

// Grab the form element and manually trigger the 'submit' method on it:
document.getElementById("myForm").submit();

So in your example, you can add a click event handler on any element you like and trigger the form's submit method through that:

<form method="post" id="myForm">
  <textarea name="reply">text</textarea>
</form>

<div class="submit">Submit the form by clicking this</div>

const myForm = document.getElementById("myForm");
document.querySelector(".submit").addEventListener("click", function(){

  myForm.submit();

});

And if you want to do it jQuery style (which I do not recommend for such a simple task);

$("#myForm").submit();

In its full form:

const myForm = $("#myForm");
$(".submit").click(function(){

  myForm.submit();

});

References:

  • The submit() method of HTML Form elements (native JavaScript API)
  • The jQuery submit() API

Upvotes: 55

Piotr Perak
Piotr Perak

Reputation: 11088

How about this:

 $(document).ready(function() {
     $('#submitDiv').click(function() {
        $('#myForm').submit();
     });

}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" id="myForm">
<textarea name="reply">text</textarea>
</form>

<div id="submitDiv">Submit the form by clicking this</div>

Upvotes: 1

user2956239
user2956239

Reputation: 13

<?php
if(isset($_POST['text']) && !empty($_POST['text']))
{
   echo $text_val = $_POST['text'];
}

?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
        <form method="post" action="Enter your action">
        <p><label>Enter your Text : </label>
        <input type="text" name="text" id="text" onmouseover="this.form.submit();"></input>
        </p>
        </form>
</body>
</html>

Upvotes: 0

Andy
Andy

Reputation: 30135

why don't you just style a button to look like a regular div? :)

button{
    border:none;
    background:none;
    padding:0;
    text-align:left; 
}

Upvotes: 0

vzwick
vzwick

Reputation: 11044

For better semantics and graceful degradation, I suggest you do this:

$(document).ready(function(){
    $('form input[type="submit"]').replaceWith('<div class="submit">Submit the form by clicking this</div>'); // replace submit button with div

    $('.submit').live('click', function() {  
        $(this).closest('form').submit();
    });
});

This way, your form remains usable for clients without JS.

That being said: Just style your input to look the way you want it to with CSS ;)

Upvotes: 2

Quentin
Quentin

Reputation: 943220

If you want to unnecessarily depend on JavaScript, then you could…

jQuery('div').click(function () { jQuery('form').submit(); });

… however, you should use semantic HTML that works without JS being present. So use a real submit button and apply CSS to make it look the way you want.

Upvotes: 2

Sparky
Sparky

Reputation: 98718

$('#myDiv').click(function() {  
    $('#myForm').submit();
});

Upvotes: 3

simbolo
simbolo

Reputation: 7494

Only by using JavaScript, typically you'd use jQuery and tie the click event of the div to the submit event of the form.

See: http://api.jquery.com/submit/

The example there even demonstrates this exact scenario.

Upvotes: 0

Peter Olson
Peter Olson

Reputation: 142921

Yes, it's fairly simple. Just use the submit[jQuery docs] method inside of a click handler function.

$("#myDiv").click(function() {
 $("#myForm").submit();
});

If you prefer, you can do it with vanilla Javascript:

document.getElementById("myDiv").onclick = function() {
  document.getElementById("myForm").submit();
};

Upvotes: 10

dvir
dvir

Reputation: 5115

Bind the div click event.

$("div").click(function(){ $("form#myForm").submit(); });

Upvotes: 3

Samich
Samich

Reputation: 30095

Using jquery:

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

Upvotes: 2

Related Questions