Javascript duplicate form input

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.

Rating: 1 out of 5 based on 3 ratings

Posts Related to Javascript duplicate form input

• Jul 14th, 2012 Deleting both values from array if duplicate - JavaScript/jQuery Saturday AM 11:01:35


• Jul 26th, 2012 php - form data not getting passed Thursday PM 14:47:34


• Jul 19th, 2012 behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM? Thursday AM 04:25:23


• Jul 14th, 2012 jquery - Javascript?:How to dynamically add text inputs/form fields to a HTML form? Saturday AM 06:41:50


• Jul 17th, 2012 php - If radio button checked, then submit to different page Tuesday AM 11:50:18


• Aug 11th, 2012 html - Submitting a form with different values using javascript Saturday AM 01:45:11


• Aug 16th, 2012 javascript - Sending both the value and key of an option box as parameters? Thursday AM 08:53:39


• Jul 09th, 2012 html5 required and jquery submit() Monday AM 07:44:28


• Jul 23rd, 2012 Creating Form dynamically with Javascript Monday PM 14:10:35


• Jul 16th, 2012 javascript - form submits before validation in php Monday AM 05:59:17

The post Javascript duplicate form input appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-duplicate-form-input.html