Setting form target to _blank causes 2 windows to open - javascript

I'm using the following script with a Paypal button, which works well, except for the fact that 2 windows open to Paypal, instead of one. I would appreciate if anyone could help me get just 1 window to open. This is inside of an asp.net project. There is one form in the source on the page.
function submitFormToPaypal() {
var formElementsArray = document.getElementsByTagName('FORM');
if (formElementsArray != null) {
var formElement = formElementsArray[0];
document.getElementById('__VIEWSTATE').name = 'NOVIEWSTATE';
formElement.action = 'https://www.paypal.com/cgi-bin/webscr';
formElement.setAttribute("target", "_blank");
formElement.submit();
}
}

If you call your function on submit or on click of a submit button, you need to remove the formelement.submit.
If you show the HTML with event handlers perhaps we can suggest how to do it.

Related

Need support on new button click to open a URL - pass a document variable value as parameter

I have copied and created the app from the following website.
https://www.bpwebs.com/crud-operations-on-google-sheets-with-online-forms/
Now I want to add a button (which I did) but unable to make it work.
On click on this new button (named "Upload Files"- submit fires.... I want the following to happen when user click this button
-- Should not fire submit
-- should open a new window and open url with a parameter.
-- URL = "https://www.google.com"
-- parameter is the recid - let us assume recid has value 100046
-- dynamically generated URL -- to execute on click of this button would be "https://www.google.com?id=100046"
I am completely new to google sheets and app script. So bear with me for naïve. Please can anyone help me with this. Thanks to the SO community for making people life easier.
Maybe you are looking for:
Event.preventDefault()
window.opener.postMessage()
const url = 'https://script.google.com/macros/s/AKfycbwyTJsFDgeboCt3jcyKI6KQtZ6svIHPynaStM9AwvzCgCFmbds/exec';
const form = document.forms[0];
form.addEventListener('submit', function(e) {
e.preventDefault();
window.open(url + '?recid=' + form.recid.value);
});

JavaScript method not working in HTML

So I have a button that calls the AllEntered() javascript method when it is clicked and as you can see in the final if/else, it should either got to submission.html or admin.html but instead of going to either of those it just reloads the current page that I am on. This is all inside a form by the way and its purpose is to check if all checkbox inputs are checked. Also the alert doesn't i put for loop-number doesn't generate either.
zbutton onclick="AllEntered()" class="myButton">Submit</button>
<script>
function AllEntered()
{
var ids = {"freshSoph", "participate", "respect", "leave", "illegal", "alcohol", "typeName"};
var loopNumber = 0;
for(var i = 0; i < ids.length - 1; i++)
{
if(document.getElementById(ids[i]).checked)
{
loopNumber++;
alert(loopNumber.value);
}
}
if(loopNumber = ids.length)
{
window.open("submission.html");
}
else
{
window.open("admin.html");
}
}
</script>
Open your browser developer tools. Read the error message.
You have a typo. An array is created with [], not {}.
(And of course it reloads the page, that is what clicking a submit button inside a form does).
In your form, below this button, add one more button as a hidden input of type submit like so:
<button hidden type="Submit">
Your problem could be caused by the fact that you are missing a submit type button.
When a form has no button of type Submit ( which on click will submit the form to its target or TO ITS SELF if no target is specified. This is what we call postback, as in posting back to your self ) it will use any buttons click as a submit event raiser.
By adding an actual submit button you remove this default behaviour, while also ensuring the user cant click on it, as the control is not active when its hidden.

Trigger form submission in chrome javascript console

Just a little thing I've always wondered:
Is it possible to submit a form on any webpage, rather than clicking the forms submit button, I want to do it from the chrome console (ctrl+shift+j in chrome)?
I've tried a couple ways but I either get an error like
Cannot use function submit on undefined
or
HTML tag has not function submit.
Any help?
PS - If you go here and try and submit the form on your right through the console click here
form = document.getElementById("frm1")
form.submit()
works on your example when viewing the standalone iframe.
For your example when working with an iframe:
// from http://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript
function iframeRef( frameRef ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
var inside = iframeRef( document.getElementsByTagName('iframe')[0] );
// from #DeanGrobier
form = inside.getElementById("frm1")
form.submit()
It is inside an iframe in your example. In your case, you must enter this in the console for it to work:
var q = window.document.getElementsByTagName('iframe')[1];
var r = q.contentWindow.document.getElementById("frm1");
r.submit();
or, in just one line:
window.document.getElementsByTagName('iframe')[1].contentWindow.document.getElementById("frm1").submit();

How to add history to jQuery UI tabs using a back button

I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain
forms. Forms and tab work fine - expect to this: I submit the form (POST
method not XHR), then click the right mouse button (Firefox and IE behave
identical) and select back and then select tab five in the page by mouse
click the entered form data is still available.
I try to build a link, that is more convenient for the user.
<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>
If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.
I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.
Where is my fault and is the difference between doing this steps by hand and my link with JS?
Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.
Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.
The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.
The function is:
$(function() {
var $previousTab = 0;
var $backButtonUsed = false;
// Initialise tabs
$("#tabs").tabs();
$("#tabs").bind("tabsselect", function(event, ui) {
if ($backButtonUsed)
{
$backButtonUsed = false;
} else {
$previousTab = $("#tabs").tabs('option', 'selected');
}
return true;
});
$("#back").live('click', function() {
$backButtonUsed = true;
$("#tabs").tabs({ selected: $previousTab });
return true;
});
});​
I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.
Let me know what you think.

jquery dialog submit button cannot control enable/disable

I've been battling with this issue all day. I am hoping someone has an answer for me. I did a bunch of searching and can't seem to find an answer.
I have a page that has 3 forms on it. I am working within the 2nd form. None of the forms are embedded within another form.
I have a hidden div that contains two form elements, a drop down list and a text box, and a submit button that I anticipated it posting to the form it is enclosed in. On another button within the form itself (not submit button), I have javascript that launches jquery.Dialog, that code looks like this:
function showReleaseDiv() {
var div = $("#ReleaseHoldsDiv");
var f = div.closest("form");
div.dialog({ width: 270, height: 187, modal: true, title: 'Bulk Hold Resolution' });
div.parent().appendTo(f);
}
This part does function correctly. I've overcome the typical jquery issue where it pulls the contents of the dialog out of the form, so I put it back in the form, but wonder if this is causing my real issues which are:
The drop down list and text box are both required before I post, so I default the submit button to disabled, then I have an onchange event on the drop downlist, and the onkeyup on the text box call the following javascript:
function enablePopupRelease() {
var button = $("PopupReleaseButton");
if (button && button != null) {
button.attr("disabled", "disabled");
if ($("#ResolutionTypeCode").val() != "" && $("#ResolutionComments").val() != "") {
button.removeAttr("disabled");
}
}
return true;
}
Both events fire correctly and I step through the code; all seems fine, but the button disable state does not change.
Please help.
I believe you are missing a hash on this line:
Change:
var button = $("PopupReleaseButton");
to
var button = $("#PopupReleaseButton");
firstly I would clean some code as follows:
function enablePopupRelease() { var button = $("PopupReleaseButton"); if (button) { button.attr("disabled", "disabled"); if ($("#ResolutionTypeCode").val() && $("#ResolutionComments").val()) { button.removeAttr("disabled"); } } return true; }
Let me know if makes any difference please?
if you break through the code ... does it stop at button.removeAttr("disabled"); please?
Are you using the jQuery UI button widget for the form's submit button? If so, you will need to call
$("#PopupReleaseButton").button({disabled: true});
to disable the button.
disabled isn't an attribute, it's a property -- try using button.prop('disabled',true) and button.prop('disabled',false) instead.
http://api.jquery.com/prop/

Categories