ansaurus

Question

How to manipulate form data before sending to server?

Answer 1

A:

Use date.getTime() which returns the number of milliseconds since January 1, 1970, 00:00:00 GMT represented by this Date object. 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!

Michel Triana 2010-09-08 05:39:37

Answer 2

+1 A:

Option 1 - add onSubmit even to the form. Using javascript generate the string and set it to the hidden variable. This can get ugly without JS Framework like jquery or mootools.

Option 2 - use array structure. submit form as normal and parse arrays using php script.

<!-- 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);
?>

Alex 2010-09-08 05:46:20

Answer 3

+1 A:

Here's a solution using jQuery & jquery.calendrical:

<html>
<head>
    <title>S.O. 3664773</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
    <script src="http://tobiascohen.com/demos/calendrical/jquery.calendrical.js"&gt;&lt;/script&gt;
    <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>

RC 2010-09-08 05:51:07

Answer 4

+1 A:

Another example using 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

<!-- 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>

Ben 2010-09-08 06:25:26

ansaurus

tags:

views:

answers:

How to manipulate form data before sending to server?

related questions