This topic is locked

Popup window help

1/14/2009 5:15:56 PM
PHPRunner General questions
W
wildwally author

I'm stuck..... <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=10641&image=1&table=forumtopics' class='bbc_emoticon' alt=':blink:' />
I have a page (form) that the user fills in, my intial plan was to use checkboxes and expand sections (more questions) as needed. My problem with this is the page (form) has gotten to big. I'm now thinking along the lines of having the checkboxes activate popup windows with the expanded section (more questions).
With a little web searching I can figure out how to link the checkbox to open the newpageadd.php. However, I don't know how to pass the information along after the original page (form) has been completed. I don't want the data passed until the final point in case the user changes their mind or needs to make a correction. So to hopefully help detail what i just tried to explain out I'll try this:
User logins in and goes to page#1 after they have filled out the main section of page#1 they have a series of checkboxes. The user says he needs such service and checks the checkbox#3. In my mind page#3 now pops up with additional questions pertaining to the service. After the user has filled in the information he then closes page#3 to go back to page#1 and possiblly checks another service (repeat but opens page#4) or submits the page#1 (form). At which point the information on page one is passed to the database and the information on page#3 is also passed to the database. all on the same table.

J
Jane 1/15/2009

Hi,
you can edit add/edit page manually in HTML mode on the Visual Editortab, add a set of fields to the DIV and show or hide this DIV is needed.

Here is a sample:

http://www.asprunner.com/forums/index.php?showtopic=6504

W
wildwally author 1/15/2009

Jane I was successful in my first attempt of doing what you suggested, making things show up as items were checked and not checked. The problem I had with that was linking things to the forms built within PHPrunner. I could create a checkbox through the use of Java Script and link things accordingly, but could not get it to link up with PHPRunners naming convention.
An example of that is here:
<TD class=editshade_lb style="PADDING-LEFT: 10px"

width=250>{$QP_REQUEST_editcontrol}
this code is for a check box, in normal PHP/Java coding the checkbox looks like so:
<input type="checkbox" name="vehicle" value="N"

onClick="toggle(this,'divtochange');"/>
So linking things up to the name is easy, what am i doing wrong to not get it to assign to the PHPRunner name?

J
Jane 1/16/2009

Hi,
I'm not sure that I understand your question.

Please give me more detailed description of what you're doing and what you want to achive.

W
wildwally author 1/16/2009

Hi,

I'm not sure that I understand your question.

Please give me more detailed description of what you're doing and what you want to achive.


I guess I'm just trying to figure out what the actual name is of the checkbox or how to link my own checkbox to a field generated in PHPRunner. In this example:
<TD class=editshade_lb style="PADDING-LEFT: 10px"

width=250>{$QP_REQUEST_editcontrol}
The feild name for this is QP_REQUEST and in the visual editor I made it a checkbox. When I select the checkbox and go into the code section of the visual editor I see what is displayed above, not something I would normally see or expect. Now if I were to create my own checkbox and name it what would I name it so PHPRunner would transfer the value to the data base? Or what name would I need to use to get the custom Java script to look at the PHPRunner generated checkbox value? Here is my example that I have been successful at getting to expand/contract when checked with two text fields.
<input type="checkbox" name="vehicle" value="N"

onClick="toggle(this,'divtochange');"/>

<div id="divtochange" style="display:none;">

<input type="text" name="color" value="test" />

<input type="text" name="shape" value="test" />

</div>

<script language=JavaScript>

<!--//

function toggle(what,targetId)

target = document.getElementById(targetId);

target.style.display = (what.checked)?'':'none'; }

//-->

</SCRIPT>
If I use this code it works but none of it is tied to actual field values within PHPRunner, and I'm not sure what I'm doing wrong with the naming convention. So in my example the checkbox name is QP_REQUEST and lets say the two text boxes I want below it are TEXT1 and TEXT2. These feilds are generated from within PHPRunner, what do I need to change to make things work correctly?

J
Jane 1/20/2009

Hi,
you don't need to create your own checkbox.

To add JavaScript function for your checkbox control (QP_REQUEST field) use following code:

<script>

document.forms.editform.value_QP_REQUEST.onchange=function()

{

//your code here

...

}

</script>

W
wildwally author 1/20/2009

Hi,

you don't need to create your own checkbox.

To add JavaScript function for your checkbox control (QP_REQUEST field) use following code:


This is great news, but now I have to try and figure out how to get the old stuff to work correctly. I'm the blind man feeling my way through a room full of razors when it comes to this stuff.
Thanks.

J
Jane 1/20/2009

Hi,
you can publish your project on Demo Account and open a ticket at http://support.xlinesoft.com sending a URL to your pages and I'll try to help you.

W
wildwally author 1/20/2009

Could you just offer a hypathetical example of how this would work with a DIV, and provide a sample code that works. I'm pretty decent at disecting things that work and making them work after I am able to see it work.
<script>

document.forms.editform.value_QP_REQUEST.onchange=function()

