简体   繁体   English

发送到服务器之前如何处理表单数据?

[英]How to manipulate form data before sending to server?

I want to collect 25 schedule times (hour and minutes). 我想收集25个计划时间(小时和分钟)。 User will input 25 times using drop down boxes. 用户将使用下拉框输入25次。 That means, 25 hour and 25 minutes drop down boxes, making total 50 drop down boxes. 这意味着25小时25分钟的下拉框,总共有50个下拉框。 But I don't need to send them as individual variables. 但是我不需要将它们作为单个变量发送。 One string like- 08:05;08:37;09:43;09:59:11:12;12:34 will do. 一个字符串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都可以。

So, the variable to send will be like- time=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

I think it will be easy - user presses submit button, all the variables from 50 drop down boxes will make a string and then send that string. 我认为这很容易-用户按下“提交”按钮,来自50个下拉框中的所有变量将组成一个字符串,然后发送该字符串。

How to do that? 怎么做? any ideas? 有任何想法吗? any suggestion? 有什么建议吗?

Any example or tutorial on this is appriciated. 任何与此有关的示例或教程都适用。

Option 1 - add onSubmit even to the form. 选项1-在表单上添加onSubmit。 Using javascript generate the string and set it to the hidden variable. 使用javascript生成字符串并将其设置为隐藏变量。 This can get ugly without JS Framework like jquery or mootools. 没有js框架(如jquery或mootools),这可能很难看。

Option 2 - use array structure. 选项2-使用数组结构。 submit form as normal and parse arrays using php script. 正常提交表单并使用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);
?>

Here's a solution using jQuery & jquery.calendrical : 这是使用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>

Another example using jQuery. 另一个使用jQuery的示例。 You'll find in the example an option to submit a "hidden" form with a unique hidden field. 在示例中,您将找到一个提交带有唯一隐藏字段的“隐藏”表单的选项。 That allows you to send your data in a POST variable without the 50 others variables from the SELECT fields 这样您就可以在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>

Use date.getTime() which returns the number of milliseconds since January 1, 1970, 00:00:00 GMT represented by this Date object. 使用date.getTime()返回自此Date对象表示的格林尼治标准时间1970年1月1日00:00:00以来的毫秒数。 That is a long value. 这是一个长值。 You can use that separated by ',' or '|' 您可以将其用','或'|'分隔 (or any other arbitrary character for that matter). (或与此相关的任何其他任意字符)。 On your server you can initiate a your times based off that long value again. 在您的服务器上,您可以再次基于该长值启动时间。 Hope it helps! 希望能帮助到你!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM