Форма отправки / Jquery Event проблема - PullRequest
Новая
       20

Форма отправки / Jquery Event проблема

0 голосов
/ 14 марта 2011

ОК: у меня есть динамическая форма, подобная этой: 

<div id="container">
<div id="autosuggest">...</div>
<form action="" method="post" id="inputForm">
    <table>
        <thead>
            <tr>
                <th>amount</th>
                <th>name</th>
                <th>discount</th>
                <th>vat</th>
                <th>price</th>
                <th>comment</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr id="row1">
                <td><input type="text" name="amountRow1" id="amountRow1" value=""/></td>
                <td>Product name 1 </td>
                <td><input type="text" name="discountRow1" id="discountRow1" value=""/></td>
                <td>
                    <select id="vatRow1" name="vatRow1">
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                        <option value="30">30%</option>
                    </select>
                </td>
                <td><input type="text" name="priceRow1" id="priceRow1" value=""/></td>
                <td><input type="text" name="commentRow1" id="commentRow1" value=""/></td>
                <td><button class="trashButton"></button>
            </tr>
            <tr id="row2">
                <td><input type="text" name="amountRow2" id="amountRow2" value=""/></td>
                <td>Product name 2 </td>
                <td><input type="text" name="discountRow2" id="discountRow2" value=""/></td>
                <td>
                    <select id="vatRow2" name="vatRow2">
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                        <option value="30">30%</option>
                    </select>
                </td>
                <td><input type="text" name="priceRow2" id="priceRow2" value=""/></td>
                <td><input type="text" name="commentRow2" id="commentRow2" value=""/></td>
                <td><button class="trashButton"></button>
            </tr>
        </tbody>
    </table>
    <input type="submit" id="submitForm" name="submitForm" value="submit">
</form>

некоторые вещи, чтобы уточнить:

  1. Каждая строка отличается от другой уникальной отметкой времени, в этом примере она упрощается как row1, row2 и т. Д. *
  2. Контейнер div на самом деле является div, который помещается в jquery-ui-диалог
  3. В autosuggest div есть еще кое-что, что нужно для простого autosuggest
  4. Каждая строка динамически добавляется с помощью автоподстановки, при этом каждая строка уникальна с использованием отметки времени
  5. В каждой строке есть кнопка с class = 'trashButton', которая является кнопкой jquery-ui, очевидная цель кнопки - удалить строку из таблицы.
  6. Для формы не указано значение действия, поскольку форма обрабатывается с помощью ajaxcall

обработчик событий кнопки: 


$(document).ready(function(){
    $(".trashButton").live('click', function(){
        removeProduct(this);
        return false
    });
})

Теперь проблема в следующем:

Когда мой курсор находится в любом поле ввода в таблице, и я нажимаю кнопку ввода. Первый ряд удаляется из таблицы. Независимо от того, где в данный момент находится фокус / курсор, всегда удаляется первая строка.
Дело в том, что ни одна строка не должна быть удалена при нажатии кнопки ввода. Вместо этого, если что-то должно произойти, форма должна попытаться отправить.
С другой стороны, когда мой курсор / фокус находится в автоматически вводимом поле ввода, и я нажимаю ввод: ничего не происходит, что именно то, что я хотел. Когда я нажимаю 'trashButton', удаляется правильная строка: и как она должна работать.

Я отлаживал все, что мог придумать, что могло вызвать проблему, связанную с плагином autosuggest или неправильными закрывающими тегами или чем-то простым и похожим (что я имею в виду, я отладил самые очевидные вещи, которые я мог придумать).

Итак, вкратце: я понятия не имею, почему мой метод removeProduct () вообще срабатывает, или, что еще хуже, постоянно удаляет первую строку вместо фактически сфокусированной строки (что будет иметь больше смысла) , Я не совсем уверен, как перехватить сработавший обработчик событий, когда я нажимаю кнопку ввода, так что я понятия не имею, как отладить это.

Любая помощь или предложения будут высоко оценены,

Приветствия

Bodybag

редактировать:

@ Эд Фрайд: Спасибо за быстрый ответ. Задача решена! Изменил кнопку на якорь, который заставлял энтерпресс запускать форму. Отменена отправка формы с помощью protectDefault (). Но теперь я получил функцию отмены для каждой формы, используя следующее: $("#inputForm").keypress(function(event){ if(event.which===13){ event.preventDefault(); } })

Голосование будет предоставлено, если у меня будет больше представителей xD
Кстати, помощь в новом выпуске была бы более чем хороша,

ура

Ответы [ 2 ]

3 голосов
/ 14 марта 2011

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

два варианта.

первый (и тот, который я выбрал бы)

превратите ваши мусорные кнопки в div, ссылку или какой-то другой элемент. поскольку они на самом деле не должны быть кнопками.

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

1 голос
/ 14 марта 2011

Вы используете IE? В IE представления форм работают немного по-другому. Я думаю, что когда вы нажимаете Enter, он найдет первую кнопку и нажмет ее.

  1. Попробуйте указать действие в форме, возможно, тогда оно правильно выберет вместо кнопки тип ввода = "submit".
  2. Вместо кнопок используйте ссылки для удаления строки. Гораздо проще отделить события от форм.
  3. В общем, для отладки этих вещей просто подключитесь к отправке формы и другим соответствующим событиям. Затем запустите любой отладчик javascript (firebug, Chrome и т. Д.) И установите точки останова на обработчиках событий.

РЕДАКТИРОВАТЬ: (для новой задачи) 

$("#inputForm").submit(function(event){
   if(event.which===13 && $(event.target).attr('id') != "submitForm"){
       event.preventDefault();
   }
})

Извините, я не проверял это, но, надеюсь, это даст вам подсказку в правильном направлении.

...