Использование onclick и onsubmit вместе - PullRequest
0 голосов
/ 12 января 2012

Я хочу одновременно выполнять onclick и onsubmit, возможно ли это?Или, если это плохая практика, как я могу объединить два кода для выполнения обоих событий?

У меня есть этот фрагмент кода, проверяющий обязательное поле в теге формы:

onsubmit="return formCheck(this);"

I тогдаУ этой части кода есть кнопка на кнопке отправки для той же формы:

onClick="jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&country=\' + this.form.country.value + \'&email=\' + this.form.email.value + \'&department=\' + this.form.department.value) }); return false;"

Проблема, с которой я столкнулся, заключается в том, что при нажатии кнопки отправки он полностью игнорирует код отправки.Как я могу объединить их?

ОБНОВЛЕНИЕ Я хочу сначала проверить обязательные поля, а затем отправить форму, если все в порядке.

ОБНОВЛЕНИЕ: IЯ вставил весь код сюда , я действительно изо всех сил, поскольку это было сделано предыдущим разработчиком.Если бы кто-то мог буквально поместить решения в код, это было бы здорово.Я получу награду.

Ответы [ 11 ]

10 голосов
/ 12 января 2012

Поместите ваш код onClick в ту же функцию, что и код onSumbit.

UPDATE

В конце вашего onClick кода, который вы return false;, это останавливает нормальное распространение событий и останавливает запуск события onSubmit. Поэтому, если вы хотите, чтобы кнопка отправки отправила форму, удалите return false; из ее обработчика onClick.

Когда вы нажимаете кнопку отправки, вы запускаете событие click для кнопки и событие submit в форме, в которую вложена кнопка (если вы не остановите распространение событий с чем-то вроде return false;) .

Так что вам действительно нужен только обработчик событий submit, который выполняет работу обоих ваших текущих обработчиков.

Кроме того, так как кажется, что у вас есть jQuery Core, включенный в вашу страницу, вы можете прикрепить обработчики событий следующим образом:

$(function () {
    $('#form-id').on('submit', function () {
        var $this = $(this);//$this refers to the form that is being submitted
        jQuery.facebox({
            ajax : 'wishlist.php?emailme=true&name=' + $this.find('#name').val() + '&country=' + $this.find('#country').val() + '&email=' + $this.find('#email').val() + '&department=' + $this.find('#department').val()
        });

        //now we run your normal onSubmit code and return it's return value of this event handler
        return formCheck(this);
    });
});

Если вы отправляете всю форму в функцию jQuery.facebox, то вы можете использовать функцию .serialize() jQuery для создания необходимой строки запроса:

$(function () {
    $('#form-id').on('submit', function () {
        jQuery.facebox({
            ajax : 'wishlist.php?' + $(this).serialize()
        });

        return formCheck(this);
    });
});

Вот демоверсия: http://jsfiddle.net/vAFfj/

Документы для .serialize(): http://api.jquery.com/serialize

Обратите внимание, что .on() является новым в jQuery 1.7 и в этом случае совпадает с .bind() более старых версий.

UPDATE

Если вы хотите проверить возвращаемое значение из функции formCheck() перед запуском плагина facebox, вы можете сделать это:

$(function () {
    $('#form-id').on('submit', function () {

        //check if the form data is valid
        if (formCheck(this) === true) {

            //if the form data is valid then run the facebox plugin
            jQuery.facebox({
                ajax : 'wishlist.php?' + $(this).serialize()
            });

            //also return true to stop running this function
            return true;
        }

        //if the form data is not valid then return false to stop the submission of the form
        return false;
    });
});
2 голосов
/ 12 января 2012

Сделайте так, чтобы функция onclick отправляла форму.

1 голос
/ 22 января 2012

в вашем коде 2 проблемы,

1 - форму можно отправить, нажав «ввод» в любом поле ввода. поэтому событие onclick не будет запущено.

2 - если пользователь нажимает кнопку (при условии, что вы добавили несколько хаков и сработали события onclick и onsubmit), но проверка формы возвращает false, форма не будет отправлена, но событие click быть успешным (вам будет отправлен запрос на wishlist.php)

