Form to new window back to parent suggestions needed

[gnetcon]

Hello, everyone!

I have inherited a site that is built quite nicely with PHP and jQuery, and I've been asked to add a new feature to some forms. I'm experienced in PHP, but haven't done much in jQuery (or Javascript, for that matter) for a LONG time.

There are several configuration forms where data can be changed to suit the users needs. A new feature request is to add an audit trail that shows what (and who) changed for each entry.

To do this, I need to open a smaller pop-up window for each submit and ask for a reason why an item is being added, edited, or removed. When the form is submitted, this will be collected back into the original form and posted.

So, I need to determine if it would be better to:

1) Open the window, collect the reason, populate a hidden field on the parent window, and when the form is submitted in the pop-up window, close the pop-up and submit the parent form with the hidden field filled-in, or;

2) Submit all of the contents of the form to the new pop-up, process there, and after submitting return the user to the parent window and close the pop-up.

Any suggestions (and code samples) would be greatly appreciated. If there's a solution in jQuery that I missed, please feel free to remind me.

TIA!

[ashish21cool]

From what you wrote, I understood the following:
1) You need a pop up to get the reason filled in for why that particular entry is added/changed.....

I think you should do the following:
1) Collect all the information on the parent.
2) There should be some space (fields) left in for the reasons to be filled in. There are two ways to fill this in a) You create a pop up and then on pop up submit fill that fields in the parent which can be hidden/noneditable. b) Dont introduce popup but instead fill in the reasons directly in the parent itself.

However if you need to use pop up then what you can do is use case 2a. When you use this then the flow should be something like this Parnet to Popup to parent and then final submit.

Let me know if you need anything else.

[gnetcon]

ashish21cool:

Thanks for the reply.

The client has directly requested that the reason be filled in in a pop-up window. It would have been extremely easy to just add a reason textarea to each page that needed it.

Would you happen to have any sample code to fill in a parent form value from a child window? I'm also guessing I use the onSubmit call to open the window?

Thanks again.

[ashish21cool]

There can be 2 ways to do this.
1) Add a Reason button in the parent and on its click get a form up.
2) On parent button submit call a pop up with the ID (some kinda key) of the parent and then with that has a key add the reason and add the data to the db.
3) On parent submit call a pop up and on child submit call a function that will fill the fields on the parent.

Hope this helps u out.

Besides I dont have the code. I will have to write the code in specific.

Let me know if you have any issues.

Thanks.

[rocknbil]

You open a new window.

<form action="" id="base-form" onSubmit="return (chkReason(this);">
<input type="hidden" value="reason_provided" id="reason_provided" value="0">
....

I purposely left out your parent's "reason" field because it can be any type - a text field, a hidden field, whatever. Assume there is an element in this form with name and ID reason. (.."hidden" id="reason"...)

Watch the reason_provided hidden field:

....

chkReason(form) { 
 if (document.getElementById('reason_provided').value==0) { 
 var day = new Date(); 
 var id=day.getTime(); 
 var win=open('reason.html',id,'width=400,height=600,resizable,scrollbars'); 
 // always, always, always include resizable and scrollbars! 
 } 
 else { 
  // add form field validation code here 
  form.submit(); 
 } 
 // Always return false, allow JS to manage submit 
 return false; 
} 
.... 

So first time through, it will not submit, it will open the new window.

You have the new window containing reason.html open in front of you.

<form action="" onSubmit="return addReason(this);">
....
<textarea name="reason" id="reason"></textarea>
....
</form>

......

function addReason(form) { 
 var parent_reason_provided = window.opener.document.getElementById('reason_provided'); 
 var parent_reason_field = window.opener.document.getElementById('reason'); 
 // Opener's reason field = THIS form's reason field 
 parent_reason_field.value = document.getElementById('reason').value; 
 parent_reason_provided.value=1; // Parent reason provided is no longer zero 
 window.close(); 
 // Again, return false on this form 
 return false; 
} 

1. Without a provided reason, opens new window and collects it.
2. After collecting, populates parent reason value, silently if that's a hidden field.
3 Sets reason provided to 1, so now the form will submit.

Untested, but this logic should work for you.