fill dynamically created text inputs 1

[Tracey]

Hi all

I have a form with a variable number of input boxes, with names [reviewdateX] where X= primary key of record.

A constant text entry box has a calander selection associated with it. When a user fills this constant input with a value from the calander, I would like all the dynamic inputs to receive the same value...

Here is the code around the "constant" input:

<input type=text name=day value="" id=day/>
<a href="" id="trigger1"><img src="/icons/show-calendar.gif" width=15 height=15 border=0></a>
</td>
  <script type="text/javascript">
                 Calendar.setup(
                 {
                     inputField  : "day",      // ID of the input field
                     ifFormat    : "dd/mm/y",    // the date format
                     button      : "trigger1"    // ID of the button
                 });
             </script>

How can I fill these inputs if I dont necessarily know their names, or how many there are, previously?




Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[jemminger]

get all the form fields, then loop through & see if the name attribute is like "reviewdate"...be sure to give your form tag an "id", and pass in the date:

function fillDates(sDate) {
  var f = document.getElementById("myFormId");
  var els = f.elements;
  
  //  loop through form elements
  for (var x = 0; x < els.length; x++) {
    //  if name starts with "reviewdate"
    if (/^reviewdate/i.test(els[x].name)) {
      //  set its value to sDate
      els[x].value = sDate;
    }
  }
}

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

 

[Tracey]

Hi again Jeff

Is Tek-tips your job or do you have a job where you have a lot of spare time??


Thanks for answering (again) but i'm a little stumped on this one. When the user clicks on the icon, the calendar pops up, then once a date is selected it disappears and fills the input.

I have tried calling your function from the onchange event and the onafterupdate events of the input being filled by the calendar, but to no avail. I'm thinking perhaps I need to wade through the calander files and add it somewhere in there but I must say I would rather not if there is another way...
I would prefer to do this automatically on date select.

do you have any recommendations here?



Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[jemminger]

>> Is Tek-tips your job or do you have a job where you have a lot of spare time??
heh...actually i'm so swamped with work my head is spinning...i use tek-tips to 'veg out' or just think about somethind different periodically

i use Mishoo's calendar some too, but i haven't tried using a callback function to do something like this. his documentation describes it further.

btw, you can use a this technique (looping form elements & reading the element names) to accomplish your other post, "check dynamically created inputs"

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

 

[Tracey]

Ok thanks Jeff, I will check out his site and see what i can find.

>>btw, you can use a this technique (looping form elements & reading the element names) to accomplish your other post

thats what I thought... I am currently banging my head against that (success is not exactly biting me on the ...)

Notepad is not helping much either...

function reviewdate(x){
var form = x.form;
var els = form.elements;

    if (x.value==""){
        alert("Please enter a hazard review date");
	return false;
	}

    for (var m = 0; m < els.length; m++){
       if (/^reviewdate/i.test(els[m].name)) 
       {
          if (els[m].value==""){alert("Please enter control review dates");return false;}

        }  //if
    }  //for
}    //function

not working

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[Tracey]

Oh my bad..

it's amazing what a good nights sleep and a pair of glasses do...

Now that I'm using the right input name, it works.. thanks Jeff



Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[Tracey]

Hi Jeff

I'm hoping you are still watching this thread...

According to mishoo's documentation, this is my option:

onUpdate function If you supply a function handler here, it will be called right after the target field is updated with a new date. You can use this to chain 2 calendars, for instance to setup a default date in the second just after a date was selected in the first. null

and i thought, if i can use the function you gave me here somehow this may solve my problem? However, i'm still at a bit of a loss....

the code in my html page looks like:

 <script type="text/javascript">
                 Calendar.setup(
                 {
                     inputField  : "day",      // ID of the input field
                     ifFormat    : "dd/mm/y",    // the date format
                     button      : "trigger1"    // ID of the button
                 });
             </script>

according to the documentation, i would want to add another entry under the button parameter to do this

 <script type="text/javascript">
                 Calendar.setup(
                 {
                     inputField  : "day",      // ID of the input field
                     ifFormat    : "dd/mm/y",    // the date format
                     button      : "trigger1"    // ID of the button
		     onUpdate	: something	
                 });
             </script>

or perhaps

<script type="text/javascript">
                 Calendar.setup(
                 {
                     inputField  : "day",      // ID of the input field
                     ifFormat    : "dd/mm/y",    // the date format
                     button      : "trigger1"    // ID of the button
		     onUpdate(alert("Bugger"));
                 });
             </script>

however, the "something" part is baffling me. do I have the code inline here? (if so, i'm doing something wrong with that it wont work...)
do i call an existing function?

any clues? (hopefully your head has been spinning you towards tek-tips again? )



Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[jemminger]

looks like you just about got it - just don't forget the comma after "button", and your date format syntax is a little off:

<script type="text/javascript">
function something() {
	alert("something");
}
</script>

<script type="text/javascript">
 Calendar.setup(
 {
	inputField  : "day",      // ID of the input field
	ifFormat    : "%d/%m/%y",    // the date format
	button      : "trigger1",    // ID of the button
	onUpdate    : something    //  this fires when the date is selected
 });
</script>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

 

[Tracey]

Hi again Jeff

I'm close but no cigar huh? A couple of things:

1. I really dont know what onUpdate is expecting (ie a call to existing function/inline function

I have tried this:

<script type="text/javascript">
                 Calendar.setup(
                 {
                     inputField  : "day",      // ID of the input field
                     ifFormat    : "dd/mm/y",    // the date format
                     button      : "trigger1",    // ID of the button
                     onUpdate: "fillDates(day.value);" //call to the function
                 });
             </script>

where fillDates is the function in my .js file

function fillDates(sDate) {
if (sDate==""){alert("enter review date");}
  var f = document.getElementById("reviewform");
  var els = f.elements;
  
  //  loop through form elements

  for (var x = 0; x < els.length; x++) {
    //  if name starts with "reviewday"
    if (/^reviewday/i.test(els[x].name)) {
      //  set its value to sDate
      els[x].value = sDate;
    }
  }
}

this has no errors, but also doesnt seem to do anything

2. My dates have been working fine for months and months since I started using this calendar, but i popped your ifFormat param in just because, and that caused syntax errors so I went back to what works.

Have a great day

Tracey


Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[jemminger]

doesn't look like you can easily pass arguments to the callback function in Calendar setup, so here's another way:

<script type="text/javascript">
function fillDates() {
  [b]var sDate = document.getElementById("day").value;[/b]
  
  if (sDate==""){alert("enter review date");}
  
  var f = document.getElementById("reviewform");
  var els = f.elements;
  
  //  loop through form elements

  for (var x = 0; x < els.length; x++) {
    //  if name starts with "reviewday"
    if (/^reviewday/i.test(els[x].name)) {
      //  set its value to sDate
      els[x].value = sDate;
    }
  }
}
</script>

<script type="text/javascript">
 Calendar.setup(
 {
     inputField  : "day",      // ID of the input field
     ifFormat    : "%d/%m/%y",  // the date format
     button      : "trigger1", // ID of the button
     [b]onUpdate    : fillDates   // call to the function[/b]
 });
</script>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }