Zikula Community

• **unknown user**
  
  

  • Rank: Senior
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 2330

  Posted: Jun 01, 2005 - 06:26 AM

  I've got a user form that can be toggled between 2 versions and when it is, all the variables are passed from one version to the other. This works great, but one issue is that the form fields are adding slashes to the inputs...exponentially with each toggle as well.
  
  So,....
  
  Let's say I've got this:
  <textarea>Here's an example</textarea>
  
  ...if I toggle the form it brings back this:
  <textarea>Here\'s an example</textarea>
  
  ...if I toggle back, I get:
  <textarea>Here\\\'s an example</textarea>
  
  ...and so on...
  
  What would be the preferred method of stripping the slashes for the toggle part...but keeping the user-submitted data cleaned of bad things as well (for the toggle and the submit)?

  • 
  •  
• **unknown user**
  
  

  • Rank: Softmore
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 413

  Posted: Jun 01, 2005 - 06:43 AM

  How are you doing the toggle??
  
  
  
  -SUNADMN

  • 
  •  
• **unknown user**
  
  

  • Rank: Senior
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 2330

  Posted: Jun 01, 2005 - 06:44 AM

  Using hidden fields to maintain the variables...

  • 
  •  
• **unknown user**
  
  

  • Rank: Softmore
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 413

  Posted: Jun 01, 2005 - 06:49 AM

  Ok so are you doing a hidden

  or then using JS to do a write root???
  
  
  
  -SUNADMN

  • 
  •  
• **unknown user**
  
  

  • Rank: Registered User
  • Registered: Mar 16, 2002
  • Last visit: Jun 24, 2005
  • Posts: 27

  Posted: Jun 01, 2005 - 06:57 AM

  Perhaps storing the data in the session might be an option.

  • 
  •  
• **unknown user**
  
  

  • Rank: Senior
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 2330

  Posted: Jun 01, 2005 - 07:15 AM

  It's not particularly JS based... What I've done is to use the $Form_Toggle variable as a check for how much of the form should be displayed. If $Form_Toggle initially == 1, then it gets reset to 0 in a hidden field...and vice versa.
  
  The form actually has several possible submit buttons..., I'm not using an action in my form tag. I'm letting the Submit's "onclick" define the action since this allows you to point the form to different functions depending on what button was clicked.
  
  The first 2 buttons below have the same action because only one can display at a time, and they only serve to change the value of the hidden $Form_Toggle variable from 1 to 0 and back.
  
  

  Code

  <!--[if $Form_Toggle != 1]-->
  <input type="hidden" name="Form_Toggle" value="1" />
  <input type="submit" name="submit" value="LONG FORM" onclick="this.form.action='index.php?module=MyMod" />
  <!--[else]-->
  <input type="hidden" name="Form_Toggle" value="0" />
  <input type="submit" name="submit" value="SHORT FORM" onclick="this.form.action='index.php?module=MyMod" />
  <!--[/if]-->

  
  
  Ok...so the hidden $Form_Toggle variable allows me to output based on it's value... So later on in the template,...
  
  

  Code

  OUTPUT THE ELEMENTS for THE SHORT VERSION HERE FIRST

  
  ...and then...
  
  

  Code

  <!--[if $Form_Toggle eq 1]-->
  OUTPUT THE ADDITIONAL FIELDS for THE LONG FORM NOW
  <!--[/if]-->

  
  
  ...and then...
  
  

  Code

  <input type="submit" name="submit" value="PREVIEW!" onclick="this.form.action='index.php?module=myMod&type=user&func=verify'" />

  • 
  •  
