Отправить данные без кнопки отправки (Javascript/jQuery)

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     <form name="form1" id="form1" action="coillist" method="POST"> 
      <table id="dataTable" border="1"> 
       <tbody> 
        <tr> 
         <th>Coil #</th><th>Width</th><th>Gauge</th> 
        </tr> 

        <tr> 
         <td><input type="text" maxlength="7" size="7" name="coil_id" value="coil_11"></td> 
         <td><input type="text" size="7" name="width" value="120"></td> 
         <td><input type="text" size="5" name="gauge" value="130"></td> 
        </tr> 
        <tr> 
         <td><input type="text" maxlength="7" size="7" name="coil_id" value="coil_22"></td> 
         <td><input type="text" size="7" name="width" value="220"></td> 
         <td><input type="text" size="5" name="gauge" value="330"></td> 
        </tr> 
        <tr> 
         <td><input type="text" maxlength="7" size="7" name="coil_id" value="coil_33"></td> 
         <td><input type="text" size="7" name="width" value="320"></td> 
         <td><input type="text" size="5" name="gauge" value="330"></td> 
        </tr> 
       </tbody> 
      </table> 
     </form> 
    </body> 
</html>

У меня есть динамическая таблица добавления строк, которая может добавить строку в таблицу. Я показываю его в 3 строках, это может быть 1 строка или 4 строки или n строк, если использование хочет добавить данные.Отправить данные без кнопки отправки (Javascript/jQuery)

Мой вопрос: Как я могу отправить данные (coil_id) без щелчка отправить кнопку?

В этом примере я хочу отправить coil_id (coil_id = ”coil_22” в этом случае) на сервер, не используя кнопку отправки.

Это также что-то вроде: обнаружить, если пользователь вводит катушку длиной 7 полукокса или цифры (Ex: coil_22 или 2C12345), то он представит “coil_22” (не coilL_11 или coil_33) на сервер без нажмите любую отправить/отправьте кнопку.

Я использовал JavaScript/jQuery некоторое время, но иногда чувствую себя потерянным.

Высоко цените вашу помощь.

источник

2013-04-26 Frank Zhu

поиск запроса ajax, отправка его в функцию обратного вызова события keyup ввода –

, когда вы хотите отправить эти данные? что-то должно вызвать это. вы можете инициировать отправку (не ajax) с помощью '$ ('# form'). submit()'; –

Вы можете сделать это с .keyup(), просто добавить класс к каждому входу, например

<input type="text" class="coil_input" maxlength="7" size="7" name="coil_id" value="coil_11"> 
<input type="text" class="coil_input" maxlength="7" size="7" name="coil_id" value="coil_22"> 

<script> 
    $('.coil_input').keydown(function() { 
     if($.trim($(this).val()).length == 7){ 
      var now_input_value = $(this).val(); 
      $.post('file.php', {now_input: now_input_value}, function(){ alert('Data sent'); }).fail(function(){ alert('An error has ocurred'); }); 
     } 
    }); 
</script>

Все входы должны иметь один и тот же класс

Не забудьте добавить JQuery в документ.

источник

2013-04-26 17:52:59 Memolition

кажется, что это работает, это приложение J2EE/JSP, так что это будет file.java, я думаю. –

Я думаю, что это должен быть файл .js для работы. Я не уверен, что он будет работать, если он сохранен как .java-файл – Memolition

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

вот пример jquery ajax. serialize создаст строку генерации запроса, которая будет отправлена на ваш URL-адрес.

var datastring = $("#yourForm").serialize(); 
$.ajax({ 
    type: "POST", 
    url: "your url", 
    data: datastring, 
    dataType: "json", 
    success: function(data) { alert('all ok');} 
});

источник

2013-04-26 17:54:08

Я пробовал этот, по какой-то причине он не срабатывает, мне что-то не хватает? Я получаю эту идею, однако, я являюсь новым для ajax. –

Спасибо за помощь. Он срабатывает с некоторой ошибкой после размещения строки «error:». это моя проблема. Я попробую эту идею с другими подобными вещами. –

Отправить данные без кнопки отправки (Javascript/jQuery)

ответ

Смежные вопросы