Отправить HTML-форму без кнопки отправки? - PullRequest
Новая
       2

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

15 голосов
/ 09 октября 2011

Могу ли я отправить 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>

Ответы [ 11 ]

36 голосов
/ 09 октября 2011

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

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

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

$("#myForm").submit();
7 голосов
/ 09 октября 2011

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

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

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

document.getElementById("myDiv").onclick = function() {
  document.getElementById("myForm").submit();
};
3 голосов
/ 09 октября 2011 
$('#myDiv').click(function() {  
    $('#myForm').submit();
});
3 голосов
/ 09 октября 2011

Привязать событие щелчка div.

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

2 голосов
/ 09 октября 2011

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

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

2 голосов
/ 09 октября 2011

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

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

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

2 голосов
/ 09 октября 2011

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

$('#myForm').submit();
0 голосов
/ 13 декабря 2013 
<?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>
0 голосов
/ 09 октября 2011

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

button{
    border:none;
    background:none;
    padding:0;
    text-align:left; 
}
0 голосов
/ 09 октября 2011

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

 $(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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...