Как сделать форму отправки на div нажмите с помощью jquery?

Я уже пробовал это в одном файле php, но не получилось, поэтому я попробовал теперь в двух отдельных файлах php один для формы и другой для процесса.

как отправить форму на div или нажмите ссылку?

код, который я пробовал

$(document).ready(function(){
    jQuery('.web').click(function () {
        $("#g_form").submit();
        alert('alert');
    });
});

форма

<form action="p.php" id="g_form" method="POST">
    <input type="text" name="f1" value="">
    <input type="submit" value="submit!" name="submit"/>
</form>

<div class="web">click</div>

вот код файла процесса p.php

<?php
if(isset($_POST['f1'])){
    echo $_POST['f1'];
} ?>

когда я нажимаю кнопку отправки, форма отправляется, но когда я нажимаю .web div это не отправка формы даже я получаю предупреждение, но не отправляю.

что я здесь делаю? Будет полезно, если у меня появится идея.

6
forms html javascript jquery php

6 ответов

.submit () docs

формы и их дочерние элементы не должны использовать входные имена или идентификаторы, конфликтующие со свойствами формы, такими как submit, length или method. Конфликты имен могут привести к ошибкам. Полный список правила и чтобы проверить разметку для этих проблем, см. DOMLint.

вы даете своей кнопке отправки имя submit, о котором говорится в приведенном выше отрывке причина "запутанных неудач"

Итак, если вы обратились к элементу dom и посмотрели на .submit свойство вы увидите, что, поскольку вы называете кнопку submit вместо .submitбудучи функцией, его ссылка на элемент кнопки dom

HTML-код

<form action="p.php" id="g_form" method="POST">
    <input type="text" name="f1" value="">
    <input type="submit" value="submit!" name="submit"/>
</form>

<div class="web">click</div>

JS

//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>

и при изменении имени отправки

<form action="p.php" id="g_form" method="POST">
    <input type="text" name="f1" value="">
    <input type="submit" value="submit!" name="psubmit"/>
</form>

<div class="web">click</div>

JS

var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] }

поэтому просто дайте вашей кнопке отправки другое имя, которое не конфликтует с свойства формы.

5

вы можете нажать кнопку отправки.

<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" id="f_submit" name="submit"/>
</form>

<div class="web">click</div>



 $(document).ready(function(){
       jQuery('.web').click(function () {
        $("#f_submit").trigger( "click" );
          alert('alert');
    });
  });

демо:http://jsfiddle.net/awladnas/a6NJk/610/

2

HTML (Укажите имя для формы, удалите имя из отправки):

<form action="p.php" name="g_form" id="g_form" method="post">
    <input type="text" name="f1" value="">
    <input type="submit" value="submit!"/>
</form>

<div class="web">click</div>

JavaScript

//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
    //use on(), as it's the recommended method
    $('.web').on('click', function () {
        //use plain JavaScript. Forms are easily accessed with plain JavaScript.
        document.g_form.submit();
        alert('alert');
    });
});
2

измените имя отправки и попробуйте,

<input type="submit" value="submit!" name="mySubmit"/>
1

удалите отправку из формы и повторите попытку:

<form action="http://test.com" id="g_form" method="GET">
    <input type="text" name="f1" value=""/>
</form>

<div class="web">click</div>

Я изменил действие на реальный URL-адрес и метод GET, чтобы что-то изменилось.

Скрипка

1
$(".web").live('click', DivClick);

function DivClick(){
    $("#g_form").submit();
}
-1