Form to save data & open a new window/popup

Forum Moderators: coopster

Message Too Old, No Replies

Form to save data & open a new window/popup

LinusIT

2:18 pm on Apr 24, 2012 (gmt 0)

I've researched this somewhat and I get the impression AJAX is the way forward, I'd just like to see what others think about how to do what I need.

Basically I have a form that gets filled in, on submit it saves that data to a MySQL database. This works and is the easy part.

What I'd like to achieve is a link/button which opens a floating dialog window (this I can do) but saves the form data in the database before opening the window.

So the process would be

Click Link > Save Data > Display Dialog

Any suggestions/help would be fantastic, thanks.

cffrost2

2:34 pm on Apr 24, 2012 (gmt 0)

AJAX would be a smooth way of doing it. However, you could also do it with plain old js after your php form submits the data to the db using an "if" statement. (depending of course on how you set your code up)

Such as


//when data saved 
if($savedData)
$success = TRUE;

//in the <body> tag
<body <?php if($success) echo 'onload="floatingDialog()";?>>

Just a thought. Otherwise, AJAX is a quick and easy way of achieving what you want also.

rocknbil

3:52 pm on Apr 24, 2012 (gmt 0)

Click Link > Save Data > Display Dialog

This is really more of a Javascript question than anything. You'd first have the form submitting the data.

<form id="submit-form">
blah
</form>

when that submits, we'll trigger opening the second form, but we won't use inline javascript to do it.

Next you have your "modal" form, on the same page, and below all other output (or above, doesn't really matter as you'll see).

<form id="modal-form">
blah
</form>

Style it to display none.

#modal-form { display: none; }

With that stage set, if you want to build it manually from scratch, you can use window onload to attach behaviors to the forms. This can be in the head, or better just before the closing body tag, but preferred is an external file.

window.onload=function() {
document.getElementById('submit-form').onsubmit=function() { return process_request(this); };
};

You can attach other functions inside the window.onload block, we'll just start with that one.

your function "process_request" would accept a reference to the form object as a parameter ("this" keyword) and return false because you'd let Ajax handle the submit. after that, you'd set the position of the modal form and set it to block.

function process_request(the_form) {
// Your ajax code here that submits data from the_form
show_modal();
return false;
}

The return false is important. It's what stops the page from navigating on submit.

function show_modal() {
// These are likely incorrect.
frm = document.getElementById('modal-form');
if (frm) {
frm.style.position='absolute';
frm.style.left='50%';
frm.style.top='100px';
frm.style.display='block';
}
}

I'll say it again - those are probably incorrect as I haven't done it that way in a long time. The second solution (of which there are probably thousands,) use jQuery and one of the lightbox libraries out there to do this. With inclusion of the libraries, there's probably 10 lines of code you'll need to write to do both the Ajax calls and the modal box and it will look a lot nicer.

Not discussed here (and REALLY important) is how you'd work this so it still works with Javascript disabled. If you haven't already, go ahead and work through the project WITHOUT the lightboxed modal. then using those resources, go back and apply Javascript/Ajax to achieve the above result.

LinusIT

7:51 pm on Apr 25, 2012 (gmt 0)

Thank you for the reply, once again RocknBill very informative, I've learnt from what you've said. Also cffrost2, you've given me an idea for a different problem I was facing.

Here's where I'm at with it.

I had already implemented Fancybox to display the popup form and have got it using AJAX to process the information, works great. I have one issue remaining, I'll post the code first.

Inline form:

<div style="display:none">
<form method="post" id="item_form" name="add_item" action="" autocomplete="off">
<input type="hidden" name="form_xyz" value="items_form" />
<p>
<label>Grade</label>
<div class="ausu-suggest"><input type="text" class="w100" id="grade" name="grade" value="" /><input type="hidden" name="grade_id" id="grade_id" /></div>
</p>
<div class="clear"></div>
<p>
<label>Weight</label>
<input type="text" class="w100" id="weight" name="weight" value="" />
</p>
<div class="clear"></div>
<p>
<label>Price</label>
<input type="text" class="w100" id="price" name="price" value="" />
</p>
<div class="clear"></div>
<p>
<input type="submit" name="submit" value="Save" />
</p>
</form>
</div>

