Как установить таймер с помощью jQuery для отправки HTTP-данных поста в HTML-форме - PullRequest
Новая
       52

Как установить таймер с помощью jQuery для отправки HTTP-данных поста в HTML-форме

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

У меня есть HTML-форма, которую нужно отправить на сервер с HTTP POST и входными данными.

В частности, мне нужно отправлять только значения параметров всех флажков, которые отмечены в форме.

Мне нужно сделать это, если пользователь не сделает это сам в течение 10 минут.

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

Мне нужно выполнить следующее через 10 минут после загрузки страницы, на которой загружена форма. 

    $("document").ready(function() {            
        var checkedInputElements = $(":input[value=true]");
        var paramNames = [];
        jQuery.each(checkedInputElements, function() {
            var paramName = $(this).attr("name");
            paramNames.push(paramName);
        });
        $("form").submit(function() {
            jQuery.post({
              type: 'POST',
              url: "http://localhost:8080/wickedlynotsmart/auto-submit-form",
              data: paramNames
          });
          return true;
        });
    });

Я не уверен, верен ли код выше или нет. Я все еще работаю над этим. Может ли кто-нибудь предложить мне руководство, которое я мог бы использовать для написания таймера, чтобы этот код запускался через 10 минут после загрузки страницы?

Спасибо.

EDIT 

<%@ include file="/WEB-INF/views/include.jspf" %>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>wikedlynotsmart.com</title>
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/syntaxhighlighter/styles/shCore.css" />" />
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/syntaxhighlighter/styles/shThemeDefault.css" />" />

    <script type="text/javascript" src="<c:url value="/resources/syntaxhighlighter/scripts/shCore.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/syntaxhighlighter/scripts/shBrushJava.js" />"></script>
    <script type="text/javascript">
         SyntaxHighlighter.all()
    </script>
    <script type="text/javascript" >
        //auto-submit-form javascipt code
    </script>   
</head>
<body>
    <jsp:include page="/WEB-INF/views/header.jsp" />
    <div id="thing">
        <form id="form" action="<c:url value="/wikedlynotsmart/auto-submit-form" />" method="post">             
            <ol>
                <c:forEach items="${things}" var="thing">
                    <li>${thing.something}</li>
                    <c:forEach items="${matters}" var="matter">
                        <table>         
                            <tr>
                                <td><input type="checkbox" name="tid${thing.id}-mid${matter.id}" value="true"/></td>
                                <td>${matter.somematter}</td>
                            </tr>       
                        </table>                    
                    </c:forEach><br></br>
                </c:forEach>        
            </ol>   
            <input type="submit" value="submit the thing" class="button"/>
        </form>
    </div>
    <jsp:include page="/WEB-INF/views/footer.jsp" />    
</body>
</html>

Это страница, над которой я работаю и пытаюсь заставить меня работать.

Ответы [ 3 ]

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

Это будет делать: 

setInterval(submit_me, 600000); // (1000 * 60 * 10 = 600000)

function submit_me() {

    $('#form').submit();

}

Укороченная версия: 

setTimeout(function() { $('#form').submit(); }, 5000);
1 голос
/ 17 января 2012

Что-нибудь работает вообще?Используйте console.log() или alert() для следования коду.

Вы передаете document в виде строки. 

$("document").ready(function() { ...

должно быть 

$(document).ready(function() { ...

Относительно таймера для отправки формы;ваш пример просто связывает сообщение ajax с событием отправки формы, оно не отправляет форму и не отправляет запрос ajax.

Хотите, чтобы форма была отправлена ​​через 10 минут?Должен ли пользователь иметь возможность устанавливать / снимать флажки в течение этого времени или флажки (не отмеченные) должны быть установлены и добавлены в paramNames при готовности документа?

ОБНОВЛЕНИЕ

Создан живой пример ;

HTML 

<form id="myForm">
    1 <input type="checkbox" name="checkbox1" />
    2 <input type="checkbox" name="checkbox2" />
    3 <input type="checkbox" name="checkbox3" />
    <input type="submit" value="submit form" />
</form>

Javascript 

$(document).ready(function() {

    console.log('document ready'); // DEBUG

    setTimeout(function() {

        console.log('setTimeout()'); // DEBUG
        submitForm();

    }, 1000 * 5); // 5 seconds

    $('#myForm').submit(function() {
        console.log('submit event'); // DEBUG
        submitForm();
    });

});

var submitForm = function() {

    console.log('submitForm()'); // DEBUG

    var $checkedInputElements = $('input[type="checkbox"]:checked');
    var paramNames = [];

    $checkedInputElements.each(function() {
        paramNames.push($(this).attr("name"));
    });

    console.log('paramNames =', paramNames); // DEBUG

    jQuery.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: paramNames,
        complete: function(jqXHR, textStatus) {
            console.log('Done: ', textStatus); // DEBUG
            $('input[type="checkbox"]').attr('disabled', true);
        }
    });

    return true;
};
1 голос
/ 17 января 2012

Использование setTimeout(function, millisDelay)

$("document").ready(function() {            
    setTimeout(function(){
        var checkedInputElements = $(":input[value=true]");
        var paramNames = [];
        jQuery.each(checkedInputElements, function() {
            var paramName = $(this).attr("name");
            paramNames.push(paramName);
        });
        $("form").submit(function() {
            jQuery.post({
              type: 'POST',
              url: "http://localhost:8080/wickedlynotsmart/auto-submit-form",
              data: paramNames
          });
          return true;
        });
    }, 600000);
});

NB. setTimeout(function, millisDelay) - это встроенная функция javascript - она ​​не является частью jQuery или какой-либо другой библиотеки

С обработчиком успеха: 

$("document").ready(function() {            
    setTimeout(function(){
        var checkedInputElements = $(":input[value=true]");
        var paramNames = [];
        jQuery.each(checkedInputElements, function() {
            var paramName = $(this).attr("name");
            paramNames.push(paramName);
        });
        $("form").submit(function() {
            jQuery.post({
              type: 'POST',
              url: "http://localhost:8080/wickedlynotsmart/auto-submit-form",
              data: paramNames,
              success: function(data, textStatus, jqXHR) {
                  alert(data); //data contains the response from the servlet you posted to.
                  document.location = "http://Where-I-want-to-redirect-to";
              }
          });
          return true;
        });
    }, 600000);
});
...