Question

I have a form and I need two fields to be the same. I am trying to use javascript to make the second one the same as the first, after the first is set.

Here is the javascript (above my tag)

 <script type="text/javascript" charset="utf-8">    
      function updateDate(){        
      startDate = document.getElementById("startdate").value;      
      document.getElementById("enddate").value = startDate;
 } </script>

and the HTML is as follows:

 <span class="em-events-search-dates em-date-range">
 <input type="text" id="startdate" class="em-date-input-loc em-date-start" onchange="updateDate();" />
 <input type="hidden" class="em-date-input" name="scope[0]" value="<?php if( !empty($_REQUEST['scope'][0]) ) echo $_REQUEST['scope'][0]; ?>" />
 <input type="text" id="enddate" class="em-date-input-loc em-date-end" />
 <input type="hidden" class="em-date-input" name="scope[1]" value="<?php if( !empty($_REQUEST['scope'][1]) ) echo $_REQUEST['scope'][1]; ?>" />
 </span>

The issue I’m having is that when you click the form field, it opens a date selector. I’m pretty sure it uses this exact plugin http://jqueryui.com/demos/datepicker/

Unfortunately, this means that you never actually click the form field after the date is selected, and you never type anything.

I tried onmouseout on the second field (the hidden one with class em-date-input)
I tried onchange on the first element with id startdate

There are a few that work, only if you go back and click the visible field with the date selected. The problem is, a user will never do this.

I even tried putting onsubmit=”updateDate();” on the submit button, hoping that when you clicked it it would change the second date before submitting the form.. No luck. Any suggestions?

EDIT: Added alerts to see what was working and what wasn’t

 <input type="text" onchange="alert('first');" id="startdate" class="em-date-input-loc em-date-start" />
 <input type="hidden" onchange="alert('second');" class="em-date-input" name="scope[0]" value="<?php if( !empty($_REQUEST['scope'][0]) ) echo $_REQUEST['scope'][0]; ?>" />
 <input type="text" onchange="alert('third');" id="enddate" class="em-date-input-loc em-date-end" />
 <input type="hidden" onchange="alert('fourth');" class="em-date-input" name="scope[1]" value="<?php if( !empty($_REQUEST['scope'][1]) ) echo $_REQUEST['scope'][1]; ?>" />

When I change the date on the second box (id=”enddate”) it fires the third alert. No other alerts fire, even when I change the date in the first box multiple times, or by typing.

Answer 1

If I understood your question then you may want this (confused a little about your question)

$(function(){
    $('#startdate, #enddate').datepicker();
    $('#startdate').on('change', function(e){
        $('#enddate').val($('#startdate').val());
    });
});​

Demo or This One.