Issue with a form data html

thevibe · 11-28-2009, 06:28 PM

Hi guys,

I am working on a form and I encountered a problem. I started with a basic form that is attach to a server, so the rules are fixed. The data names can't be change. The form is almost working except for 1 part "date of birth".

This is the code from the basic form for the date of birth;

<input type="text" name="txtContactBDay" size=34>

The problem with this is that if someone is writing 12 january 2004 it won't work, but the user won't know it. The data sent really needs to be in this specific format... mm/dd/yyyy (eg. 10/25/1982 (the forward-slash are really important in the data too)).

So I changed the script to have some option boxes for the year the month and the day. I am wondering how can I write the script that at the end the data gathered is in the good format mm/dd/yyyy and is named "txtContactBDay".

Here's an example of how I scripted the option boxes;

<select name="month" id="date" onchange="return wait_for_load(this, event, function() { editor_date_month_change(this, 'birthday_day','birthday_year'); });">
<option value="na">Month</option>
<option value="1">January</option>...

<select name="day">
<option value="na">Day</option>
<option value="1">1</option>...

<select name="year">
<option value="na">Year</option>
<option value="2009">2009</option>...

Thanks guys !

icio · 11-29-2009, 06:44 AM

You realise that if the user doesn't have JavaScript turned on then your form just fails? You should fix the server script.

If you're sticking to your dropdowns then I recommend adding a hidden txtContactBday with a value based on the dropdowns just before the form is submitted.

To do this, add an onsubmit event to the form element that does something like this:

Code:

<html>
    <head>
        <script type="text/javascript">
        
            function validate()
            {
                var ok = true;
                
                // Check each has a value selected
                ok = ok && document.getElementById("bdayDay").selectedIndex > 0;
                ok = ok && document.getElementById("bdayYear").selectedIndex > 0;
                ok = ok && document.getElementById("bdayMonth").selectedIndex > 0;
                
                // Should probably also check that the value corresponds to a valid date
                // (e.g. not 30th February)
                
                if (!ok)
                {
                    alert("Please select your birthday.");
                    return false;
                }
                
                return true;
            }
        
            function consolidateBirthday(form)
            {
                // Get the elements
                var day = document.getElementById("bdayDay");
                var year = document.getElementById("bdayYear");
                var month = document.getElementById("bdayMonth");
                
                // Get their values
                day = day.options[day.selectedIndex].value;
                year = year.options[year.selectedIndex].value;
                month = month.options[month.selectedIndex].value;
                
                // Construct the date value
                var date = month + '/' + day + '/' + year;
                
                // Create and add the input
                var input = document.createElement("input");
                input.type = "hidden";
                input.name = "txtContactBDay";
                input.value = date;
                
                form.appendChild(input);
                return true;
            }
            
        </script>
    </head>

    <body>
        <noscript>You need to turn on javascript!</noscript>
        <form onsubmit="return validate() &amp;&amp; consolidateBirthday(this)">
            <strong>Birthday:</strong>
                <select id="bdayMonth">
                    <option>Month</option>
                    <option value="1">Jan</option>
                    <option value="2">Feb</option>
                    <option value="3">Mar</option>
                    <option value="4">Apr</option>
                    <option value="5">May</option>
                    <option value="6">Jun</option>
                </select>
                <select id="bdayDay">
                    <option>Day</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                </select>
                <select id="bdayYear">
                    <option>Year</option>
                    <option>1989</option>
                    <option>1990</option>
                    <option>1991</option>
                    <option>1992</option>
                    <option>1993</option>
                    <option>1994</option>
                    <option>1995</option>
                </select>
                <input type="submit" />
        </form>
    </body>
    
</html>

Hope that helps

icio · 11-29-2009, 08:51 PM

In thevibe's form is trying to include this onsubmit action in the following manner:

HTML Code:

<form ... onSubmit="return ValidateRequiredFields();","return validate() &amp;&amp; consolidateBirthday(this)" />

Note that this is invalid HTML, both in that `attribute="",""` makes no sense and `onSubmit` should be the all lowercase `onsubmit`. The form tag should instead resemble:

HTML Code:

<form ... onsubmit="return ValidateRequiredFields() &amp;&amp; validate () &amp;&amp; consolidateBirthday(this);" />

thevibe · 11-29-2009, 09:02 PM

Hi icio, it still doesn't work, but thanks anyway and good luck for your exams !

icio · 11-29-2009, 09:09 PM

The script works fine. Notice this line in my JavaScript script:

Code:

var date = month + '/' + day + '/' + year;

This puts the slashes between the components of the date. So take the slashes out of the your value attributes in the options for the date dropdowns. They are redundant.

thevibe · 11-29-2009, 09:26 PM

THANKS ICIO, you did it again. Everything is working now. You have been really helpful ! Sorry again for the trouble