Forums

Please write a review for the extension you are using on the Joomla extensions directory before posting a new question as we are being spammed by many negative reviews.

Thank you for your support!

multiple page form

ho
hoepala 08 Feb, 2007
Hai!
Thanks for your great product.

I wonder if i can make something like this [list]http://maximalehypotheek.nbgfinance.com
[/list]

If i put the code in the form manager i get this [list]http://81.26.209.93/~heutink/index.php?option=com_chronocontact&chronoformname=Hypotheektoets&Itemid=28[/list]

The form is missing validation! and calculation.
The other thing is i want to add a contactform on the resultpage form this mortgage calculation.

htmlcode 
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">    <html>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<head>
            <title></title>
            <style>
BODY {
	scrollbar-arrow-color:#878F9E;
	scrollbar-track-color:#EEEEEE;
	scrollbar-face-color:#FFFFFF;
	scrollbar-highlight-color:#FFFFFF;
	scrollbar-shadow-color:#FFFFFF;
	scrollbar-3dlight-color:#CCCCCCC;
	scrollbar-darkshadow-color:#CCCCCC;
        font-family : Arial, Verdana, Geneva;
	font-size: 8;
}

input.textInput,input.textInputMedium,input.textInputLarge
{
    BACKGROUND-COLOR: #FFFFFF;
    BORDER-BOTTOM: #F18C33 1px solid;
    BORDER-LEFT: #F18C33 1px solid;
    BORDER-RIGHT: #F18C33 1px solid;
    BORDER-TOP: #F18C33 1px solid;
    COLOR: #000000;
    FONT-FAMILY: Verdana;
    FONT-SIZE: 11px;
    PADDING-BOTTOM: 1px;
    PADDING-LEFT: 1px;
    PADDING-RIGHT: 1px;
    PADDING-TOP: 1px;
}

option
{
   COLOR: #F16E33;
}

select
{
   FONT-FAMILY: Verdana;
   FONT-SIZE: 11px;
}

TD
{
	font-family : Arial, Verdana, Geneva;
	font-size : 11px;
	color : #000000;
	Text-decoration:none;
	text-weight : normal;
	LINE-HEIGHT: 18px;
}

A
{
	font-family : Arial, Verdana, Geneva;
	font-size : 11px;
	color : #000000;
	text-decoration : underline;
	text-weight : normal;
	LINE-HEIGHT: 18px;
}

TABLE.invoer1,TABLE.invoer2,TABLE.resultaat1,TABLE.resultaat2
{
	width:100%;
}

TD.resultaat1
{
 width:70%;
}

TD.resultaat2
{
	width:30%;
}

TD.subresultaat
{
	color : #000000;
}

TD.vraag1
{
	width:70%;
}

TD.vraag2
{
	width:30%;
}

</style>
            <Style>A.previousButton:hover
            {background-color: transparent; text-decoration: none;}}
            </Style>
            <script src="scripts/utils.js"></script>
<script>
    var sInfoUrl='../index.html';
</script>        </head>
        <body onkeypress="checkKey()" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
                    <table cellpadding="0" cellspacing="0">
            	<tr>
            	    <td valign="top">
<table cellpadding="0" cellspacing="0"><tr colspan="3" height="10"><td> </td></tr>
<tr><td width="10"> </td><td>











<br><img src="images/kop-maxhypotheek.gif"/><br><br>
Vul de onderstaande velden in voor het berekenen van uw maximale hypotheekbedrag.

<form name="hmh4invoer1Form" method="POST" action="http://maximalehypotheek./" onsubmit="return vCheckSubmit();">
<table class="invoer1">

 	<tr><td class="resultaat1" valign="top">Geboortedatum (ddmmjjjj)</td><td class="resultaat2" nowrap valign="top">
 	<input type="text" name="geboortedatum" maxlength="10" size="10" value="" class="textInput">
 	</td></tr>

    <tr><td class="resultaat1" valign="top">Uw jaarsalaris</td><td class="resultaat2" nowrap valign="top">
        <input type="text" name="brutojaarinkomen" maxlength="10" size="10" value="0" class="textInput">
        <a href="#" onclick="vOpenWindow('invoerveld.brutojaarinkomen');return false;" tabindex="999"><img src="images/questionIcon.gif" alt="?" class="question" border="0"></a>
    </td></tr>

	<tr><td class="resultaat1" valign="top">Geboortedatum partner (ddmmjjjj)</td><td class="resultaat2" nowrap valign="top">
	<input type="text" name="geboortedatumpartner" maxlength="10" size="10" value="" class="textInput">
	</td></tr>

    <tr><td class="resultaat1" valign="top">Jaarsalaris partner</td><td class="resultaat2" nowrap valign="top">
        <input type="text" name="brutojaarinkomenpartner" maxlength="10" size="10" value="0" class="textInput">
        <a href="#" onclick="vOpenWindow('invoerveld.brutojaarinkomenpartner');return false;" tabindex="999"><img src="images/questionIcon.gif" alt="?" class="question" border="0"></a>
    </td></tr>

	<tr><td class="resultaat1" valign="top">Jaarlijkse rente en aflossing voor kredietverlening</td><td class="resultaat2" nowrap valign="top">
	<input type="text" name="lastenkredietverlening" maxlength="10" size="10" value="0" class="textInput">
        <a href="#" onclick="vOpenWindow('invoerveld.lastenkredietverlening');return false;" tabindex="999"><img src="images/questionIcon.gif" alt="?" class="question" border="0"></a>
	</td></tr>

 </table>

