Setting value with Javascript

Question

I have this code:

<html>
<head>

<script type="text/javascript">

/***********************************************
* Drop Down Date select script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/

var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];

function populatedropdown(dayfield, monthfield, yearfield){
     var today=new Date()
     var dayfield=document.getElementById(dayfield)
     var monthfield=document.getElementById(monthfield)
     var yearfield=document.getElementById(yearfield)
     for (var i=0; i<31; i++)
         dayfield.options[i]=new Option(i, i+1)
     dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
     for (var m=0; m<12; m++)
         monthfield.options[m]=new Option(monthtext[m], monthtext[m])
     monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
     var thisyear=1920;  // fixed start year of 1900
     var nowyear = 1994;
     var diff = nowyear - thisyear +1; // number of years from 1900
     for (var y=0; y<diff; y++){
         yearfield.options[y]=new Option(thisyear, thisyear)
         thisyear+=1
     }
}
</script>

<script>
function getcombined(){
    var year = document.getElementbyId("yeardropdown").value;
    var month = document.getElementById("monthdropdown").value;
    var day = document.getElementById("daydropdown").value;
    var combineddob = year + "-" + "month" + "-" + day;
    document.getElementById("hidden1").value=combineddob
}
</script>


</head>

<body>
<form action="" name="someform">
<select id="daydropdown" name='day' value="daydropdown">
</select> 
<select id="monthdropdown" name='month' value="monthdropdown">
</select> 
<select id="yeardropdown" name='year'  value="yeardropdown">
</select> 
<input type='hidden' id='hidden1' name='dob' value="" />
<input type='submit' />
</form>

<script type="text/javascript">

window.onload=function(){
    populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>


</body>
</html>

I need the <input type='hidden' id='hidden1' name='dob' value='' /> to update to var combineddob when the form is submitted.

I have tried several methods, but I do not know much about javascript so I am not good with these kinds of fixes.

I may be over looking something, but I have not yet figured out what is wrong here.

stewbasic · Accepted Answer · 2012-10-01 23:58:55Z

2

If you want something to happen before a user submits the form, you should set the onsubmit property of the form. In this case:

<script>
<!--
function getcombined(){
    var year = document.getElementById("yeardropdown").value;
    var month = document.getElementById("monthdropdown").value;
    var day = document.getElementById("daydropdown").value;
    var combineddob = year + "-" + month + "-" + day;
    document.getElementById("hidden1").value=combineddob;
    return true;
}
-->
</script>


</head>

<body>
<form action="" name="someform" onsubmit='return getcombined();'>

I've added "return true" to the function to indicate that the form should actually submit afterwards. Also I fixed two typos, namely a lower case b in getElementbyId and a missing semicolon.

answered Oct 1, 2012 at 23:58

stewbasic

8617 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Travis J · Accepted Answer · 2012-10-01 23:52:37Z

1

change your html

<input type='submit' />

to this

<input type='submit' id="submitButton" />

and in your script

window.onload = function(){
    populatedropdown("daydropdown", "monthdropdown", "yeardropdown");
    var submitBtn = document.getElementById("submitButton");
    submitBtn.onsubmit = function(){getcombined();};
};

This will allow you to run the function in onsubmit when the submit button is clicked. It will in turn call the function getcombined(); and then submit the form.

EDIT

Perhaps you should change these two lines:

var combineddob = year + "-" + "month" + "-" + day;
document.getElementById("hidden1").value=combineddob

to

var combineddob = year + "-" + month + "-" + day;
document.getElementById("hidden1").value=combineddob;

and

var year = document.getElementbyId("yeardropdown").value;

to (note that getElementbyId is not a function)

var year = document.getElementById("yeardropdown").value;

edited Oct 1, 2012 at 23:52

answered Oct 1, 2012 at 23:45

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

3 Comments

kira423 Over a year ago

Unfortunately that seems to not be working, is there an error in my getcombined function possibly..

maestr0 Over a year ago

There is a typo: getElementbyId but should be getElementById in your getcombined function. change this line var year = document.getElementbyId("yeardropdown").value; to var year = document.getElementById("yeardropdown").value;

kira423 Over a year ago

it is not changing the value, in the url it just says dob= leaving it null

Koerr · Accepted Answer · 2012-10-01 23:53:28Z

1

First of all:

var year = document.getElementbyId("yeardropdown").value;

to:

var year = document.getElementById("yeardropdown").value;

Add onclick in submit button:

<input type='submit' onclick="getcombined();alert(hidden1.value);" />

answered Oct 1, 2012 at 23:53

Koerr

15.8k29 gold badges81 silver badges109 bronze badges

2 Comments

RobG Over a year ago

The listener should be on the form's submit handler, not the button (see stewbasic's answer).

Koerr Over a year ago

You are right @RobG,actually I want to show how to setting value in a button

Collectives™ on Stack Overflow

Setting value with Javascript

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related