[REQ] Dynamic Form Fields

[cozilla]

I am currently running the trouble ticket software as internal.  I was wondering if on the ticket submit form (email form) if there was a way to populate the text fields with values based on the user entering in say a phone number and press submit or call a function like javascript that with perform the query and reload the page with the values.  I know how to do this in ASP and PHP but not really sure how to do it with this. 

Thanks for the help.

Colin

[Sparky]

You would have to do this with Javascript.

You would trigger calling the script through any number of methods... like "onblur" which would call the script after you move your curser away from an object.  The form would update dynamically as you would not want to hit Submit yet.

If you know ASP and PHP, figuring out the Javascript should be very straight-forward.

Some Google keywords might be "tutorial dynamic form Javascript" or similar.

[cozilla]

Doesn't a server side language need to be used to do that?

[Sparky]

Doesn't a server side language need to be used to do that?

Only if you want to pull values from a server-side database.

[cozilla]

Yes the data resides in a database on a SQL Server.

[Sparky]

Yes the data resides in a database on a SQL Server.

Since TTX is Perl, I would write it in Perl.

Submitting the form calls a Javascript which in turn decides whether to call your new Perl script or TTX based on form values.

[cozilla]

Sorry for all the questions.  I have done many mods to the software but I dont know how to write in perl I will check out some tutorials.

My question is if you were to do this what pages would have to put the code on?  So I can have a starting place.

Thanks

[Sparky]

Javascript would go on the same HTML page with the form itself.  Submit button (and/or "onblur") calls Javascript.  Javascript submits form to one of two places... the normal TTX or your new CGI/Perl.

Your new Perl would reside anywhere on your server, either with TTX modules or inside CGI-BIN directory but that only depends on how your server is configured to run Perl.

[cozilla]

So instead of adding a text box with onblur to the original ttx form to fill in my text boxes that I added through the admin section, you propose that I create an html page that pushes the values to the ttx form?

Should I post a screen shot of my set up?

[Sparky]

So instead of adding a text box with onblur to the original ttx form to fill in my text boxes that I added through the admin section, you propose that I create an html page that pushes the values to the ttx form?

Your TTX form is on an HTML page!  You would put the Javascript on the SAME html page as the form, NOT a new one.  Since your form fields are dynamically generated by TTX, you would also need to remove that corresponding macro and recreate those by hand so you can manipulate them.  There is a sticky about this.

You won't be hiding anything as described in the sticky, but you will need to do something similar in that you are manually creating a field...

http://forum.unitedwebcoders.com/index.php/topic,738.0.html

Based on the question, I think you should start by reading all the various sticky threads and perhaps dissect a few of the larger modifications posted on this site.  Your proposal is at least as complicated so fully understanding a couple of the TTX modifications would be instrumental.  My Message Editor Mod uses lots of javascripts to call the Perl.

[cozilla]

Thanks Sparky I will definitely look into those stickys.  Thanks man!

[cozilla]

Can you run ASP scripts in PERL?

[Sparky]

Can you run ASP scripts in PERL?

I would say not likely.

[arvin]

Hello.....

I don't know if this will help or not ...but I'll try ... I asked a similar question once and Sparky suggested that I use Javascript. Below is a code from one of my templates .....

Notice the Select your Department and the Sub Activity field.......

Code:

<script language="javascript"><!--
numberoftimes = 0;
        function onlyonce() {
        numberoftimes += 1;
        if (numberoftimes > 1) {
                var themessage = "[%Please be patient. Submission is in progress...%]";
            alert(themessage);
            return false;
        } else {
                return true;
        }
}
// -->
</script>
<script language="Javascript"><!--
function myHider(arg){
if (arg == 1){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 2){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 3){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 4){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 5){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 6){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 7){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 8){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 9){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 10){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 11){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 12){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 13){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 14){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 15){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 16){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 17){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 18){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 19){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 20){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 21){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 22){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 23){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 24){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 25){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
} else if (arg == 26){
document.getElementById('c1').style.visibility = 'visible';
document.getElementById('c2').style.visibility = 'hidden';
}
}
function myHider2(arg){
if (arg == 1){
document.getElementById('c1').style.visibility = 'hidden';
document.getElementById('c2').style.visibility = 'visible';
} else if (arg == 2){
document.getElementById('c1').style.visibility = 'hidden';
document.getElementById('c2').style.visibility = 'visible';
} else if (arg == 3){
document.getElementById('c1').style.visibility = 'hidden';
document.getElementById('c2').style.visibility = 'visible';
} else if (arg == 4){
document.getElementById('c1').style.visibility = 'hidden';
document.getElementById('c2').style.visibility = 'visible';
} else if (arg == 5){
document.getElementById('c1').style.visibility = 'hidden';
document.getElementById('c2').style.visibility = 'visible';
}
}
// -->
</script>
<script language="JavaScript"><!--
if (document.images) {
xSubActivity = new Object();

xSubActivity.group6 = new Array("Meeting","PP&R");

xSubActivity.group5 = new Array("Billing Inquiries","CABS","Monthly Billing","Phone Inquiries");

xSubActivity.group8 = new Array("Alarms","Broadcast","Bus Resale","Data","Directory","NCAMS","Vendor PRI","Wholesale");

xSubActivity.group7 = new Array("CPR","PIC","Testing","Trouble Shooter");

xSubActivity.group9 = new Array("Trainee","Trainer");

}

