Solved

Multiple Ajax form submissions

Posted on 2013-06-12
7
311 Views
Last Modified: 2013-06-24
I have a page that is used to update content stored in a database.  The form has a preview section that is preview the page before the user commits the submission to the database. When they click the Preview button it displays the page using the form variables instead of the database variables.

I am not trying to update another field within the form based on the users entry in the previous field.  In the first field I have onBlur="this.form.submit()" so I can get the value in this field, do some stuff to it and then put that value in the next field as a suggested entry (basically it takes "My New Navigation Link" and changes it to "my-new-navigation-link")

The problem is that when I use onBlur="this.form.submit()" it is submitting the preview.

I have included the section of code below:

<!---Define the record that is getting previewed - if the id is not defined, it redirects to the home page--->
<cfset url_variable = "?content_id=" & content_identifier>
<cfform name="formCategories" action="../#action_file##url_variable#" method="post" enctype="multipart/form-data">
                    <fieldset>
                        <cfif EditMode>
                            <cfinput type="hidden" name="content_id" id="id_content_id" value="#URL.content_id#">
                            <cfinput type="hidden" name="content_identifier" id="content_identifier" value="#content_identifier#">
                            <cfinput type="hidden" name="content_order" id="content_order" value="#content_order#">
                        </cfif>
                        <cfif AddMode>
                            <cfinput type="hidden" name="AddMode" id="id_AddMode" value="AddMode">
                        </cfif>
                        <cfif IsDefined("SubCatMode")>
                            <cfif SubCatMode>
                                <cfinput type="hidden" name="SubCatMode" id="id_SubCatMode" value="SubCatMode">
                            </cfif>	
                        </cfif>
                        
                        <cfif IsDefined("URL.content_parent")>
                            <cfif URL.content_parent GT 0>
                                <label for="content_parent">
                                <span>Parent Page for Navigation:</span>
                                <cfselect name="content_parent" id="id_content_parent" query="get_content_identifier" display="content_navname" selected="#content_parent#" value="content_id" queryPosition="below">
                                    <option></option>
                                </cfselect>
                                </label>
                            </cfif>
                        </cfif>
                        
                        <label class="float-left" for="id_active"><h5>Display On Website?</h5></label>
                        <cfif AddMode EQ "YES">
                            <label class="float-left" for="id_content_active_yes">
                            <cfinput class="" type="radio" name="content_active" id="id_content_active_yes" value="1" checked="no"> <span>Yes</span>
                            </label>
                            <label class="float-left" for="id_content_active_no">
                            <cfinput class="" type="radio" name="content_active" id="id_content_active_no" value="0" checked="yes"> <span>No</span>
                            </label>
                        <cfelse>
                            <cfif content_active EQ 1>
                                <label class="float-left" for="id_content_active_yes">
                                <cfinput class="" type="radio" name="content_active" id="id_content_active_yes" value="1" checked="yes"> <span>Yes</span>
                                </label>
                                <label class="float-left" for="id_content_active_no">
                                <cfinput class="" type="radio" name="content_active" id="id_content_active_no" value="0" checked="no"> <span>No</span>
                                </label>
                            <cfelse>
                                <label class="float-left" for="id_content_active_yes">
                                <cfinput class="" type="radio" name="content_active" id="id_content_active_yes" value="1" checked="no"> <span>Yes</span>
                                </label>
                                <label class="float-left" for="id_content_active_no">
                                <cfinput class="" type="radio" name="content_active" id="id_content_active_no" value="0" checked="yes"> <span>No</span>
                                </label>
                            </cfif>
                        </cfif>
                        <div class="clearfix"></div>
                        
                        <label class="float-left" for="id_navdisplay"><h5>Display in Navigation?</h5></label>
                        <cfif AddMode EQ "YES">
                            <label class="float-left" for="id_content_navdisplay_yes">
                            <cfinput class="" type="radio" name="content_navdisplay" id="id_content_navdisplay_yes" value="1" checked="no"> <span>Yes</span>
                            </label>
                            <label class="float-left" for="id_content_navdisplay_no">
                            <cfinput class="" type="radio" name="content_navdisplay" id="id_content_navdisplay_no" value="0" checked="yes"> <span>No</span>
                            </label>
                        <cfelse>
                            <cfif content_navdisplay EQ 1>
                                <label class="float-left" for="id_content_navdisplay_yes">
                                <cfinput class="" type="radio" name="content_navdisplay" id="id_content_navdisplay_yes" value="1" checked="yes"> <span>Yes</span>
                                </label>
                                <label class="float-left" for="id_content_navdisplay_no">
                                <cfinput class="" type="radio" name="content_navdisplay" id="id_content_navdisplay_no" value="0" checked="no"> <span>No</span>
                                </label>
                            <cfelse>
                                <label class="float-left" for="id_content_navdisplay_yes">
                                <cfinput class="" type="radio" name="content_navdisplay" id="id_content_navdisplay_yes" value="1" checked="no"> <span>Yes</span>
                                </label>
                                <label class="float-left" for="id_content_navdisplay_no">
                                <cfinput class="" type="radio" name="content_navdisplay" id="id_content_navdisplay_no" value="0" checked="yes"> <span>No</span>
                                </label>
                            </cfif>
                        </cfif>
                        <div class="clearfix"></div>
                        
                        <!---<cfinput type="submit" name="Submit" value="#action_label#">--->
                        <!---Show a Preview button and an Update button--->
                        <div class="float-left">
                        <p class="preview-button"><cfinput type="button" name="Preview" onclick="preview(this.form);" value="Preview Main Content"></p>
                        <p class="preview-text">(Preview Opens in a New Tab/Window)</p>
                        </div>
                        <cfinput type="hidden" name="SubmitPageUpdate" value="true">
                        <p class="update-button"><cfinput cfinput style="font-size:12px;" type="button" name="Submit" onclick="confirmSubmit(this.form);" value="Update Main Content"></p>
                        <div class="clearfix"></div>
                        <cfif isDefined('get_versions.recordCount') and get_versions.recordCount>
                        <label for="content_rollback">
                        <h3>Other versions of this page:</h3>
                        <p>Rollback to another version of this page.</p>
                        <table>
                        <tr>
                            <td>Edit</td>
                            <td>Rollback</td>
                            <td>Created On</td>
                            <td>Status</td>
                            <td></td>
                        </tr>
                        <tr><td colspan="4"><hr /></td></tr>
                        <cfoutput query="get_versions">
                            <tr><td><a href="content.cfm?content_id=#get_versions.content_id#&content_parent=#get_versions.content_parent#" title="Edit this Version">Edit</a>&nbsp;&nbsp;&nbsp;</td>
                            	<td><a href="rollback.cfm?activate=#get_versions.content_id#" title="Rollback to this Version">Rollback</a>&nbsp;&nbsp;&nbsp;</td>
                                <td>Created on: #DateFormat(content_created,'mmm-dd-yyyy')# #TimeFormat(content_created,'short')#&nbsp;&nbsp;&nbsp;</td>
                                <td><cfif get_versions.content_active EQ 1><strong>Active</strong><cfelse><em>Draft/Backup</em></cfif></td>
                                <td><cfif get_versions.content_id EQ url.content_id>&nbsp;&nbsp;&nbsp;<span style="color:##06C; font-weight:bold;">Currently Editing...</span></cfif></td>
                            </tr>
                        </cfoutput>
                        </table>
                        <p>&nbsp;</p>
                        </label>
                        </cfif>
                        <h3>Page Information</h3>
                        <label for="id_content_navname">
                        <h5>Page Name:</h5>
                        <p>The page name appears as the navigation link text.</p>
                        <cfinput type="text" name="content_navname" id="id_content_navname" value="#content_navname#" onBlur="this.form.submit()">
                        </label>
                        <!---create the default url--->
                        <cfset content_url = LCase(replaceList(content_navname," ,&,-,/,\,[,],{,},(,),*,^,%,$,##,@,!,`,:,;,>,<,.,=,+,|,?,,,", ""))>
                        <cfoutput>#content_url#</cfoutput>
                        <label for="id_content_url">
                        <h5>Friendly URL:</h5>
                        <p>The friendly url shows in the browser address bar as the file name. Using keywords may improve SEO and click through rates</p>
                        <cfinput type="text" name="content_url" id="id_content_url" value="#content_url#" validate="regular_expression" pattern="[^Application]" message="Application is a reserved word and cannot be used as a friendly url.">
                        </label>
                        <label for="id_content_websiteurl">
                        <h5>Website URL:</h5>
                        <p>If you would like this link to go to another website, enter the full url below (must inlude the http or https).</p>
                        <cfinput type="text" name="content_websiteurl" id="id_content_websiteurl" value="#content_websiteurl#">
                        </label>
                        <label for="id_content_target_blank">
                        <h5>Target Window:</h5>
                        <p>Would you like the website or page to open in a new window or tab?</p>
                        <cfif content_targetblank NEQ "">
                            <cfif content_targetblank EQ "0">
                                <cfinput type="radio" name="content_targetblank" id="id_content_targetblank" value="1"> Yes
                                <cfinput type="radio" name="content_targetblank" id="id_content_targetblank" value="0" checked="yes"> No
                            <cfelse>
                                <cfinput type="radio" name="content_targetblank" id="id_content_targetblank" value="1"> Yes
                                <cfinput type="radio" name="content_targetblank" id="id_content_targetblank" value="0" checked="yes"> No
                            </cfif>
                        <cfelse>
                            <cfinput type="radio" name="content_targetblank" id="id_content_targetblank" value="1"> Yes
                            <cfinput type="radio" name="content_targetblank" id="id_content_targetblank" value="0"> No
                        </cfif>
                        </label>
                        <cfif ListContainsNoCase(list_switches, "content_header")>
                        <label for="id_content_heading">
                        <h5>Content Heading:</h5>
                        <p>Enter the main header of the page. Using keywords may improve SEO.</p>
                        <cfinput type="text" name="content_heading" id="id_content_heading" value="#content_heading#">
                        </label>
                        <cfelse>
                        <cfinput type="hidden" name="content_heading" id="id_content_heading" value="">
                        </cfif>
                        <cfif ListContainsNoCase(list_switches, "content_introtext")>
                        <label for="id_content_introtext">
                        <h5>Content Intro Text (optional)</h5>
                        <p>A text block that displays in the same section as the main header.</p>
                        <cftextarea richtext="true" height="500" name="content_introtext" id="id_content_introtext"><cfoutput>#content_introtext#</cfoutput></cftextarea>
                        </label>
                        </cfif>
                        <cfif ListContainsNoCase(list_switches, "content_subheader")>
                        <label for="id_content_subheading">
                        <h5>Content Sub-Heading (optional):</h5>
                        <p>Enter the sub-heading only if you have an additional header before adding content. Additional headers may be used below within the content. Using keywords may improve SEO.</p>
                        <cfinput type="text" name="content_subheading" id="id_content_subheading" value="#content_subheading#">
                        </label>
                        <cfelse>
                        <cfinput type="hidden" name="content_subheading" id="id_content_subheading" value="">
                        </cfif>
                        <label for="id_content_body">
                        <h5>Page Content:</h5>
                        <p>The main content of the web page. Some content may also appear on a page as content blocks (depends on front end design).</p>
                        <p class="clear-both"><strong>Important: </strong>Click the show blocks icon (<img style="height:20px;" src="images/icons/show-blocks.png" alt="show blocks icon" />) before editing.</p>
                        <cftextarea richtext="true" height="500" name="content_body" id="id_content_body"><cfoutput>#content_body#</cfoutput></cftextarea>
                        </label>
                        <cfif EditMode>
                            <label for="id_content_redirectto">
                            <h5>Redirect Page:</h5>
                            <p>If a page name changes, and you would like the friendly url to change as well, enter the new friendly url below.</p>
                            <cfinput type="text" name="content_redirectto" id="id_content_redirectto" value="#content_redirectto#">
                            </label>
                        </cfif>
                        
                        <label for="id_content_title">
                        <h5>SEO Title:</h5>
                        <p>The title tag appears at the top of the browser window, browser tabs and is the first line in most search engine results. Use keywords separated by a pipe (|) or comma (,). Keywords must be used in the content of the page.</p>
                        <span id="charsusedTitle">0 out of 120 characters used</span>
                        <cfinput type="text" name="content_title" id="id_content_title" value="#content_title#" onKeyUp="updateTitle(this)">
                        </label>
                        <label for="id_content_description">
                        <h5>Seo Descriptions</h5>
                        <p>The SEO Description appears as meta information in the code and typically is the description that appears in most search engines. Use keywords and focus on initiating the searcher to click on your websites search result. Keywords must be used in the content of the page.</p>
                        <span id="charsusedDescription">0 out of 260 characters used</span>
                        
                        <cftextarea name="content_description" id="id_content_description" onKeyUp="update(this)"><cfoutput>#content_description#</cfoutput></cftextarea>
                        </label>
                        <label for="id_content_keywords">
                        <h5>SEO Keywords:</h5>
                        <p>List SEO keywords separated by commas.  Not commonly used by most search engines, but best to add some keywords for search engines that may still use keywords. Keywords must be used in the content of the page.</p>
                        <span id="charsusedKeywords">0 out of 1000 characters used (list keywords separated by a comma)</span>
                        <cftextarea name="content_keywords" id="id_content_keywords" onKeyUp="updateKeywords(this)"><cfoutput>#content_keywords#</cfoutput></cftextarea>
                        </label>
                        <label for="id_content_geotag">
                        <h5>GeoTag:</h5>
                        <p>Describe your geographical service area. To have this content appear on all pages, define the geotag under the company information and leave this section blank.</p>
                        <cftextarea richtext="true" skin="office2003" name="content_geotag" id="id_content_geotag"><cfoutput>#content_geotag#</cfoutput></cftextarea>
                        </label> 
                        
                        <!---Show a Preview button and an Update button--->
                        <div class="float-left">
                        <p class="preview-button"><cfinput type="button" name="Preview" onclick="preview(this.form);" value="Preview Main Content"></p>
                        <p class="preview-text">(Preview Opens in a New Tab/Window)</p>
                        </div>
                        <cfinput type="hidden" name="SubmitPageUpdate" value="true">
                        <p class="update-button"><cfinput cfinput style="font-size:12px;" type="button" name="Submit" onclick="confirmSubmit(this.form);" value="Update Main Content"></p>
                            
                        </fieldset>
                    </cfform>