Fancybox & Ajax:

<script type="text/javascript">
$(document).ready(function() {
$("#add_item").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'onClosed': function() {
}
});

$("#item_form").bind("submit", function() {

$.fancybox.showActivity();

$.ajax({
type: "POST",
cache: false,
url: "/tickets/add_items.php",
data: $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});

return true;
});
});
</script>

Add item(s) link:

<h2><a id="add_item" href="#item_form">Add Item(s)</a></h2>

Javascript:

<script type="text/javascript">
window.onload=function() {
document.getElementById('add_item').onclick=function() {
document.ticket_form.submit();
//return process_request(this);
};
};
</script>
<script type="text/javascript">
function process_request(the_form) {
// Your ajax code here that submits data from the_form
//show_modal();
//Code to display fancybox on page return
$(document).ready(function() {
$("#add_item").fancybox().trigger('click');
});
return false;
}
</script>

I think that's everything that's relevant.

Here's what happens now: I fill part of the main form in and then click "add item(s)", this then submits the form bringing me back to the same page but with the last ID from the database. I need it to display the "Add items" form next.

If I uncomment "//return process_request(this);" it loops through the insert sql indefinately.

It's 90% there, I don't like the fact I have to refresh the page but as far as I know there's no other way of doing it. The reason for the submit form and return an id is so that the item's which are then added have an id to be matched against.

cffrost2

3:16 pm on Apr 26, 2012 (gmt 0)

I'm not fluid with ajax. I know enough to get it to work for what I need it to do. But scanning your code, I'm thinking of the steps I would take to trouble shoot. Anyways, your sql works? The fancybox works? But when you submit your form, you want the fancy box to be displayed without having to click the Add Item(s) link again, correct? And you refreshing the page then causes the fancy box to load up, right? Sorry, just trying to be clear

LinusIT

8:04 pm on Apr 26, 2012 (gmt 0)

The sql works but the fancybox isn't being displayed once the page has refreshed. That's correct, clicking add items should submit the form (so I get an ID), reload the page with the ID in the URL (which it does do) and then display the fancybox form.

Everything is working except for the last part, showing the fancybox on page return/reload.

LinusIT

10:12 am on Apr 27, 2012 (gmt 0)

I've figured out why it was looping, seems so obvious now.

I've got add_item on click function of Submit form, then on return it clicks the same link to load the fancybox, but that first bit of code gets repeated over and over again.

cffrost2

3:12 am on Apr 28, 2012 (gmt 0)

I see it now. :) Sometimes things are well hidden in plain sight.

So the fancybox.trigger event is fixed now and the fancybox is now displaying when loaded? My thought was you could use fancybox as an iframe to display the form as an external file, then use ajax to submit the form and the fomr would then refresh within fancybox keeping the whole page from having to reload. (even used as an iframe, it still looks and works flawless)

