Passing variables by link to a lightBox form

JavaScript
1

I have been been working on this for a while and unable to resolve the issue at hand. I have decided to go to the community to try and get this resolved somehow.

My issue is this:

I have a a query that displays a result set in a table. In one of the columns there is a link with a javascript event that pops up a lightbox form eg:

<a href="javascript:void(0);" onClick="openbox('#Title#', 1)">Bid Project</a>

The problem is 2 fold.

  1. I need to be able to pass a dynamic value in the link above to the lightbox form ie: an ID of a result set.

  2. I would be able to do this by appending it to the link like so:

<a href="http://mysite.com/index.cfm?&jobid=#jobID#" onClick="openbox('#Title#', 1)">Bid Project</a>

But by doing this redirects the page rendering the lightbox in effective.

the JS used to open the box is as below:

function gradient(id, level)
{
    var box = document.getElementById(id);
    box.style.opacity = level;
    box.style.MozOpacity = level;
    box.style.KhtmlOpacity = level;
    box.style.filter = "alpha(opacity=" + level * 100 + ")";
    box.style.display="block";
    return;
}


function fadein(id) 
{
    var level = 0;
    while(level <= 1)
    {
        setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
        level += 0.01;
    }
}


// Open the lightbox


function openbox(formtitle, fadin)
{
  var box = document.getElementById('box'); 
  document.getElementById('filter').style.display='block';

  var btitle = document.getElementById('boxtitle');
  btitle.innerHTML = formtitle;
  
  if(fadin)
  {
     gradient("box", 0);
     fadein("box");
  }
  else
  {     
    box.style.display='block';
  }     
}


// Close the lightbox

function closebox()
{
   document.getElementById('box').style.display='none';
   document.getElementById('filter').style.display='none';
}

And the html form utilized is as below this:

<cfform id="form" name="form" method="post" action="">
							<h1>Bid Project</h1>
							<br>
							<label>Project ID:</label>
						<cfinput type="text" name="jobid" value="#gprojects.jobID#" disabled="true" />
							<label>Bid Amount:
							<span class="small">Enter a valid bid amt.</span>
							</label>
						<cfinput type="text" name="Price" id="Price" value=""  maxlength="15" required="true" validate="noblanks" message="please enter your bid!"/>
							<label>Comments:
							<span class="small">Min. size 1000 chars</span>
							</label>
						<cftextarea name="Description" id="textarea" value="" width="100" cols="60"  maxlength="1000" ></cftextarea>
						<cfinput type="submit" name="submit" class="subbttn" value="Submit Bid" />
						<cfinput type="button" name="submit" class="subbttn"  value="Cancel Bid" onclick="closebox();"/>
						<cfinput type="hidden" name="action" id="action" value="submitted" />
						<cfinput type="hidden" name="userid" id="userid" value="#Session.userid#" />
						<cfinput type="hidden" name="jobid"  value="#url.jobID#" />
						<!--- <button type="submit">Bid Project</button> --->
						<div class="spacer"></div>
					</cfform>

If someone can figure out what i am doing wrong I am extending my appreciation before hand.

Thanks

2

OK so I have figured out half of the problem on my own. I am now having problems passing the js id into the hidden field on the form.

Here is what I used:

I created a function called passtheID() and gave it a value of idval which is passed in by the following link dynamicly:

<a href="javascript:void(0);" onClick="openbox('#Title#', 1); passtheid(#jobID#);">

function passtheid(idval)
{
   document.getElementById('jobid').value=idval;
}

I am able to pass the id to the javascript function but not able to retrieve it by the hidden element to submit the form.

document.getElementById('jobid').value=idval;

Any help would be greatly appreciated…

3

What are those things like #jobID# ? They don’t look like valid javascript to me.

Since most of us don’t have cold fusion resources, what will enable us to help you the most is for us to look at a test web page that demonstrates the problem.

4

Sorruy about the confusion. The Pound signs designate the variable as a dynamic variable that comes from the DB. Has nothing to do with JS at all. In essence I loop over a db and pull out the value using the pound sign constructor. But the problem is not that it is just I can not pass the variable into the hidden field. currently I have the value of the hidden form as such:

<cfinput type="hidden" name="jobid" Id="jobid" value="">
5

Your form has an identifier of “form”, so the standard way to reference that hidden field in the form would be:


var form = document.getElementById('form');
form.elements.jobid.value = 'somevalue';
6

OK so I figured it out. I was missing the loop around the form and also the pound signs within the value of the hidden field. I took them out for some reason and did not replace them back in the form. So the previous code now works as expected:

function passtheid(idval)
{
   document.getElementById('jobid').value=idval;
}

here is the lightbox form:

<cfloop query="gprojects">
	           <cfoutput>
					<cfform id="form" name="bidform" method="post" action="">
							<h1>Bid Project</h1>
							<br>
							<label>Project ID:</label>
						<cfinput type="text" name="jobid" width="8" value="#jobID#" disabled="true" />
							<label>Bid Amount:
							<span class="small">Enter a valid bid amt.</span>
							</label>
						<cfinput type="text" name="Price" id="Price" value=""  maxlength="15" required="true" validate="noblanks" message="please enter your bid!"/>
							<label>Comments:
							<span class="small">Min. size 1000 chars</span>
							</label>
						<cftextarea name="Description" id="textarea" value="" width="100" cols="60"  maxlength="1000" ></cftextarea>
						<cfinput type="submit" name="submit" class="subbttn" value="Submit Bid" />
						<cfinput type="button" name="submit" class="subbttn"  value="Cancel Bid" onclick="closebox();"/>
						<cfinput type="hidden" name="action" id="action" value="submitted" />
						<cfinput type="hidden" name="userid" id="userid" value="#Session.userid#" />
						<cfinput type="hidden" name="jobid" id="jobid"  value="#jobid#" />
						<!--- <button type="submit">Bid Project</button> --->
						<div class="spacer"></div>
					</cfform>
				</cfoutput>
				</cfloop>

Thanks for the help…