How to open a new window on form submit - forms

I have a submit form and want it to open a new window when users submits the form so i can track it on analytics.
Here is the code I'm using:
<form action="http://URL at mailchimp subscriber URL.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" onclick=window.open(google.html,'','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');>
<label for="name">Your Name</label><input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
<br/>
<br/>
<label for="email">Your Email </label><input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<br/>
<br/>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="submit">
</form>
</div>

No need for Javascript, you just have to add a target="_blank" attribute in your form tag.
<form target="_blank" action="http://example.com"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form" class="validate"
>

In a web-based database application that uses a pop-up window to display print-outs of database data, this worked well enough for our needs (tested in Chrome 48):
<form method="post"
target="print_popup"
action="/myFormProcessorInNewWindow.aspx"
onsubmit="window.open('about:blank','print_popup','width=1000,height=800');">
The trick is to match the target attribute on the <form> tag with the second argument in the window.open call in the onsubmit handler.

For a similar effect to form's target attribute, you can also use the formtarget attribute of input[type="submit]" or button[type="submit"].
From MDN:
...this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the elements's form owner. The following keywords have special meanings:
_self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
_blank: Load the response into a new unnamed browsing context.
_parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
_top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

onclick may not be the best event to attach that action to. Anytime anyone clicks anywhere in the form, it will open the window.
<form action="..." ...
onsubmit="window.open('google.html', '_blank', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');return true;">

The code you have given, needs to be corrected. In form tag you have to enclosed the onClick attribute value in double quote:
"window.open('google.htm','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');"
You also need to take care that first parameter of window.open should also be enclosed using quotes.

I generally use a small jQuery snippet globally to open any external links in a new tab / window. I've added the selector for a form for my own site and it works fine so far:
// URL target
$('a[href*="//"]:not([href*="'+ location.hostname +'"]),form[action*="//"]:not([href*="'+ location.hostname +'"]').attr('target','_blank');

i believe this jquery work for you well please check a code below.
this will make your submit action works and open a link in new tab whether you want to open action url again or a new link
jQuery('form').on('submit',function(e){
setTimeout(function () { window.open('https://www.google.com','_blank');}, 1000);});})
This code works for me perfect..

window.open doesn't work across all browsers, Google it and you will find a way of detecting the correct dialog type.
Also, move the onclick call to the input button for it to only fire when the user submits.

Related

Email Subscription plugin in octobercms not working

I used this plugin in CMSpage. When the subscribe button is clicked no action is performed and redirects to the same page in which the formSubscribe component is added. The users are not added to the subscribers' list either. I added the formUnsubscribe component to another page. The formProfile component is also added to the same page in which there is formSubscribe component. I can't understand what I am doing wrong. The process to add the plugin is also not clear in the documentation provided.
Here is the link
to the plugin.
<form name="form-subscribe-andradedev" id="form-subscribe-andradedev" data-request="formSubscribe::onAddSubscriber" data-request-update="'formSubscribe::alert': '#result'">
<input type="email" class="form-control" name="email" placeholder="* Email" required>
<input type="hidden" name="latitude" id="latitude">
<input type="hidden" name="longitude" id="longitude">
</form>
This seems to be a javascript issue. Try this checklist;
Insert a record from the plugin's back-end form and check the event Log for errors ( Settings >> Event Log ). Has the record being created ? Any Errors ?
Check you browser console to see if there are any Javascript errors. (Combiner file working and all dependencies included e.g jQuery..)
Add the October Ajax framework tags to your layout if you haven't. As you mentioned if the page is refreshing after form submission this is most likely the problem. e.g;
<script src="{{ [
'#jquery'
]|theme }}"></script>
{% framework extras %} <!-- This tag is important -->
I haven't used this plugin but looking at the components I suggest you add each one to a separate CMS page because of the redirects. In this case remove the formProfile from the formSubscribe page and add it somewhere else.
If none of the above solves the problem and there are no errors, you should maybe contact the plugin author for support or update your question to include all the code used.

