[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 347
  • Last Modified:

Multiple Ajax form submissions

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
lonnyo
Asked:
lonnyo
  • 3
  • 2
  • 2
1 Solution
 
GaryCommented:
Tad confused if you don't want the page to submit then why are you submitting it with
 onBlur="this.form.submit()"
0
 
lonnyoAuthor Commented:
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
 
GaryCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
lonnyoAuthor Commented:
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
 
Pravin AsarPrincipal Systems EngineerCommented:
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
 
Pravin AsarPrincipal Systems EngineerCommented:
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
 
lonnyoAuthor Commented:
Thank you
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now