I have an HTML form that I need to post to the server with HTTP POST and input data.
Specifically, I need to send only the parameter values of all the checkboxes that are checked in the form.
I need to do it if the user doesn't do it himself in 10 minutes.
I am not sure the best way to achieve this but for now I am trying to use jQuery do that but sadly I don't know anything about JavaScipt or jQuery so I am trying to learn it but failing to achieve something as simple as that.
I need to the run the following after 10 minutes since the page on which the form is loads.
$("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;
});
});
I am not sure if the code above is correct or not. I am still working on it. Could someone suggest me a guide which I could use to write a timer so that this code runs after the 10 minutes are over since the page loads?
Thanks.
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>
This is the page I am working on and trying to get things work for me.
This will do:
setInterval(submit_me, 600000); // (1000 * 60 * 10 = 600000)
function submit_me() {
$('#form').submit();
}
Shorter version:
setTimeout(function() { $('#form').submit(); }, 5000);
Use 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) is a built in javascript function - it's not part of jQuery or any other library
With a success handler:
$("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);
});
Are anythin working at all? Use console.log() or alert() to follow the code.
You´re passing the document as a string.
$("document").ready(function() { ...
should be
$(document).ready(function() { ...
Regarding the timer to submit the form; your example just bind the ajax post to the forms submit event, it doesn´t submit the form or send the ajax request.
Do you want the form to be submited after 10 minutes? Should the user be able to check/uncheck the checkboxes during that time or should the (unchecked) checkboxes be selected and added to paramNames on document ready?
UPDATE
Created a live example;
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;
};
来源：https://stackoverflow.com/questions/8891735/how-to-set-a-timer-using-jquery-to-sent-http-post-data-of-html-form