{

//your code here

...

}

</script>
In your example do I need to include the name after the function or inside the brackets? This is why I would like to see a working exampel of a simple DIV and I will be out of your hair for another 24 hours, lol.

J
Jane 1/21/2009

Hi,
find following code in HTML mode on the Visual Editor tab:

{BEGIN FieldName_fieldblock}

<TR style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">

<TD class=editshade_b style="PADDING-LEFT: 15px" width=150>{$label TableName FieldNamel}</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{$FieldName_editcontrol}

</TD></TR>

{END FieldName_fieldblock}



and replace it with this one:

{BEGIN FieldName_fieldblock}

<TRid=hidedivstyle="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">

<TD class=editshade_b style="PADDING-LEFT: 15px" width=150>{$label TableName FieldNamel}</TD>

<TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{$FieldName_editcontrol}

</TD></TR>

{END FieldName_fieldblock}


Then add following JavaScript code:

<script>

document.forms.editform.value_QP_REQUEST.onchange=function()

{

if (document.forms.editform.value_QP_REQUEST.checked)

document.getElementById("hidediv").style.display="none";

else

document.getElementById("hidediv").style.display="inline";

}

</script>

W
wildwally author 1/21/2009

Great example and it works just as wanted. One question though. If I want to hide more than one field what do I need to do? The simple first thought would be to add the " id=HideDiv" to the <TR>'s I want the rules to apply to. I tried it and it didn't work as planned. It only hid the first one. I did some research thinking maybe a <DIV id=HideDiv> prior to the area I want to hide and </DIV> after would work in its place, but checking the box did nothing. Am I on the right track? I know the <TR> applies to the row, so doing something along that line is not going to work.
Maybe if I create a table within a table I could name the table id HideDiv and that would work. I look forward to your reply in the morning.

J
Jane 1/22/2009

Hi,
here is a sample:

<script>

document.forms.editform.value_QP_REQUEST.onchange=function()

{

if (document.forms.editform.value_QP_REQUEST.checked)

{

document.getElementById("hidediv").style.display="none";

document.getElementById("hidediv2").style.display="none";

document.getElementById("hidediv3").style.display="none";

}

else

{

document.getElementById("hidediv").style.display="inline";

document.getElementById("hidediv2").style.display="none";

document.getElementById("hidediv3").style.display="none";

}

}

</script>



Then add id=hidediv2 and id=hidediv2 to the second and third rows.

W
wildwally author 1/22/2009

Hi,

here is a sample:
Then add id=hidediv2 and id=hidediv2 to the second and third rows.


I'll take note of this and use it in the near future. I was able to achieve the desired outcome through the use of a TABLE and creating its id as Hidediv. I also change the order of the display from inline to none & noe to inline. I also changed the onchange to onclick, that way it works if both directions.
I am still having a issue with this. When the page loads the Tables is visible, and I have to check and then uncheck it to make it disappear. Is there a way to set it so that it is hidden on load? And show when the box is checked?

J
Jane 1/23/2009

Hi,
just add style parameter to your HTML code:

id=Hidediv style="display:none;"

W
wildwally author 1/23/2009

Thanks Jane, I was on the right path, just had the coding in the wrong place. Appreciate your help.

W
wildwally author 1/28/2009

Jane whats the proper way to include multiple sections?

This is what you supplied:

<script>

document.forms.editform.value_QP_REQUEST.onchange=function()

{

if (document.forms.editform.value_QP_REQUEST.checked)

{

document.getElementById("hidediv").style.display="none";

document.getElementById("hidediv2").style.display="none";

document.getElementById("hidediv3").style.display="none";

}

else

{

document.getElementById("hidediv").style.display="inline";

document.getElementById("hidediv2").style.display="none";

document.getElementById("hidediv3").style.display="none";

}

}

</script>


This is my example or thought:

<script>

{

document.forms.editform.value_QP_REQUEST.onchange=function()

{

if (document.forms.editform.value_QP_REQUEST.checked)

{

document.getElementById("hidedivqp").style.display="none";

document.getElementById("hidedivqp2").style.display="none";

document.getElementById("hidedivqp3").style.display="none";

}

else

{

document.getElementById("hidedivqp").style.display="inline";

document.getElementById("hidedivqp2").style.display="none";

document.getElementById("hidedivqp3").style.display="none";

}

}

document.forms.editform.value_AE_REQUEST.onchange=function()

{

if (document.forms.editform.value_AE_REQUEST.checked)

{

document.getElementById("hidedivae").style.display="none";

document.getElementById("hidedivae2").style.display="none";

document.getElementById("hidedivae3").style.display="none";

}

else

{

document.getElementById("hidedivae").style.display="inline";

document.getElementById("hidedivae2").style.display="none";

document.getElementById("hidedivae3").style.display="none";

}

}

}

</script>


Any thing special for more than two sections? I know I had to add "{ & }", does it require more per section?

J
Jane 1/28/2009

I'm not sure that I understand your question.

Your code looks correct.