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");
Related
I tried to create an embed message using a discord webhook and a javascript post method.
Here's the method I use:
function requestWithoutAjax( url, params, method ){
params = params || {};
method = method || 'post';
// function to remove the iframe
var removeIframe = function( iframe ){
iframe.parentElement.removeChild(iframe);
};
// make a iframe...
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.onload = function(){
var iframeDoc = this.contentWindow.document;
// Make a invisible form
var form = iframeDoc.createElement('form');
form.method = method;
form.action = url;
iframeDoc.body.appendChild(form);
// pass the parameters
for( var name in params ){
var input = iframeDoc.createElement('input');
input.type = 'hidden';
input.name = name;
input.value = params[name];
form.appendChild(input);
}
form.submit();
// remove the iframe
setTimeout( function(){
removeIframe(iframe);
}, 500);
};
document.body.appendChild(iframe);
}
When I try to call this method with this JSON: {"content":"Some message"} the webhook sends "Some message" into my discord chat.
But when I try to use an embed (https://discordapp.com/developers/docs/resources/webhook#execute-webhook & https://discordapp.com/developers/docs/resources/channel#embed-object), with this JSON: {"embeds":[{"title":"A title","description":"A description","color":3447003}]} it just doesn't send the embed message.
Am I formatting the JSON wrong, or is it something other?
Maybe someone of you can solve my problem.
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;
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..
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.