www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to capture & concatenate form data before posting?

  1. #1
    Join Date
    Jun 2014
    Posts
    3

    Question How to capture & concatenate form data before posting?

    Hi,

    I have a simple HTML form trying to capture 5 fields. I need to create a string with these 5 fields separated by pipe(|) and enclosed in double quotes("") before the form is posted to a URL.

    What is the best possible way i can achieve this requirement? I am complete rookie with Javascript, but my research so far suggests, i will need to use Javascript in this scenario, hence posting in this forum

    Thanks.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    Can you provide a BRIEF example of your HTML and the fields you are trying to capture?

  3. #3
    Join Date
    Jun 2014
    Posts
    3
    Thanks for the responding. Below is my sample form i have been working on:
    HTML Code:
    <form id="form_855965" name="form_855965" class="appnitro"  method="post" action="">
    				<div class="form_description">
    			<h2></h2>
    			<p></p>
    		</div>						
    			<ul >
    			
    					<li id="li_6" >
    		<label class="description" for="element_6">Sandbox Name </label>
    		<div>
    		<select class="element select medium" id="element_6" name="element_6" onchange=showData();> 
    			<option value="" selected="selected"></option>
    <option value="ITBCT" >DEV</option>
    
    
    		</select>
    		</div><p class="guidelines" id="guide_6"><small>Select appropriate Sandbox Name. E.g. DEV </small></p> 
    		</li>		<li id="li_5" >
    		<label class="description" for="element_5">Sandbox Type </label>
    		<div>
    		<select class="element select medium" id="element_5" name="element_5" onchange=showData();> 
    			<option value="" selected="selected"></option>
    <option value="DEVELOPER" >DEVELOPER</option>
    <option value="CONFIG" >DEVELOPER PRO</option>
    
    		</select>
    		</div><p class="guidelines" id="guide_5"><small>Select Appropriate Sandbox Type. This determines how much data will be loaded in the target sandbox</small></p> 
    		</li>		<li id="li_2" >
    		<label class="description" for="element_2">Username </label>
    		<div>
    			<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" onchange=showData(); onclick=showData();/> 
    		</div><p class="guidelines" id="guide_2"><small>Provide Admin or Other User who has sufficient access to load all required data in the sandbox.</small></p> 
    		</li>		<li id="li_3" >
    		<label class="description" for="element_3">Password </label>
    		<div>
    			<input id="element_3" name="element_3" class="element text medium" type="password" maxlength="255" value="" onchange=showData(); onclick=showData();/> 
    		</div><p class="guidelines" id="guide_3"><small>Provide Password+Token for the User</small></p> 
    		</li>		<li id="li_4" >
    		<label class="description" for="element_4">Notification Email </label>
    		<div>
    			<input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value="" onchange=showData(); onclick=showData();/> 
    		</div><p class="guidelines" id="guide_4"><small>Provide comma separated email addresses who want to receive notification about the job in progress/completion emails</small></p> 
    		</li>
    							<li class="buttons">
    			    <input type="hidden" name="form_id" value="855965" />
    			    
    				<input id="saveForm" class="button_text" type="Submit" name="submit" value="Submit"/>
    		</li>
    			</ul>
    		</form>
    I want to concatenate all the fields in pipe delimited format before it is posted to the form action: "Sandbox Name"|"Sandbox Type"|"Username"|"Password"|"Notification Email"

    Thanks

  4. #4
    Join Date
    Jun 2014
    Posts
    3
    Updated form

    HTML Code:
    <form id="form_855965" name="form_855965" class="appnitro"  method="post" action="">
    				<div class="form_description">
    			<h2></h2>
    			<p></p>
    		</div>						
    			<ul >
    			
    					<li id="li_6" >
    		<label class="description" for="element_6">Sandbox Name </label>
    		<div>
    		<select class="element select medium" id="element_6" name="element_6"> 
    			<option value="" selected="selected"></option>
    <option value="DEV" >DEV</option>
    
    
    		</select>
    		</div><p class="guidelines" id="guide_6"><small>Select appropriate Sandbox Name. E.g. DEV </small></p> 
    		</li>		<li id="li_5" >
    		<label class="description" for="element_5">Sandbox Type </label>
    		<div>
    		<select class="element select medium" id="element_5" name="element_5"> 
    			<option value="" selected="selected"></option>
    <option value="DEVELOPER" >DEVELOPER</option>
    <option value="DEVELOPER PRO" >DEVELOPER PRO</option>
    
    		</select>
    		</div><p class="guidelines" id="guide_5"><small>Select Appropriate Sandbox Type. This determines how much data will be loaded in the target sandbox</small></p> 
    		</li>		<li id="li_2" >
    		<label class="description" for="element_2">Username </label>
    		<div>
    			<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
    		</div><p class="guidelines" id="guide_2"><small>Provide Admin or Other User who has sufficient access to load all required data in the sandbox.</small></p> 
    		</li>		<li id="li_3" >
    		<label class="description" for="element_3">Password </label>
    		<div>
    			<input id="element_3" name="element_3" class="element text medium" type="password" maxlength="255" value=""/> 
    		</div><p class="guidelines" id="guide_3"><small>Provide Password+Token for the User</small></p> 
    		</li>		<li id="li_4" >
    		<label class="description" for="element_4">Notification Email </label>
    		<div>
    			<input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value=""/> 
    		</div><p class="guidelines" id="guide_4"><small>Provide comma separated email addresses who want to receive notification about the job in progress/completion emails</small></p> 
    		</li>
    							<li class="buttons">
    			    <input type="hidden" name="form_id" value="855965" />
    			    
    				<input id="saveForm" class="button_text" type="Submit" name="submit" value="Submit"/>
    		</li>
    			</ul>
    		</form>
    PS: Could not edit my post, apologize for this unnecessary post.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Needs reference to the CSS to be displayed correctly.

    See if this suits your needs.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Form submission </title>
    </head>
    
    <!-- For: http://www.webdeveloper.com/forum/showthread.php?296695-How-to-capture-amp-concatenate-form-data-before-posting&p=1340965#post1340965 -->
    <body>
    <form id="form_855965" class="appnitro" method="post" action="">
     <div class="form_description">
      <h2></h2>
      <p></p>
     </div>						
     <ul>
      <li id="li_6" >
       <label class="description" for="element_6">Sandbox Name </label>
       <div>
        <select class="element select medium" id="element_6" name="element_6"> 
         <option value="" selected="selected"></option>
         <option value="DEV" >DEV</option>
        </select>
       </div>
       <p class="guidelines" id="guide_6"><small>Select appropriate Sandbox Name. E.g. DEV </small></p> 
      </li>
      <li id="li_5" >
       <label class="description" for="element_5">Sandbox Type </label>
       <div>
        <select class="element select medium" id="element_5" name="element_5"> 
         <option value="" selected="selected"></option>
         <option value="DEVELOPER" >DEVELOPER</option>
         <option value="DEVELOPER PRO" >DEVELOPER PRO</option>
        </select>
       </div>
       <p class="guidelines" id="guide_5">
        <small>Select Appropriate Sandbox Type. This determines how much data will be loaded in the target sandbox</small>
       </p> 
      </li>
      <li id="li_2" >
       <label class="description" for="element_2">Username </label>
       <div> <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> </div>
       <p class="guidelines" id="guide_2">
        <small>Provide Admin or Other User who has sufficient access to load all required data in the sandbox.</small>
       </p> 
      </li>
      <li id="li_3" >
       <label class="description" for="element_3">Password </label>
       <div>
        <input id="element_3" name="element_3" class="element text medium" type="password" maxlength="255" value=""/> 
       </div>
       <p class="guidelines" id="guide_3"><small>Provide Password+Token for the User</small></p> 
      </li>
      <li id="li_4" >
       <label class="description" for="element_4">Notification Email </label>
       <div> <input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value=""/> </div>
       <p class="guidelines" id="guide_4">
        <small>Provide comma separated email addresses who want to receive notification about the job in progress/completion emails</small>
       </p> 
      </li>
      <li class="buttons">
       <input type="hidden" name="form_id" value="855965" />
       <input id="saveForm" class="button_text" type="Submit" value="Submit" onclick="return sendInfo('form_855965')"/>
      </li>
     </ul>
    </form>
    
    <script type="text/javascript">
    function $_(IDS) { return document.getElementById(IDS); }
    
    function sendInfo(formID) {
      var arr = [];
      arr.push('Form information: '+formID);
      arr.push($_('element_6').value);
      arr.push($_('element_5').value);
      arr.push($_('element_2').value);
      arr.push($_('element_3').value);
      arr.push($_('element_4').value);
      alert(arr.join('|'));
      return false;  // change to true after testing
    }
    </script>
    
    </body>
    </html>
    Last edited by JMRKER; 06-23-2014 at 03:38 PM.

  6. #6
    Join Date
    May 2014
    Posts
    897
    I have a question -- why would you be doing that to the data client-side, where scripting that does that can be blocked?

    Why not just combine the data on the server side of things? That would be easier, faster, and no risk of it breaking down just because someone doesn't have or is intentionally blocking JS.

    Remember the mantra: If you can't make it work without scripting FIRST, you likely have no business adding scripting to it.

    Oh, and what makes label/input pairings unordered list items? probably wouldn't be de-emphasizing their description paragraphs either...
    Last edited by deathshadow; 06-23-2014 at 10:21 PM.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles