SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    passing variables by link to a lightBox form

    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:
    Code:
    <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:
    Code:
    <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:

    Code:
    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:

    Code:
    <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. #2
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <a href="javascript:void(0);" onClick="openbox('#Title#', 1); passtheid(#jobID#);">
    Code:
    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.

    Code:
    document.getElementById('jobid').value=idval;
    Any help would be greatly appreciated....

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <cfinput type="hidden" name="jobid" Id="jobid" value="">

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Your form has an identifier of "form", so the standard way to reference that hidden field in the form would be:

    Code javascript:
    var form = document.getElementById('form');
    form.elements.jobid.value = 'somevalue';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    function passtheid(idval)
    {
       document.getElementById('jobid').value=idval;
    }
    here is the lightbox form:
    Code:
    <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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •