How to submit two forms on 2 different .htm files to the same place

StackOverflow https://stackoverflow.com/questions/21895046

Question

I'm trying to essentially have the submit button of search.htm be able to create a pop up with a text area which the users are required to enter a comment describing their actions and click the submit button in the pop up to effectively submit both forms to the same processing page. Both the forms in search.htm and frm_comment.htm will submit both sets of data back to search.htm which calls cfinclude on the server processing logic (server.htm).

In the below code I'm having the the "createPeriod" button submit everything that is in the "srch" form. It is also creating a pop up window which has a html textarea that allows the user to enter a comment. There is a reason that I need to split up the main form from the comment form (frm_comment.htm) but it's very specific to the task I'm trying to accomplish.

search.htm is structured roughly as such:

//include the template here to process the forms
<cfinclude template="../server.htm"> 


<cfform method = "post" action = "search.htm" name="srch" format="html">
  <table>
    //bunch of form fields here
                .
                .
                .
                .
    //bunch of form fields here

    <cfinput type="submit" name="createPeriod" value="Create" 
     onClick="ColdFusion.Window.create('comment', 'CommentBox',
     'frm_comment.htm', {center:true,modal:true})">
  </table>
</cfform>

I've tried to change the submit button in search.htm to just a cfinput type="button" because keeping it as a submit will make it so that the comment box will appear for a brief moment while the page reloads and disappear as soon as the page reloads. However, I was unable to preserve the form data from search.htm when changing the submit button to a regular button.

I've also tried to have my comment form's submit button's onClick function call a javascript function to submit both forms (to no avail) like so:

submitForms = function(){
  document.forms["srch"].submit();
  document.forms["srch1"].submit();
}

<cfinput type="button" name="submitComment" value="Submit" onClick="submitForms()"/>

Please advise on the best way to accomplish this task, sorry about the messy code.

Was it helpful?

Solution

This a very basic example, on how to have your 2 forms in one. The JavaScript will just show the comment form when the user clicks on "Search".

<!DOCTYPE html>
<html>
<head>
    <style>
    #hiddenStuff {
        display: none;
    }
    </style>
</head>
<body>

<form action="...">
    // search fields here
    <input type="button" value="Search" onclick="document.getElementById('hiddenStuff').style.display='block';">

    <div id="hiddenStuff">
        // comment form stuff here
        <input type="submit" value="Submit">
    </div>
</form>

</body>
</html>

I also made a fiddle, if you want to see the result in action.

Sorry I'm not familiar with ColdFusion, but it shouldn't be too hard for you to translate :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top