Open in new window


The javascript that determines is if is a preview or a database update:

// JavaScript Document<script type="text/javascript">
	function preview(frm) {
		frm.target = '_blank';
		frm.submit();
	}
	
	function confirmSubmit(frm) {
		var wasConfirmed = confirm("This will permanently update the website and cannot be undone.");
		if (wasConfirmed) {
			frm.target = '_self';
			frm.action = "update_content.cfm";
			frm.submit();
		}
	}

function OnSubmitForm()  

{  

  if(document.pressed == 'SubmitPageUpdate')  

  {  

   document.myform.action ="update_content.cfm";  

  }  

  else 

  if(document.pressed == 'Preview')  

  {  

    document.myform.action ="preview/preview.cfm";  

  }  

  return true;  

}  

Open in new window

0
Comment
Question by:lonnyo
  • 3
  • 2
  • 2
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39242981
Tad confused if you don't want the page to submit then why are you submitting it with
 onBlur="this.form.submit()"
0
 

Author Comment

by:lonnyo
ID: 39254245
Sorry for the delay - I got pulled onto another project.  

When the user enters a Page Name (this is the text for the navigation link) I want it to fill in the next field with a suggested url.  For example if the Page Name is "About Us" I want it to fill in the url with "about-us".  In order for this to happen I need to use AJAX.  