• **unknown user**
  
  

  • Rank: Softmore
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 413

  Posted: Jun 01, 2005 - 07:57 AM

  I just finished a similar project using JS to write to from a drop down select menu this might be of some value to you below is the JS I used and a code example:
  
  
  JavaScript:
  

  Code

  /*****************************************/
  /** Usable Forms 1.0, May 2003          **/
  /** Written by ppk, www.quirksmode.org  **/
  /** Instructions for use on my site     **/
  /**                                     **/
  /** You may use or change this script   **/
  /** only when this copyright notice     **/
  /** is intact.                          **/
  /**                                     **/
  /** If you extend the script, please    **/
  /** add a short description and your    **/
  /** name below.                         **/
  /*****************************************/
  
  
  var relatedTag = 'TR';
  
  var compatible = (
          document.getElementById && document.getElementsByTagName && document.createElement
          &&
          !(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
          );
  
  if (compatible)
          document.write('<style>.accessibility{display: none}</style>');
  
  
  function prepareForm()
  {
          if (!compatible) return;
          var marker = document.createElement(relatedTag);
          marker.style.display = 'none';
  
          var x = document.getElementsByTagName(relatedTag);
          var toBeRemoved = new array;
          for (var i=0;i<x.length;i++)
          {
                  if (x[i].getAttribute('relation'))
                  {
                          var y = getAllFormFields(x[i]);
                          x[i].nestedRels = new array;
                          for (var j=0;j<y.length;j++)
                          {
                                  var rel = y[j].getAttribute('show');
                                  if (!rel || rel == 'none') continue;
                                  x[i].nestedRels.push(rel);
                          }
                          if (!x[i].nestedRels.length) x[i].nestedRels = null;
                          toBeRemoved.push(x[i]);
                  }
          }
  
          while (toBeRemoved.length)
          {
                  var rel = toBeRemoved[0].getAttribute('relation');
                  if (!document.getElementById(rel))
                  {
                          var newMarker = marker.cloneNode(true);
                          newMarker.id = rel;
                          toBeRemoved[0].parentNode.replaceChild(newMarker,toBeRemoved[0]);
                  }
                  document.getElementById('waitingRoom').appendChild(toBeRemoved.shift());
          }
          document.onclick = arrangeFormFields;
  
          var y = document.getElementsByTagName('input');
          for (var i=0;i<y.length;i++)
          {
                  if (y[i].checked && y[i].getAttribute('show'))
                          intoMainForm(y[i].getAttribute('show'))
          }
  
          var z = document.getElementsByTagName('select');
  
          // Opera weird with hidden selects in quirks mode: selectedIndex = -1
  
          for (var i=0;i<z.length;i++)
          {
                  if (z[i].options[z[i].selectedIndex].getAttribute('show'))
                  {
                          z[i].onchange = arrangeFormFields;
                          intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('show'))
                  }
          }
  }
  
  function arrangeFormFields(e)
  {
          if (!e) var e = window.event;
          var tg = (e.target) ? e.target : e.srcElement;
          if (
                  !(tg.nodeName == 'SELECT' && e.type == 'change')
                  &&
                  !(tg.nodeName == 'INPUT' && tg.getAttribute('show'))
             ) return;
          var toBeInserted = tg.getAttribute('show');
  
          /* Why no switch statement? Because Netscape 3 gives an error message on encountering it,
                  and this script must degrade perfectly. */
  
          if (tg.type == 'checkbox')
          {
                  if (tg.checked)
                          intoMainForm(toBeInserted);
                  else
                          intoWaitingRoom(toBeInserted);
          }
          else if (tg.type == 'radio')
          {
                  removeOthers(tg.form[tg.name],toBeInserted)
                  intoMainForm(toBeInserted);
          }
          else if (tg.type == 'select-one')
          {
                  toBeInserted = tg.options[tg.selectedIndex].getAttribute('show');
                  removeOthers(tg.options,toBeInserted);
                  intoMainForm(toBeInserted);
          }
  }
  
  function removeOthers(others,toBeInserted)
  {
          var toBeRemoved = new array;
          for (var i=0;i<others.length;i++)
          {
                  var show = others[i].getAttribute('show');
                  if (show != toBeInserted)
                          toBeRemoved.push(show);
          }
          while (toBeRemoved.length)
                  intoWaitingRoom(toBeRemoved.shift());
  }
  
  function gatherElements(name)
  {
          var Elements = new array;
          var x = document.getElementsByTagName(relatedTag);
          for (var i=0;i<x.length;i++)
                  if (x[i].getAttribute('relation') == name)
                          Elements.push(x[i]);
          return Elements;
  }
  
  function intoWaitingRoom(name)
  {
          if (name == 'none') return;
          var Elements = gatherElements(name);
          if (isInWaitingRoom(Elements[0])) return;
          while (Elements.length)
          {
                  if (Elements[0].nestedRels)
                          for (var i=0;i<Elements[0].nestedRels.length;i++)
                                  intoWaitingRoom(Elements[0].nestedRels[i]);
                  document.getElementById('waitingRoom').appendChild(Elements.shift())
          }
  }
  
  function intoMainForm(name)
  {
          if (name == 'none') return;
          var Elements = gatherElements(name);
          if (!isInWaitingRoom(Elements[0])) return;
          var insertPoint = document.getElementById(name);
          while (Elements.length)
                  insertPoint.parentNode.insertBefore(Elements.shift(),insertPoint)
  }
  
  function isInWaitingRoom(obj)
  {
          while(obj.nodeName != 'BODY')
          {
                  obj=obj.parentNode;
                  if (obj.id == 'waitingRoom')
                          return true;
          }
          return false;
  }
  
  
  function getAllFormFields(node)
  {
          var allFormFields = new array;
          var x = node.getElementsByTagName('input');
          for (var i=0;i<x.length;i++)
                  allFormFields.push(x[i]);
          var y = node.getElementsByTagName('option');
          for (var i=0;i<y.length;i++)
                  allFormFields.push(y[i]);
          return allFormFields;
  }
  
  // push and shift for IE5
  
  function array_push() {
          var A_p = 0
          for (A_p = 0; A_p < arguments.length; A_p++) {
                  this[this.length] = arguments[A_p]
          }
          return this.length
  }
  
  if (typeof array.prototype.push == "undefined") {
          array.prototype.push = array_push
  }
  
  function array_shift() {
          var A_s = 0
          var response = this[0]
          for (A_s = 0; A_s < this.length-1; A_s++) {
                  this[A_s] = this[A_s + 1]
          }
          this.length--
          return response
  }
  
  if (typeof array.prototype.shift == "undefined") {
          array.prototype.shift = array_shift
  }

  
  
  template file:
  

  Code

  <!--[include file="pnChange_admin_menu.htm"]-->
  <br /><br />
  <div class="pn-title"><!--[pnml name="_pnChangeADD"]--></div><br /><br />
  <script src="modules/pnChange/pntemplates/javascripts/usableforms.js"></script>
  <body onload="prepareForm()">
  
  <form name="formPicker" action="<!--[pnmodurl modname="pnChange" func="create"]-->" method="post" enctype="application/x-www-form-urlencoded">
  
  <div>
      <input type="hidden" name="authid" value="<!--[pnsecgenauthkey module="pnChange"]-->" />
      <table border="0" cellpadding="2" cellspacing="1"><tbody>
      <script src="modules/pnChange/pntemplates/javascripts/js_functions.js"></script>
      <input type="hidden" name="stepCount" value="0"/>
      <input type="hidden" name="descCount" value="0"/>
  
        <tr>
          <td class="question">Select Change Type:</td>
          <td>
            <select name="change_type">
               <option show="none">Select</option>
               <option show="network" value="network_change">Network Change</option>
               <option show="server"  value="server_change">Server Change</option>
            </select>
          </td>
        </tr>
  
        <tr relation="network">
            <td>Change Requestor<br /><input name="requestor" value="<!--[$name|pnvarprepfordisplay]-->"><br /><br /></td>
            <td>Requestors Email<br /><input name="rEmail"    value="<!--[$email|pnvarprepfordisplay]-->"><br /><br /></td>
        </tr>
        <tr relation="network">
               <td>Phone Number<br /><input name="phone"><br /><br /></td>
               <td>Cell/Pager<br /><input name="cellP"><br /><br /></td>
        </tr>
  
        <tr relation="network">
            <td>Change Performed by<br /><input name="performed"><br /><br /></td>
            <td>Email<br /><input="perfmail"><br /><br /></td>
        </tr>
  
        <tr relation="network">
               <td>Change Management Title<br /><input name="cm_name"><br /><br /></td>
        </tr>
  
  <tr id="network" style="display: none;"></tr>
  
        <tr relation="server">
          <td class="question"><span class="accessibility">Server Change Details:</span>Server Change detail.</td>
          <td><textarea name="server_detail"></textarea></td>
        </tr>
  
        <tr id="server" style="display: none;"></tr>
  
  <table><tbody id="waitingRoom"
        style="display: none"></tbody></table>
  
  
    <input type="submit" value="Send form" />
       </table>
  </div>
  </form>

  
  
  -SUNADMN

  • 
  •  
• **unknown user**
  
  

  • Rank: Senior
  • Registered: Mar 16, 2002
  • Last visit: Oct 21, 2009
  • Posts: 2330

  Posted: Jun 01, 2005 - 08:00 AM

  Thanks. Only problem is that it's about 20 times more code than I'm already using for the same effect. ;)
  
  I'm also very wary of relying on JS since it can be disabled at the browser level...

  • 
  •  
•  
•  

Users on-line

• 0 users

This list is based on users active over the last 60 minutes.