簡體   English   中英

發送到服務器之前如何處理表單數據?

[英]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);
?>

這是使用jQueryjquery.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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM