We help IT Professionals succeed at work.

Javascript with ColdFusion form using OnClick

lonnyo
lonnyo asked
on
I have a form that is used in a Content Management System to update a webpage.  The first button is a preview button, so the user can see what the page looks like before submitting it to the database. The second button submits the form information to the database so the changes are live on the site.

On submission of the update button, I want to present a message that warns the user it will permanently update the website and cannot be undone.

I want an pop up box to appear with the option to continue or cancel. I have done this before, but not combined with other actions within an OnClick event.

Here is the code I have right now:

  
<cfform class="clear-both" name="formUpdatePreviewContent" action="../#ActionFile#?CategoryID=#CategoryID#&ParentID=#ParentID#" method="post">
    <label for="Content">
    <cftextarea richtext="true" toolbar="Default" basepath="FCKEditor" name="Content" width="735" height="400">#Content#</cftextarea>
    </label>
    <cfinput type="hidden" name="ContentID" id="ContentID" value="#ContentID#">
    <cfif IsDefined("getContentByCategoryID.ContentID")>
        <cfinput type="hidden" name="ArchiveContentID" value="#getContentByCategoryID.ContentID#">
        <cfinput type="hidden" name="Label" value="#getContentByCategoryID.Label#">
        <cfinput type="hidden" name="DeleteSEOID" value="#getContentByCategoryID.SEOID#">
    </cfif>
    <cfif IsDefined("Form.CurrentCategoryID")>
        <cfinput type="hidden" name="CurrentCategoryID" value="#Form.CurrentCategoryID#">
    </cfif>
    <p>&nbsp;</p>
    <p class="center"><cfinput style="font-size:24px; width:200px;" type="submit" name="Preview" onclick="this.form.target='_blank';return true;" value="Preview"></p>
    <p class="center"><cfinput cfinput style="font-size:12px;" type="submit" name="SubmitPageUpdate" onclick="formUpdatePreviewContent.action='edit_content.cfm'; formUpdatePreviewContent.target='_self';  return true;" value="Submit Page Update"></p>
</cfform>

Open in new window


Thanks for the help.
Comment
Watch Question

View Solution Only

CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
Use a javascript confirm .  But wrap it in a function so it's more manageable.

<cfset Content = "Test <b>bolded</b> content">
<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 = "edit_content.cfm";
			frm.submit();
		}
	}
</script>
<cfform class="clear-both" name="formUpdatePreviewContent" action="../#ActionFile#?CategoryID=#CategoryID#&ParentID=#ParentID#" method="post">

	..... other form fields ...

    <p class="center"><cfinput style="font-size:24px; width:200px;" type="button" name="Preview" onclick="preview(this.form);" value="Preview"></p>
    <p class="center"><cfinput cfinput style="font-size:12px;" type="button" name="SubmitPageUpdate" onclick="confirmSubmit(this.form);" value="Submit Page Update"></p>
</cfform>

Open in new window

lonnyo

Author

Commented:
Thank you.  I was able to make that work.  What's interesting is that with the change in the code it did not send the name of the submit button as a form variable.  I was using that name  in a CFIF statement to perform the database update.

I managed to trick it by adding a hidden form variable with that name (changed the submit button so I would not have duplicate names).

It is now working like it should.

Thank you for the help (and the clean code).
_agx_
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
> I was using that name  in a CFIF statement to perform the database update.

Oh, yeah. That's because I changed it from a submit button to a regular one. Because the final code's a little simpler. But you could you could probably change it back and <form onSubmit="return ..." instead of calling the function onClick.