Solved

Override form target with jquery etc

Posted on 2013-01-13
14
532 Views
Last Modified: 2013-01-23
Hi, am using a wordpress plugin User Meta Pro to show a login and register form - in a Fancybox iframe. So the problem is when the user clicks submit in either form it opens up the target url in the iframe...is it possible to override the default target for the form and set it to parent?

Below is code I have tried - this method worked in the past when I knew the form had no target defined by default. This time I am dealing with a plugin - the coders are not getting back to me on this - and I cannot find where the form code is generated so want to just override the target part - is it possible somehow? Is there a way to intercept the default action before it executes (I presume the problem)? Thanks.

$("#insert_user").click(function(){        // The button to submit form
$(".um_user_form").attr('target', '_parent');     // The form attribute
});
0
Comment
Question by:alexmaestro100
  • 8
  • 6
14 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38776481
no need to wait for the click, put the target on DOM ready :

$(document).ready(function() {
       var form = $(".um_user_form");
       if(form.length==0) alert("FORM NOT FOUND!!!"); // REMOVE THIS IF IT WORK
       form.attr('target', '_parent'); // THAT WORK ONLY IF PARENT AND CHILDREN ARE IN THE SAME DOMAIN
});

Open in new window


if that don't work please provide a link to your wordpress site : http://goo.gl
0
 

Author Comment

by:alexmaestro100
ID: 38777452
Sorry that's basically what I've already tried. I am working locally so cannot give website link, thanks anyway.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38777880
A local wordpress site? OK....
I added an alert what it say?
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:alexmaestro100
ID: 38778388
Your alert comes up - and also I noticed the form target is loaded as parent in the browser with the rest of your code. But it does not target parent when submitting form.

In the form code there is this line: onsubmit="umInsertUser(this); return false;

which I presume may be the problem, but don't know how to override it's target value! Thanks for suggestions.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38778433
if the alert comes up that mean you did not have the form when the script run...
0
 

Author Comment

by:alexmaestro100
ID: 38778499
OK how can I fix this? Thanks.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38778516
please confirm :
- you put the code to the page in the iframe not in the parent
- both page are on the same domain
0
 

Author Comment

by:alexmaestro100
ID: 38779145
Both yes - and I can see the code for the form target is affected, it just doesn't work when submitted. The alert does not come up (unless I take the 'if' out).

I am trying a workaround by putting "parent.$.fancybox.close()" on the submit button and redirecting manually - this works but ruins the form validation - is there a way with jquery to only do the code if the form is sent (filled out correctly)? All the validation is in place, just needs something on the button code.

I would obviously prefer your solution! Thanks.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38779222
In the form code there is this line: onsubmit="umInsertUser(this); return false;

try this :
$(document).ready(function() {

$("form:eq(0)").removeAttr("onsubmit").submit(function(evt) {
alert("test ok");
      evt.preventDefault();
      $(".um_user_form").attr('target', '_parent');;
      umInsertUser(this);
});

})

Open in new window

0
 

Author Comment

by:alexmaestro100
ID: 38779256
The alert came up OK but still no target parent!!!! Thanks for the effort!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38779299
ok, so I can help you more without seeing your page, so if you're gonna to put this wordpress site online, let me know or just wait help of someone else.
0
 

Author Comment

by:alexmaestro100
ID: 38779309
Thanks anyway.
0
 

Accepted Solution

by:
alexmaestro100 earned 0 total points
ID: 38794295
It's me again! I just loaded the content into fancybox with a div, no need for iframe! Thanks for help anyway.
0
 

Author Closing Comment

by:alexmaestro100
ID: 38809149
I solved it myself.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now