How to scrape a form that requires field validation by user?

I'm trying to scrape prices from this site:
https://www.pensketruckrental.com/quote/start.html
I can easily enter the form data, and I can activate the "Get A Quote" button and click it.
What I can't seem to do is get the form data to submit using a web scraper (I'm just doing it in VBA). When I input text using the scraper, the button remains grayed out, and even making a .click call on the button just displays errors on the form telling you not to leave the fields blank. Apparently it only recognizes data when you use an input device?
The code for one of the required fields, pickupLocation, is the following when I enter it manually (and thus the button works and the form can be submitted):
<input
type="text"
id="pickUpLocation"
name="pickUpLocation"
class="penskeValidateField penskeGoogleTypeAhead penskeInlineError ng-isolate-scope ng-touched ng-focused ng-dirty ng-valid-penske-err_loc_empty_sa ng-valid ng-valid-parse ng-valid-required"
aria-invalid="false"
aria-required="false"
country="rentalEntryCtrl.formItems.country"
penske-validate-field="pickuplocation"
required=""
autocompelete="off"
data-penske-placeholder="rentalEntryCtrl.activePlaceHolders.pickUpLocation"
ng-model="rentalEntryCtrl.formItems.pickupLocationSearchCriteria.address"
autocomplete="off">
And when I enter the data automatically using my scraper the tag & attributes read as follows:
<input
type="text"
id="pickUpLocation"
name="pickUpLocation"
class="penskeValidateField penskeGoogleTypeAhead penskeInlineError ng-pristine ng-isolate-scope ng-invalid ng-invalid-required placeholder ng-touched"
aria-invalid="true"
aria-required="true"
country="rentalEntryCtrl.formItems.country"
penske-validate-field="pickuplocation"
required=""
autocomplete="off"
data-penske-placeholder="rentalEntryCtrl.activePlaceHolders.pickUpLocation"
ng-model="rentalEntryCtrl.formItems.pickupLocationSearchCriteria.address"
autocompelete="off">
So of course I tried to copy the fields in the first code block into the second code block using setAttribute(), but even though I could change the attributes, I still couldn't get the form to submit properly.
I've looked at others that have dealt with something somewhat similar with autocorrect; their solutions have involved looking at the header and responses and just using the straight XHR to loop through the autocomplete queries, but the pricing information I'm scraping comes after several pages of form submissions, so that's not an option here.
I'm stuck I think; any ideas on how to populate the form and click the button/submit via my scraper?

How to create a simple html form in symfony2 without using formbuilder

I have a (hopefully) simple problem:
I want to use a simple html form in a sympony2 project. The Problem is, that noting is sent by get through the form.
The Url after sending the form is: localhost:8888/de/search_art?
you see... there is no string after the ? !!!
The form looks like this:
<form class="navbar-form" role="search" method="get" action="{{ path('func_search_art') }}">
<input type="text">
<button type="submit" class="btn btn-default">Send</button>
</form>
This is my routing:
func_search_art:
path: /search_art/
defaults: { _controller: FuncSearchBundle:Search:SearchArt }
I don't want to do something within a controller for it, because it is in the navbar and for this it has to appear in every page. I don't want to initialize a form variable in every controller of the page for a simple navbar search field.
Is there a possiblity to create a simple form like this in symfony2 without using a form builder and so on ... ?
Greetz Michael
Yes, you can safely keep your form written in twig in the form you presented it. No need to create a form builder in every controller and send the form to twig. The only place you will have to build it is the SearchArtAction method from SearchController, where you have the handling functionality for this form.
Also you need to give a name to your text input.
<form class="navbar-form" role="search" method="get" action="{{ path('func_search_art') }}">
<input type="text" name="q">
<button type="submit" class="btn btn-default">Send</button>
</form>
Because your input lacks the name attribute , which is the relevant attribute to create the post data/query string.
You can't it will give you: "The CSRF token is invalid. Please try to resubmit the form". Regardless of that it actually work without it. For some reason Symfony serialized the forms. I particularly hate the fact that I need the form object to use forms, in many cases I found it overkill. Your $form->isValid will also failed, but the $form->isSubmitted() will not. One of the reasons I hate the form object is how tedious it is to populate a drop down with an EntityType, instead of making simple symfony manage to make the process a damn nightmare.