<input type="hidden" name="update" value="false">
<table class="invoer2">
    <tr><td width="50%" align="left"></td><td width="50%" align="right"><input type="image" class="submit" align="right" name="submit" src="images/nextButton.gif" border="0"></td></tr>
</table>
</form>
<script language="JavaScript" type="text/javascript">
  <!--
    document.forms["hmh4invoer1Form"].elements["geboortedatum"].focus()
  // -->
</script>





        </td><td width="10"> </td></tr>
<tr height="10" colspan="3"><td> </td></tr></table>
                    </td>
                </tr>
            </table></body>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
</html>


js-code
    var oInfoWindow;

    function checkKey() {
      var key = event.keyCode;
      // Only handle key if field is not textarea
        if (document.activeElement)
            if (document.activeElement.nodeName)
                if (document.activeElement.nodeName.toUpperCase())
                    if ((document.activeElement.nodeName.toUpperCase() != "TEXTAREA"«») && (key == 13))
                    {    
                        if (document.forms)
                            if (document.forms[0])
                            {
                                if (!vCheckSubmit())
                                    return;
                                if (document.forms[0].all)
                                    if (document.forms[0].all.submit) 
                                    {
                                        document.forms[0].all.submit.focus();
                                    }
                                document.forms[0].submit();
                            }
                     }
    }
    
    var bSubmitted=false;
    
    function vCheckSubmit()
    {
        if (bSubmitted)
        {
            return false;
        }
        bSubmitted=true;
        setTimeout('bSubmitted=false;',4000);
        return true;
    }
    
    function vOpenWindow(sParam,iWidth,iHeight,xPos,yPos)
    {
		if (typeof iWidth=="undefined"«»)
		{
			var iWidth='400';
		}
		if (typeof iHeight=="undefined"«»)
		{
			var iHeight='200';
		}
		if (typeof xPos=="undefined"«»)
		{
			var xPos='300';
		}
		if (typeof yPos=="undefined"«»)
		{
			var yPos='200';
		}
		var sRealUrl=sInfoUrl;
		if (sRealUrl.indexOf("i="«»)==(sRealUrl.length+2))
		{
			sRealUrl+=sParam;
		}
		else
		{
			if (sInfoUrl.indexOf("i="«»)>-1)
			{
				
				sRealUrl=sInfoUrl.substring(0,sInfoUrl.indexOf("i="«»)+2)+sParam;
				if ((sInfoUrl.indexOf("i="«»)+2)<sInfoUrl.length)
				{
					sRealUrl+=sInfoUrl.substring(sInfoUrl.indexOf("i="«»)+2);
				}
			}
			else
			{
				if (sRealUrl.indexOf("?"«»)>-1)
				{
					sRealUrl+="&";
				}
				else
				{
					sRealUrl+="?";
				}
				sRealUrl+="i="+sParam;
			}
		}
        if (typeof oInfoWindow=="undefined"«»)
        {
//            oInfoWindow=window.open(sRealUrl,'infopopup','status=0,directories=0,hotkeys=0,location=0,menubar=0,toolbar=0,width='+iWidth+',height='+iHeight+',screenX='+xPos+',screenY='+yPos);
            oInfoWindow=window.open(sRealUrl,'infopopup','status=0,directories=0,hotkeys=0,location=0,menubar=0,toolbar=0,width='+iWidth+',height='+iHeight);
        }
        else
        {
            if (oInfoWindow.closed)
            {
//                oInfoWindow=window.open(sRealUrl,'infopopup','status=0,directories=0,hotkeys=0,location=0,menubar=0,toolbar=0,width='+iWidth+',height='+iHeight+',screenX='+xPos+',screenY='+yPos);
                oInfoWindow=window.open(sRealUrl,'infopopup','status=0,directories=0,hotkeys=0,location=0,menubar=0,toolbar=0,width='+iWidth+',height='+iHeight);
            }
            else
            {
                oInfoWindow.location.href=sRealUrl;
            }
        }
        oInfoWindow.resizeTo(iWidth,iHeight);
//        oInfoWindow.moveTo(xPos,yPos);
        oInfoWindow.focus();
    }
    function vOpenWindowUrl(sUrl,iWidth,iHeight,xPos,yPos)
    {
		if (typeof iWidth=="undefined"«»)
		{
			var iWidth='400';
		}
		if (typeof iHeight=="undefined"«»)
		{
			var iHeight='200';
		}
		if (typeof xPos=="undefined"«»)
		{
			var xPos='300';
		}
		if (typeof yPos=="undefined"«»)
		{
			var yPos='200';
		}
        var oInfoWindowUrl=window.open(sUrl,'_blank','status=0,directories=0,hotkeys=0,location=0,menubar=0,toolbar=0,scrollbars=yes,width='+iWidth+',height='+iHeight+',screenX='+xPos+',screenY='+yPos);
        oInfoWindowUrl.resizeTo(iWidth,iHeight);
        oInfoWindowUrl.focus();
    }
