Отправить форму html без кнопки отправки?

Могу ли я отправить html <form> с <div> вместо <input type="submit">?

Как это:

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

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

Ответ 1

Довольно просто;

document.getElementById("myForm").submit();

И если вы хотите сделать этот стиль jQuery (который я не рекомендую для такой простой задачи);

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

Ответ 2

Да, это довольно просто. Просто используйте метод submit ^{[jQuery docs]} внутри функции обработчика click.

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

Если вы предпочитаете, вы можете сделать это с помощью ванили Javascript:

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

Ответ 3

Свяжите событие щелчка div.

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

Ответ 4

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

Ответ 5

Если вы хотите неоправданно зависеть от JavaScript, вы можете...

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

... однако, вы должны использовать семантический HTML, который работает без присутствия JS. Поэтому используйте настоящую кнопку отправки и применяйте CSS, чтобы он выглядел так, как вы хотите.

Ответ 6

Для лучшей семантики и грациозной деградации я предлагаю вам сделать следующее:

$(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();
    });
});

Таким образом, ваша форма остается доступной для клиентов без JS.

Это сказано: просто введите свой вклад, чтобы посмотреть, как вы хотите его с помощью CSS;)

Ответ 7

Использование jquery:

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

Ответ 8

Только с использованием JavaScript, как правило, вы должны использовать jQuery и связать событие click из div с событием отправки формы.

См.: http://api.jquery.com/submit/

В этом примере даже показан этот точный сценарий.

Ответ 9

Как насчет этого:

 $(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>

Ответ 10

почему бы вам просто не нарисовать кнопку, чтобы выглядеть как обычный div? :)

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

Ответ 11

<?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>