Могу ли я отправить 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>
Могу ли я отправить 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>
Довольно просто;
document.getElementById("myForm").submit();
И если вы хотите сделать этот стиль jQuery (который я не рекомендую для такой простой задачи);
$("#myForm").submit();
Да, это довольно просто. Просто используйте метод submit
[jQuery docs] внутри функции обработчика click
.
$("#myDiv").click(function() {
$("#myForm").submit();
});
Если вы предпочитаете, вы можете сделать это с помощью ванили Javascript:
document.getElementById("myDiv").onclick = function() {
document.getElementById("myForm").submit();
};
Свяжите событие щелчка div.
$("div").click(function(){ $("form#myForm").submit(); });
$('#myDiv').click(function() {
$('#myForm').submit();
});
Если вы хотите неоправданно зависеть от JavaScript, вы можете...
jQuery('div').click(function () { jQuery('form').submit(); });
... однако, вы должны использовать семантический HTML, который работает без присутствия JS. Поэтому используйте настоящую кнопку отправки и применяйте CSS, чтобы он выглядел так, как вы хотите.
Для лучшей семантики и грациозной деградации я предлагаю вам сделать следующее:
$(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;)
Использование jquery:
$('#myForm').submit();
Только с использованием JavaScript, как правило, вы должны использовать jQuery и связать событие click из div с событием отправки формы.
См.: http://api.jquery.com/submit/
В этом примере даже показан этот точный сценарий.
Как насчет этого:
$(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>
почему бы вам просто не нарисовать кнопку, чтобы выглядеть как обычный div? :)
button{
border:none;
background:none;
padding:0;
text-align:left;
}
<?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>