Max_admin 10 Feb, 2007
hi,

Plz put the JsCode in the javascript text box, for the html code, plz remove the <form....> and </form> tags and put the code in the html box.

put onsubmit="return
vCheckSubmit();" in the form tag attachement field, finally hover over the left blue icons on the form edit page to know more tips about every option, the component is easy and every part is commented.

I wish this helps.🙂

Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
ho
hoepala 13 Feb, 2007
i tried different things but it does't work.. maybe it is better to make it a paidjob for you because i need it with a week.
et
ethan 15 Feb, 2007
I can offer to help you. contact me at voonchong (at) gmail.com
Max_admin 15 Feb, 2007
Hi, Sorry but Iam very busy for somedays now and cant reply but here is a quick reply🙂 :

#1 - put all the jscode here in the javascript box of the form.

#2- the <style></style> tags and everything between then inside the HTML box of the form.

#3- put this code in the HTML box too : 


<table class="invoer1">



     <tr><td class="resultaat1" valign="top">Geboortedatum (ddmmjjjj)</td><td class="resultaat2" 
nowrap valign="top">

     <input type="text" name="geboortedatum" maxlength="10" size="10" value="" class="textInput">

     </td></tr>



    <tr><td class="resultaat1" valign="top">Uw jaarsalaris</td><td class="resultaat2" nowrap 
valign="top">

        <input type="text" name="brutojaarinkomen" maxlength="10" size="10" value="0" class="
textInput">

        <a href="#" onclick="vOpenWindow('invoerveld.brutojaarinkomen');return false;" tabindex="
999"><img src="images/questionIcon.gif" alt="?" class="question" border="0"></a>

    </td></tr>



    <tr><td class="resultaat1" valign="top">Geboortedatum partner (ddmmjjjj)</td><td class="
resultaat2" nowrap valign="top">

    <input type="text" name="geboortedatumpartner" maxlength="10" size="10" value="" class="
textInput">

    </td></tr>



    <tr><td class="resultaat1" valign="top">Jaarsalaris partner</td><td class="resultaat2" nowrap 
valign="top">

        <input type="text" name="brutojaarinkomenpartner" maxlength="10" size="10" value="0" class="
textInput">

        <a href="#" onclick="vOpenWindow('invoerveld.brutojaarinkomenpartner');return false;" 
tabindex="999"><img src="images/questionIcon.gif" alt="?" class="question" border="0"></a>

    </td></tr>



    <tr><td class="resultaat1" valign="top">Jaarlijkse rente en aflossing voor kredietverlening</td>
<td class="resultaat2" nowrap valign="top">

    <input type="text" name="lastenkredietverlening" maxlength="10" size="10" value="0" class="
textInput">

        <a href="#" onclick="vOpenWindow('invoerveld.lastenkredietverlening');return false;" 
tabindex="999"><img src="images/questionIcon.gif" alt="?" class="question" border="0"></a>

    </td></tr>



 </table>



<input type="hidden" name="update" value="false">

<table class="invoer2">

    <tr><td width="50%" align="left"></td><td width="50%" align="right"><input type="image" class="
submit" align="right" name="submit" src="images/nextButton.gif" border="0"></td></tr>

</table>


#4 - after it put this code : 

<script language="JavaScript" type="text/javascript">

  <!--

    document.forms["hmh4invoer1Form"].elements["geboortedatum"].focus()

  // -->

</script>


#5- now there is a reference to a JS file, do u have this file or the contents of it ? plz open the file, copy the contents and put it inside the JScode box.

the reference to the file is here :
<script src="scripts/utils.js"></script>

#6 - open your template with "edit HTML" and find the body tag and put this inside it :
onkeypress="checkKey()"


#7 - at the form tag attachement text box, plz put this :
onsubmit="return 
vCheckSubmit();"



this should get it to work, but plz take care, there is much JScode and for any small problem,nothing will work as expected, you can use FireBug to text this, I wish you good luck, plz post here about what happened 🙂

Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
This topic is locked and no more replies can be posted.