[英]How to manipulate form data before sending to server?
我想收集25個計划時間(小時和分鍾)。 用戶將使用下拉框輸入25次。 這意味着25小時25分鍾的下拉框,總共有50個下拉框。 但是我不需要將它們作為單個變量發送。 一個字符串08:05;08:37;09:43;09:59:11:12;12:34
08:37 08:05;08:37;09:43;09:59:11:12;12:34
09:43 08:05;08:37;09:43;09:59:11:12;12:34
都可以。
因此,要發送的變量將類似於-time time=08:05;08:37;09:43;09:59:11:12;12:34
08:05 time=08:05;08:37;09:43;09:59:11:12;12:34
我認為這很容易-用戶按下“提交”按鈕,來自50個下拉框中的所有變量將組成一個字符串,然后發送該字符串。
怎么做? 有任何想法嗎? 有什么建議嗎?
任何與此有關的示例或教程都適用。
選項1-在表單上添加onSubmit。 使用javascript生成字符串並將其設置為隱藏變量。 沒有js框架(如jquery或mootools),這可能很難看。
選項2-使用數組結構。 正常提交表單並使用php腳本解析數組。
<!-- HTML -->
<select name="data[1][hour]">...</select><select name="data[1][minute]">...</select>
<select name="data[2][hour]">...</select><select name="data[2][minute]">...</select>
...
...
<select name="data[25][hour]">...</select><select name="data[25][minute]">...</select>
<?php
// PHP
$data = array();
for ($i=1;$i<=25;$i++){
$data[] = $_POST['data'][$i]['hour'].':'$_POST['data'][$i]['minute']
}
$dataString = implode(';', $data);
?>
這是使用jQuery & jquery.calendrical的解決方案:
<html>
<head>
<title>S.O. 3664773</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://tobiascohen.com/demos/calendrical/jquery.calendrical.js"></script>
<link rel="stylesheet" href="http://tobiascohen.com/demos/calendrical/calendrical.css" />
<script type="text/javascript">
var gEnd = 25;
// borrowed from jquery.calendrical sources
function parseTime(text) {
var match = match = /(\d+)\s*[:\-\.,]\s*(\d+)\s*(am|pm)?/i.exec(text);
if (match && match.length >= 3) {
var hour = Number(match[1]);
var minute = Number(match[2])
if (hour == 12 && match[3]) hour -= 12;
if (match[3] && match[3].toLowerCase() == 'pm') hour += 12;
if (hour < 10) hour = '0' + hour;
if (minute < 10) minute = '0' + minute;
return {
hour: hour,
minute: minute
};
} else {
return null;
}
}
$(document).ready(function() {
$('#time').calendricalTime();
$('#submit-btn').val('End (' + gEnd + ')');
$('#add').click(function() {
var hm = parseTime($('#time').val());
var li = $('<li></li>').text(
hm.hour + ":" +
hm.minute);
$('#input').append(li);
--gEnd;
$('#submit-btn').val('End (' + gEnd + ')');
});
$('#addForm').submit(function() {
var ul = "";
$('#input li').each(function() {
ul += $(this).html() + ";"
});
alert("About to submit: time=" + ul.replace(/;$/, ''));
return false; // don't submit
});
});
</script>
</head>
<body>
<ol id="input">
</ol>
<form id="addForm">
<input id="time" type="text" />
<input type="button" id="add" value="Add"/>
<input type="submit" id="submit-btn" value="End"/>
</form>
</body>
</html>
另一個使用jQuery的示例。 在示例中,您將找到一個提交帶有唯一隱藏字段的“隱藏”表單的選項。 這樣您就可以在POST變量中發送數據,而無需從SELECT
字段中獲取其他50個變量
<!-- your form with your 50 select fields -->
<form id="myform">
<select id="hour1" ...></select>
<select id="min1" ...></select>
<select id="hour2" ...></select>
<select id="min2" ...></select>
...
<select id="hour25" ...></select>
<select id="min25" ...></select>
</form>
<!-- if you want to "simulate" the submission of a form without
your 50 select fields you'll need to include this form and hide it in css -->
<form id="myform2" action="..." method="post">
<input type="hidden" name="myvars" value="" />
</form>
<script type="text/javascript">
jQuery(function($){
// on submit of the #myform form
$('#myform').submit(function(){
// create the unique variable: myvars
var myvars = 'time=';
for(var i=1; i<=25; i++) {
myvars += $('#hour'+i).val() + ':' + $('#min'+i).val() + ';';
}
// if you want to get rid of the last ";" you can add:
myvars = myvars.replace(/^;$/, '');
// you can do whatever you want with "myvars" here
// or make a submission with the hidden form to "simulate"
// the submission of a form with the data in
// a POST variable
$('#myform2 input[name=myvars]').val(myvars);
$('#myform2').trigger('submit');
return false; // to cancel the "normal" submit
});
});
</script>
使用date.getTime()返回自此Date對象表示的格林尼治標准時間1970年1月1日00:00:00以來的毫秒數。 這是一個長值。 您可以將其用','或'|'分隔 (或與此相關的任何其他任意字符)。 在您的服務器上,您可以再次基於該長值啟動時間。 希望能幫助到你!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.