lonnyo
asked on
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()
The problem is that when I use onBlur="this.form.submit()
I have included the section of code below:
The javascript that determines is if is a preview or a database update:
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()
The problem is that when I use onBlur="this.form.submit()
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> </td>
<td><a href="rollback.cfm?activate=#get_versions.content_id#" title="Rollback to this Version">Rollback</a> </td>
<td>Created on: #DateFormat(content_created,'mmm-dd-yyyy')# #TimeFormat(content_created,'short')# </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> <span style="color:##06C; font-weight:bold;">Currently Editing...</span></cfif></td>
</tr>
</cfoutput>
</table>
<p> </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>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;
} ASKER
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.
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.
Not sure I'm following.
Your onblur should call a function onblur="dosomethingwiththe
Then you have your function
function dosomethingwiththeurl(){
}
All your onblur is doing at the moment is submitting the page.
Your onblur should call a function onblur="dosomethingwiththe
Then you have your function
function dosomethingwiththeurl(){
}
All your onblur is doing at the moment is submitting the page.
ASKER
Is there a way I can call the function that is tied to the Preview button to only work when that button is clicked?
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
Look at the example at
http://www.daniweb.com/web-development/php/threads/437093/how-to-create-form-preview-before-form-submit
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you
onBlur="this.form.submit()