Change the url for search input

I have a search form on a Drupal page (A custom view) that searches all my articles:
URL: www.site.com/articles
<form>
<input type="text" placeholder="Search Library" class="searchbox">
<button type="submit" id="edit-submit" name="op" value="Search" class="form-submit">Search</button>
</form>
When a user submits this form I get a string appended to the end of the url like this:
www.site.com/articles?search_fulltext=SEARCHTERM&op=Search
The problem is that it's not working, and to get it to work I have to search from a different page like here:
www.site.com/search?search_fulltext=SEARCHTERM&op=Search
So ultimately I would like to have my search box on a page, but when a user submits I want it to reference another url:
www.site.com/search?search_fulltext=SEARCHTERM&op=Search
I basically want to have a search box on a different page that is being searched. If that makes any sense. :)
Use the <form> tag's action attribute to submit the form to the search page like:
<form action="http://www.site.com/search">
I also just realized that you are probably only looking to search specific content types so you may wish to look into the Custom Search module (http://drupal.org/project/custom_search).

Browser won't prompt to save password

This is quite a common question but the solutions I found in other people posts are either related to a specific browser (mostly firefox) or incorrect usage of names (name="U12-678132-34")
My issues are with browsers other then Firefox (Firefox all ways works).
The form that I use is pretty standard HTML form but the submission of it is done with javascript (jQuery AJAX).
Firefox all ways asks to remember the password (if it is a new user) and refills the form if you land on that same page again. But when it comes to Chrome/Safari/IE8-9 then they never request to save a password if the form is submitted with javascript.
(By the way I did check if the browsers dont have the - never remember passwords turned on)
My submit happens when you click on the link inside the form or if you just click the "ENTER" button on your keyboard, then it initiates the $.submit() method.
Is there a specific way that the submit needs to occur so that the browser would request to save a password like firefox does? or is there a way to at least tell a specific browser like Chrome/IE to force that type of request?
Form example:
<form class="loginform" method="post" action="">
<div class="inputfield">
<input name="email" type="text" class="emailaddress inputclass" value="" title="Email Address" />
</div>
<div class="inputfield">
<input name="password" type="password" class="password inputclass" title="Password" value="" />
</div>
<div class="submit">
<div class="checking">
<img src="/preloaders/login-preloader.png"/>
</div>
<input type="submit" name="submit" value="submit" style="display:none"/>
</div>
</form>
This is browser behaviour and can't really be changed. Firefox might be "smart" enough to offer to save passwords without the form actually being submitted, but that risks having buttons in the form also trigger that option even if the button does something different. So in my opinion, it's a bad thing for Firefox to do (I've had many problems with Firefox submitting forms even though it shouldn't).
If you really want the save password option to show up, use an iframe and submit to the iframe, instead of using AJAX. You could then use AJAX from the iframe to keep the old behaviour.
attach click event to your submit button
$('#id_of_submit').click(function() {
/your ajax logic
return false;
});
and on link
$('#id_of_your_link').click(function() {
$('#id_of_submit').click();
});
this will do the trick.
Looking at the answer accepted on here - How can I get browser to prompt to save password? - it seems that a valid action might help.
But i would suggest its down to browser behaviour and cannot be controlled by HTML and/or JavaScript. If you want to remember the values entered use a Cookie
As u r doing an AJAX post, then-
Remove the <form> tags
instead of <input type="submit", use button
take the field values & AJAX post- on button click event
it might do the trick.
One of the reason is that site should have a valid certificate. If it is not secured site, password save prompt will not appear after login.