$("#add_item").fancybox({
'width' : '75%',
'height' : 75%',
'autoScale' : true;
'transitionIn' : 'fade', 
'transitionOut' : 'fade', 
'speedIn' : 600, 
'speedOut' : 200, 
'type' : 'iframe',
'href': 'http://www.example.com'

I just loaded it to one of my sites for a go. I'm having a bit of trouble figuring out how to pass variables from the fancybox back to the "parent" window. Seem like it should be easy enough to write a bit of js and be done but seems that fancybox ignores all other js outside of the code actually calling the fancybox function. It'll take some work, but I'll make it happen I'm sure :)

LinusIT

1:57 pm on Apr 30, 2012 (gmt 0)

I've changed the fancybox so it is an iframe of "items.php". Using a test link this displays fine. Items.php sends the form data to add_items.php, this works fine as well.

Using the #add_item link, the form submits, page comes back with an ID but the fancybox isn't being displayed. There's something wrong with the return_process function I think.

One thing I've noticed now it's using an iframe is that once I've submitted the form (in the fancybox) the page/fancybox goes blank. Is this because I've set the form to process using add_items.php which only submits the sql.

LinusIT

2:28 pm on Apr 30, 2012 (gmt 0)

Would it be helpful if I posted all the code I'm using (removing all irrelevant bits) so you can see what I'm working with?

LinusIT

3:05 pm on Apr 30, 2012 (gmt 0)

Abit of success now..

I've changed items.php (fancybox form) to submit data via itself, not through another file and used the header directive to reload items.php within the iframe. So when I add an item it inserts it into the database, reloads the page so I can add another.

It's just the loading of said form on page load now.

cffrost2

9:34 pm on Apr 30, 2012 (gmt 0)

Give this a go.

$.fancybox({
'width' : '75%',
'height' : 75%',
'autoScale' : true;
'transitionIn' : 'fade', 
'transitionOut' : 'fade', 
'speedIn' : 600, 
'speedOut' : 200, 
'type' : 'iframe',
'href': 'http://www.example.com' 
});

(same as b4 your just removing the ("#add_item") trigger.)

This is the "manual method" of calling fancybox when the document loads. I tried it in Chrome and it works flawless. If you want it to only auto load if the ID is set from the last insert, have it print the code if the id isset.

<?php if(isset($_POST['id']) && !empty($_POST['id']))
{ ?>
$.fancybox({
'width' : '75%',
'height' : 75%',
'autoScale' : true;
'transitionIn' : 'fade', 
'transitionOut' : 'fade', 
'speedIn' : 600, 
'speedOut' : 200, 
'type' : 'iframe',
'href': 'http://www.example.com'
});
 <?php
} ?>

Hope this works for you. Let me know.

LinusIT

8:41 am on May 1, 2012 (gmt 0)

After much searching and testing I've managed to get the fancybox to load on page load (on a seperate test file), I had to change the code to the following:

jQuery(document).ready(function() {
$.fancybox.init();
$("#add_items").trigger('click');
});

The only remaining issue is to process this command after the form submits.

As you know I have some js to submit the form when "Add Items" is clicked, and within that js there is return process_request().

<script type="text/javascript">
window.onload=function() {
document.getElementById('add_item').onclick=function() {
document.ticket_form.submit();
//return process_request(this);
return process_request();
};
};
</script>

What do I need to change within the above or below in order for it to process on return?

<script type="text/javascript">
function process_request() {
jQuery(document).ready(function() {
$.fancybox.init();
$("#add_items").trigger('click');
});

}
</script>

LinusIT

8:59 am on May 1, 2012 (gmt 0)

I've just noticed that the fancybox is starting to load, then the page refreshes which stops showing the fancybox. If I comment out return process_request() then all that happens is the form submits.

I think the process_request is being ran straight away, then the form submitting which cancels out loading the fancybox.

rocknbil

3:59 pm on May 1, 2012 (gmt 0)

Does process_request() still have this at the end?

function process_request(the_form) {
return false;
}

This is why you have return process_request(this). Remember that returning false stops any element from performing it's natural action - a link, a form, anything. (In jQuery it's event.preventDefault() );

If it's in place, it won't navigate (or submit) anywhere - UNLESS you encounter an error in your Javascript. Checked error control panel in FireFox?

LinusIT

3:41 pm on May 3, 2012 (gmt 0)

I have changed the code so it has what you've said above but it still doesn't work. The fancybox overlay flashes up then the form submits and the page reloads.

Any ideas?

rocknbil

3:50 pm on May 3, 2012 (gmt 0)

If you have
- placed the handler in form submit as described
- are returning false from the function itself

The only possible explanation with the info given is

UNLESS you encounter an error in your Javascript. Checked error control panel in FireFox?

Are there any JS errors?
If not, add some alerts to figure out what's up?