function updateMenus() {
 if (document.images) {
 sel = document.timetracker.grp.selectedIndex;
 
  if (sel == 1) {
   typ = xSubActivity.group6;
   val = xSubActivity.group6;
  }
  else if (sel == 2) {
   typ = xSubActivity.group5;
   val = xSubActivity.group5;
  }
  else if (sel == 3) {
   typ = xSubActivity.group8;
   val = xSubActivity.group8;
  }
  else if (sel == 4) {
   typ = xSubActivity.group7;
   val = xSubActivity.group7;
  }
  else if (sel == 5) {
   typ = xSubActivity.group9;
   val = xSubActivity.group9;
  }
  document.timetracker.xSubActivity.length = typ.length;
  for(i=0;i<typ.length;i++) {
   document.timetracker.xSubActivity.options[i].text = typ[i];
   document.timetracker.xSubActivity.options[i].value = val[i];
   }
}
 else {
  alert("Your browser does not support this order form.");
 }
}
// -->
</script>
<style type="text/css">
<!--
.style2 {color: #FF9900; font-weight: bold;}
-->
</style>

<table width=(%HTMLBASEWIDTH%) align="center" cellpadding=0 cellspacing=0 bgcolor="#FFFFFF">
  <td align=center><p><br class=tiny />
  </p>
    <form method=post action="(%ENV_SCRIPT_NAME%)" name=timetracker enctype="multipart/form-data" onsubmit="return onlyonce()">
      <input type=hidden name=cmd2 value=newticket />
      <input type=hidden name=style2 value="(%INPUT_style%)" />
      <input type=hidden name=sid2 value=(%INPUT_sid%) />
      <input type=hidden name=do value=1 />
      <input type=hidden name=tid value=(%INPUT_tid%) />
      <input type=hidden name=form value=(%INPUT_form%) />
      <input type=hidden name=subject value="Time Tracker" />
      <input type=hidden name=email value="csgtimetracker@mts.net" />
      <input type=hidden name=mandatory value="xSubActivity" />
      <table width=(%HTMLBASEWIDTH%) cellspacing=0 cellpadding=0 bgcolor="#FFFFFF">
    </form></td>
  <tr>
    <td height="37" colspan="2" valign="top"><div align="left" class="style2">Time Tracker Entry Form </div></td>
  </tr>
  <tr>
    <td><div align="right">Select your Name</div></td>
    <td><div align="left">&nbsp;
      <select name=oper size="1" tabindex="1">
        <option value="">-- please select --</option>
        <option value=Admin>Admin</option>
        <option value=Annette>Annette</option>
        <option value=Barb>Barb</option>
        <option value=Belinda>Belinda</option>
        <option value=Bernadine>Bernadine</option>
        <option value=Carole>Carole</option>
        <option value=Debbie>Debbie</option>
        <option value=Dolly>Dolly</option>
        <option value=Donna>Donna</option>
        <option value=Jackie>Jackie</option>
        <option value=Jody>Jody</option>
        <option value=Kelly>Kelly</option>
        <option value=Sandi>Sandi</option>
        <option value=Terry>Terry</option>
        <option value=Vickie>Vickie</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td><div align="right">Select your department</div></td>
    <td><div align="left">&nbsp;
      <select name="grp" size="1" tabindex="1" onchange="updateMenus();">
        <option value="">-- please select --</option>
        <option value=group6>Administration</option>
        <option value=group5>Billing/Inquiries</option>
        <option value=group8>Orders</option>
        <option value=group7>Tasks</option>
        <option value=group9>Training</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td><div align="right">Select your sub activity</div></td>
    <td><div align="left">&nbsp;
      <select name="xSubActivity" size="1" tabindex="2" value="(%INPUT_xSubActivity%)">
        <option value="" selected>select department first</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td><div align="right">Enter your time (hh:mm)</div></td>
    <td><div align="left">&nbsp;
      <select name="xTime" value="(%INPUT_xTime%)" id="c1" tabindex="3" onchange="myHider(document.getElementById('c1').selectedIndex);">
        <option>--please select--</option>
        <option>0:15</option>
        <option>0:30</option>
        <option>0:45</option>
        <option>1:00</option>
        <option>1:15</option>
        <option>1:30</option>
        <option>1:45</option>
        <option>2:00</option>
        <option>2:15</option>
        <option>2:30</option>
        <option>2:45</option>
        <option>3:00</option>
        <option>3:15</option>
        <option>3:30</option>
        <option>3:45</option>
        <option>4:00</option>
        <option>4:15</option>
        <option>4:30</option>
        <option>4:45</option>
        <option>5:00</option>
        <option>5:15</option>
        <option>5:30</option>
        <option>5:45</option>
        <option>6:00</option>
        <option>6:15</option>
        <option>6:30</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td><div align="right">Enter your days</div></td>
    <td><div align="left">&nbsp;
      <select name="xDays" value="(%INPUT_xDays%)" id="c2" tabindex="4" onchange="myHider2(document.getElementById('c2').selectedIndex);">
        <option>--please select--</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td><div align="right">CSG Customer / Your Name</div></td>
    <td><div align="left">&nbsp;
      <input name="name" value="(%INPUT_name%)"type="text" tabindex="5" size="30" maxlength="30" />
    </div></td>
  </tr>
  <tr>
    <td><div align="right">End Customer</div></td>
    <td><div align="left">&nbsp;
      <input name="xEnd Customer" value="(%INPUT_xEndCustomer%)"type="text" tabindex="6" size="30" maxlength="30" />
    </div></td>
  </tr>
  <tr>
    <td><div align="right">Type of Order</div></td>
    <td><div align="left">&nbsp;
      <select name="xType of Order" tabindex="7" value="(%INPUT_xTypeofOrder%)">
        <option selected="selected">--please select--</option>
        <option>New Install</option>
        <option>Disconnect</option>
        <option>Move</option>
        <option>Change</option>
        <option>Report</option>
        <option>Inquiry</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td><div align="right">Order #</div></td>
    <td><div align="left">&nbsp;
      <input name="xOrder Number" value="(%INPUT_xOrderNumber%)" type="text" tabindex="8" size="30"/>
    </div></td>
  </tr>
  <tr>
    <td><div align="right">Activity Comments</div></td>
    <td><div align="left">&nbsp;
      <textarea name="xComments" value="(%INPUT_xComments%)" cols="40" rows="10" tabindex="9"></textarea>
    </div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><div align="left"></div></td>
    <td><div align="left">&nbsp;
      <input type=submit value="[%Submit Time Tracker Entry%]" />
    </div></td>
  </tr>
</table>
<form method="post" action="(%ENV_SCRIPT_NAME%)" id="formpreview" target="winpreview" >
  <input type=hidden name=cmd value=preview>
<input type=hidden name=style value="(%INPUT_style%)">
<input type=hidden name=sid value=(%INPUT_sid%)>
<input type=hidden name=key value=(%INPUT_key%)>
<input type=hidden name=msg>
</form>

[upg]

Can you run ASP scripts in PERL?

I would say not likely.

What you're trying to accomplish has an air of AJAX to it, which implies you will have to use javascript to open an xmlhttp request to retrieve information from the server and repopulate your form fields with this data.

The request looks a bit like this:

Code:

function updateCode(e)
{
if (!e) var e = window.event;
var src; if (e.target) src = e.target; else if (e.srcElement) src = e.srcElement;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
src.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","myFile.php?type="+type,true);
xmlhttp.send();
}

Since you'll just be using the php (or ASP) file to update the innerhtml of a form element (i.e. the stuff between <select> and </select>) this shouldn't conflict with the CGI nature of TTX at all.