мое предложение будет таким, как показано ниже,

onsubmit = "readyToSubmit(this); return false"

function readyToSubmit(a){
    if(formCheck(a)){
        jQuery.ajax({
                    url : ...,
                    success : function(data){a.submit()}
        })
    }
}
1 голос
/ 18 января 2012

Прежде всего, вам не нужны оба действия.В вашем сценарии вам нужно использовать только атрибут onSubmit в теге формы.

Во-вторых, было бы намного лучше (по слишком многим причинам), если бы действия над атрибутами содержали ссылки на функции, а невстроенный код.

Тем не менее, я бы изменил код следующим образом:

//some js file included in the page's header
function formSubmitActions(element) {
     if (formCheck(element)) {
         jQuery.facebox({
                ajax : 'wishlist.php?emailme=true&name=' + element.name.value 
                       + '&country=' + element.country.value 
                       + '&email=' + element.email.value
                       + '&department=' + element.dept.value
         });
         return true;
     }
     return false;
}

//the form
<form [...] onsubmit="return formSubmitActions(this)">
[...]

Надеюсь, это поможет!

1 голос
/ 17 января 2012

Я предлагаю вам написать отдельную функцию, которая выполняет ту же задачу, что и событие onClick.

Сначала проверьте, были ли введены все обязательные поля в событии onSubmit, если нет возврата false, если все необходимые полявошел вызов функции, которая выполняет ту же работу, что и функция в событии onClick.

1 голос
/ 16 января 2012

Не уверен, если у вас есть конкретные требования для использования onSubmit() и onclick(), но это может помочь.

Вот HTML-код:

<form id="my_form">
    Name: <input type="text" id="name" size="20" />
    <br />Country: <input type="text" id="country" size="20" />
    <br />Email: <input type="text" id="email" size="20" />
    <br />Department: <input type="text" id="dept" size="20" />
    <br /><input type="submit" id="submit" value="Login" />
</form>

А вот JS:

$(document).ready(function() {
    $('#my_form').submit(function() {

        var name = $('#name').val();
        var country = $('#country').val();
        var email = $('#email').val();
        var dept = $('#dept').val();

        /* Validate everything */
        if (name != '' && country != '' && email != '' && dept != '') {

            /* Validation succeeded. Do whatever. */
            jQuery.facebox({
                ajax : 'wishlist.php?emailme=true&name=' + name + '&country=' + country + '&email=' + email + '&department=' + dept
            });
        }

        else {

            alert('Validation failed.');
        }

        return false;
    });
});

Теперь вы можете сделать две вещи:

1) Если вы используете AJAX для выполнения форм, вы можете оставить return false; во втором- последняя строка, так как это предотвратит отправку вашей формы.

2) Если вы все равно хотите опубликовать форму, просто удалите return false;.Вы также можете опубликовать форму, используя $('#my_form').submit(), когда захотите.

Вот скрипка: http://jsfiddle.net/vAFfj/1/

Надеюсь, это поможет.

0 голосов
/ 23 января 2012

Вы можете сделать одну вещь, просто написать код для отправки вашей формы, например $('#form_id').submit(); вместо return false;. Таким образом, он отправит форму после завершения .onclick() функциональности кода.

0 голосов
/ 23 января 2012

Почему бы просто не собрать их вместе?отправка произойдет при отправке и при нажатии, чтобы вы могли сделать

onsubmit="return formCheck(this);jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&country=\' + this.form.country.value + \'&email=\' + this.form.email.value + \'&department=\' + this.form.department.value) }); return false;"
0 голосов
/ 22 января 2012
.click(function(e)
{
    e.preventDefault();
    // click code
});

.submit(function(e)
{
    // submit code
});

и ajax async param для FALSE

0 голосов
/ 19 января 2012

Вы отправляете форму в событии onclick сейчас (jQuery.facebox ({ajax :), так просто переместите это в обработчик события submit (внизу функции formCheck после всех пройденных проверок)

...