The problem is that instead of filling in the next field, it is executing the Preview.  I need to figure how to tell the browser it is not a Preview submission when the user leaves the Page Name field.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39254750
Not sure I'm following.
Your onblur should call a function onblur="dosomethingwiththeurl()"

Then you have your function
function dosomethingwiththeurl(){

}


All your onblur is doing at the moment is submitting the page.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:lonnyo
ID: 39256085
Is there a way I can call the function that is tied to the Preview button to only work when that button is clicked?
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 39268232
You can tie the onclick event on button to manipulate the  "action" and "target"

Look at the example at

http://www.daniweb.com/web-development/php/threads/437093/how-to-create-form-preview-before-form-submit
0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 39268264
or if you do not want to make trip to server, you can do so by javascript

e.g.

<html>
      <head>
            <title>Preview</title>
<style type="text/css">
      div.preview { display : none; background-color:#FF9933; font-size: 20px; position: absolute; left:100px; top: 100px; }
</style>
<script type="text/javascript">
      
function displayText() {
      alert ("yyy");
  var frm = document.f1;
  var str = "<p>CLICK ON HERE to see form</p>";
  var sBreak = "<br />";
  str += "Name: " + frm.firstname.value + " " + frm.lastname.value + sBreak;
  if (frm.agree.checked) str += "They agreed." + sBreak;
  // once you have all the info in "str"
  //   assumes "fname" is where you want to show the info
  document.getElementById('preview').innerHTML = str;
  document.getElementById('preview').style.display='block';
  document.f1.style.display="none";
 
}
function Toggle() {
  document.getElementById('preview').style.display='none';
  document.f1.style.display="block";
 
      
}
</script>
      </head>
      <body>
<form name="f1" style="display:block;">
<br/>First Name:<input type="text" name="firstname" value="First "/>
<br/>Last Name<input type="text" name="lastname" value="Last Name"/>
<br/><input type="checkbox" name="agree"/>Agree
<input type="button" onclick="displayText()"/>

</form>
<div class="preview" id="preview" onclick="Toggle();">&nbsp;</div>
      </body>
</html>
0
 

Author Closing Comment

by:lonnyo
ID: 39271373
Thank you
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now