I am using the following code in my ionic project to open the new system browser and post the values. For some reason the the new windows doesn't open.
I don't get any kind of errors. The link does open but in self browser. I want it to open in the android system browser.
var mapForm = document.createElement("form");
mapForm.target = "_blank";
mapForm.method = "POST";
mapForm.action = "http://www.example.com/api/form.php";
// Create an input
var firstname = document.createElement("input");
var lastname = document.createElement("input");
var address = document.createElement("input");
var email = document.createElement("input");
firstname.type = "text"; firstname.name = "firstname"; firstname.value = "John";
lastname.type = "text"; lastname.name = "lastname"; lastname.value = "Doe";
email.type = "text"; email.name = "email"; email.value = "user#example.com";
// Add the input to the form
mapForm.appendChild( firstname );
mapForm.appendChild( lastname );
mapForm.appendChild( email );
// Add the form to dom
document.body.appendChild(mapForm);
// Just submit
mapForm.submit();
Using _system will work.
Here is an example:
window.open(url,'_system','location=yes'),!1;
Related
Download file option (using blob) is present along with another form submit option on a single page. The form result gets downloaded instead of opening in a new tab when download option is selected before form submit.
This happens only in Safari. Rest of the browsers works as expected.
Safari version 11.0.1
macOS Sierra version 10.12.6
Example jsfiddle - https://jsfiddle.net/e8n9982f/
var $button1 = $("#btn-1");
var $button2 = $("#btn-2");
// Save Locally
$button1.on('click', function() {
if (typeof(Blob) !== "undefined" && !!new Blob()) {
var codeToSave = '<!doctype html>' +
'<html lang="en">' +
'<head>' +
'</head>' +
'<body>' +
'<h1>Hello, world!</h1>' +
'</body>' +
'</html>';
var codeBlob = new Blob([codeToSave], {
type: "text/html"
});
var codeSaveAsURL = window.URL.createObjectURL(codeBlob);
var fileNameToSaveAs = "temp-file.html";
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // For IE, Edge
window.navigator.msSaveOrOpenBlob(codeBlob, fileNameToSaveAs);
} else {
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.href = codeSaveAsURL;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
window.URL.revokeObjectURL(codeBlob);
codeSaveAsURL = null;
codeBlob = null;
}
return false;
});
// Open in JSFiddle
$button2.on('click', function() {
var form = document.createElement("form");
form.id = "submitToFiddle";
form.style.display = "none";
form.method = "post";
form.action = "https://jsfiddle.net/api/post/library/pure/";
form.target = "check";
// form.target = "_blank";
var input = document.createElement("textarea");
input.name = "html";
input.innerHTML = '<h1>Fiddle!</h1>';
document.body.appendChild(form);
form.appendChild(input);;
input = document.createElement("input");
input.type = "submit";
form.appendChild(input);
form.submit();
document.body.removeChild(form);
return false;
});
To reproduce the issue in Safari, first click on the 'Save Locally' button and then the 'Open in JSFiddle' button.
If 'Open in JSFiddle' button is clicked first and then the 'Save Locally' button, it works as expected.
I am unable to find any reference to why Safari is behaving this way.
I had the same issue Clicking a download link in Safari causes all target=_blank links to download when clicked, is there a workaround?
There was no workaround unless I set to _self for the target, which sucked.
But I've recently updated to Safari 11.1.1 and the issues seems to be resolved
I am trying to learn JS so i am writing code only in JS (there is only up to the body tag in my html code that uses the script).
I am trying in the condition mentioned above, to write a login form and validate it with a validation function.
For some reason nothing happens when I submit the form (I believe its not even calling the validate function, since I put an alert in the beginning of it).
My code:
function validateLogin() {
alert("CHECK");
var username = document.getElementById('username').value;
var pass = document.getElementById('pass').value;
if (username === "admin" && pass === "admin") {
return true;
} else {
alert("Wrong username or password!");
return false;
}
}
var loginDiv = document.createElement('div');
loginDiv.className = 'loginDiv';
var loginForm = document.createElement('form');
loginForm.className = 'loginForm';
loginForm.onsubmit = "return validateLogin()";
var username = document.createElement('input');
username.id = 'username';
var pass = document.createElement('input');
pass.id = 'pass';
pass.type = 'password';
var subm = document.createElement('input');
subm.type = 'submit';
loginForm.appendChild(document.createTextNode("Username:"));
loginForm.appendChild(username);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(document.createTextNode("Password:"));
loginForm.appendChild(pass);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(subm);
loginForm.action = "#";
loginForm.method = "post";
loginDiv.appendChild(loginForm);
document.body.appendChild(loginDiv);
edit I found that changing
loginForm.onsubmit = "return validateLogin()";
into
loginForm.onsubmit = validateLogin;
solved it for me, for some reason.
First of all you're targeting the DOM object, not the value.
Instead of:
var username = document.getElementById('username');
use:
var username = document.getElementById('username').value;
Of course this is not a good way to build an authentication system, but since it's for learning purposes, we'll go on with it. I would also not recommend using all these "appendChild" functions to create HTML.
There are better ways of doing it. Look into things like MuschacheJS and how they do rendering.
Edit:
You also need to call the function validateLogin();
You could do it like this:
document.getElementById("submitButton").addEventListener("click", function(e) {
validateLogin();
});
This code assumes that there is a button with id submitButton, but you already know how to create that.
Change your button code to the following:
var subm = document.createElement('button');
subm.innerHTML = 'click me';
subm.onclick = validateLogin();
subm.type = 'submit';
Your onsubmit attribute is not added to your form. To fix this, use .setAttribute as you can see in the code below.
A second problem is, that you don't get the value of your input fields, but the full node. For that, you need to append .value.
If you don't want that the page reloads (or redirects to any page given in the action attribute of your form when true login credentials, prepend event.preventDefault() to your validateLogin().
function validateLogin() {
alert("CHECK");
var username = document.getElementById('username').value;
var pass = document.getElementById('pass').value;
if(username === "admin" && pass ==="admin"){
return true;
} else{
alert("Wrong username or password!");
return false;
}
}
var loginDiv = document.createElement('div');
loginDiv.className = 'loginDiv';
var loginForm = document.createElement('form');
loginForm.className = 'loginForm';
// .setAttribute() allows to set all kind of attributes to a node
loginForm.setAttribute("onsubmit", "return validateLogin()");
var username = document.createElement('input');
username.id = 'username';
var pass = document.createElement('input');
pass.id = 'pass';
pass.type = 'password';
var subm = document.createElement('input');
subm.type = 'submit';
loginForm.appendChild(document.createTextNode("Username:"));
loginForm.appendChild(username);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(document.createTextNode("Password:"));
loginForm.appendChild(pass);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(subm);
loginForm.action = "#";
loginForm.method = "post";
loginDiv.appendChild(loginForm);
document.body.appendChild(loginDiv);
function crossDomainPost() {
var iframe = document.createElement("iframe");
var uniqueString = "CHANGE_THIS_TO_SOME_UNIQUE_STRING";
document.body.appendChild(iframe);
iframe.style.display = "none";
iframe.contentWindow.name = uniqueString;
var form = document.createElement("form");
form.target = uniqueString;
form.action = "http://www.roblox.com/groups/api/change-member-rank?groupId=1223714&newRoleSetId=8113155&targetUserId=58806949";
form.method = "POST";
// repeat for each parameter
var input = document.createElement("input");
input.type = "hidden";
input.name = "INSERT_YOUR_PARAMETER_NAME_HERE";
input.value = "INSERT_YOUR_PARAMETER_VALUE_HERE";
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
crossDomainPost()
This is the output error:
POST http://www.roblox.com/groups/api/change-member-rank?groupId=1223714&newRoleSetId=8113155&targetUserId=58806949 403 (XSRF Token Validation Failed)
How exactly would I make this not pop up?
I'm extremely new to cross-domain POST requests.
I don't need to send any data with it..
Im playing with some basic javascript on a website and I'm having some issues. When I run this function it redirects to the page I want and only posts the size parameter. How do I post the cost parameter as well? The syntax is really confusing me. O.o
<script>
function selectcratesize(size, cost) {
var form = document.createElement("form");
input = document.createElement("input");
crate = document.createElement("crate");
form.action = "https://www.example.com";
form.method = "post"
input.name = "username";
input.value = size;
crate.name = "cost";
crate.value = cost;
form.appendChild(input);
form.appendChild(crate);
document.body.appendChild(form);
form.submit();
}
</script>
There is no "crate" element in html:
crate = document.createElement("crate");
should be
crate = document.createElement("input");
Here is my code below,
var mapForm = document.createElement("form");
mapForm.target = "_blank";
mapForm.method = "POST";
mapForm.action = "delete";
// Create an input
var mapInput = document.createElement("input");
mapInput.type = "hidden";
mapInput.name = "uploaded";
mapInput.value = file.name;
// Add the input to the form
mapForm.appendChild(mapInput);
// Add the form to dom
document.body.appendChild(mapForm);
// Just submit
mapForm.submit();
it does work, but after submitting the value, it opens the action URL in a new window because i have given mapForm.target = "_blank"; , is it possible to submit the form without opening any windows i mean it should stay in the same window but it should not go to "delete page"?, not by using ajax...
You could send your data to an hidden iframe:
var mapForm = document.createElement("form");
mapForm.target = "myIframe";
mapForm.method = "POST";
mapForm.action = "delete";
//Create an iframe
var iframe = document.createElement("iframe");
iframe.src = "response.php";
iframe.name = "myIframe";
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.visibility = 'hidden';
iframe.style.position = 'absolute';
iframe.style.right = '0';
iframe.style.bottom = '0';
mapForm.appendChild(iframe);
// Create an input
var mapInput = document.createElement("input");
mapInput.type = "hidden";
mapInput.name = "uploaded";
mapInput.value = file.name;
// Add the input to the form
mapForm.appendChild(mapInput);
// Add the form to dom
document.body.appendChild(mapForm);
// Just submit
mapForm.submit();
// Remove mapForm
document.body.removeChild(mapForm);
You can check the new FormData HTML5 feature. It's let you send a form by Ajax (a real form like it was a normal ) : https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
If u dare using JQuery u can use AJAX to trigger a request to the serverside, in this case i assumed delete.php, very easily.
In the head of your HTML file add the following line to include the latest JQuery API.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
In your JS create your form straightforward, convert the DOM element to a JQuery object with the $ (JQuery) method and create a AJAXForm with the ajax() method of the newly created JQuery object.
<script type="text/javascript">
var mapForm = document.createElement("form");
mapForm.method = "POST";
mapForm.action = "delete.php";
// Create an input
var mapInput = document.createElement("input");
mapInput.type = "hidden";
mapInput.name = "uploaded";
mapInput.value = file.name;
// Add the input to the form
mapForm.appendChild(mapInput);
document.body.appendChild(mapForm);
var frm = $(mapForm);
frm.submit(function () {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
return false;
});
</script>
This will prevent yoor FORM from triggering a redirect to another page and instead use an asynchronious request to a server script to handle the data and push a response, that you can process within the success function of the AJAXForm.