Использование onclick и onsubmit вместе

Question

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

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

onsubmit="return formCheck(this);"

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

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;"

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

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

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

Answer 1

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

ОБНОВЛЯТЬ

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

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

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

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

$(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 функцию, то вы можете использовать функцию jQuery .serialize() функция для создания необходимой строки запроса:

$(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() старых версий.

ОБНОВЛЯТЬ

Если вы хотите проверить возвращаемое значение из 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;
    });
});

Answer 2

Заставьте функцию OnClick отправить форму.

Answer 3

Не уверен, есть ли у вас конкретное требование для использования обоих 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/

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

Answer 4

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

Сначала проверьте, были ли введены все необходимые поля на событии OnSubmit, если нет возврата false иначе, если все необходимые поля были введены, вызовите функцию, которая выполняет ту же задание, что и функция в событии «OnClick».

Answer 5

Прежде всего, вам не нужны оба действия. В вашем сценарии вам нужно только использовать атрибут 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)">
[...]

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

Answer 6

В вашем коде есть 2 проблемы,

1 - Форма может быть отправлена, нажав «Enter» в любом поле ввода. Так что событие OnClick не будет вызвано.

2 - Если пользователь нажимает кнопку (при условии, что вы добавили несколько взломов, и запускаются и события OnClick, и OnSubmit), но форма FormCheck возвращает false, форма не будет отправлено, но событие Click будет успешным ( у вас будет запрос, отправленный на wiselist.php)

Мое предложение было бы как ниже,

onsubmit = "readyToSubmit(this); return false"

function readyToSubmit(a){
    if(formCheck(a)){
        jQuery.ajax({
                    url : ...,
                    success : function(data){a.submit()}
        })
    }
}

Answer 7

Вы отправляете форму в событии Onclick Now (jQuery.facebox ({ajax :) Так просто перенесите это на обработчик событий на отправке (в нижней части функции FormCheck после всех пройденных подтверждений)

Answer 8

.click(function(e)
{
    e.preventDefault();
    // click code
});

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

и ajax async param to false

Answer 9

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

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;"

Answer 10

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

Answer 11

Попробуйте объединить их, как это:

onClick="if (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;"