Develop Reference

Submit form via AJAX using plain Javascript without Jquery get checked radio button value

I do have HTML form submitting via AJAX using plain Javascript:
function XMLhttp(){
var formInputs = document.getElementById(formID).querySelectorAll("input, textarea");
var selectFormGebdat = formID;
var toCheckDatesFields = document.getElementsByClassName("checkDate");
for (var i = 0; i < toCheckDatesFields.length; i++) {
if(toCheckDatesFields.item(i).value != '') {
var returnValue = validatedate(toCheckDatesFields.item(i));
if(returnValue == false) {
return false;
}
}
}
var httpRequest = new XMLHttpRequest();
var formData = new FormData();
for( var i=0; i < formInputs.length; i++ ){
formData.append(formInputs[i].name, formInputs[i].value);
}
httpRequest.onreadystatechange = function(){
if ( this.readyState == 4 && this.status == 200 ) {
resultData = JSON.parse(this.responseText);
if(resultData.success == true) {
document.getElementById('resultok').className += ' show';
}
else {
document.getElementById('resulterror').className += ' show';
};
}
};
httpRequest.open(formMethod, formAction);
httpRequest.send(formData);
}
selectButton.onclick = function(){
XMLhttp();
}
selectForm.onsubmit = function(){
return false;
}
My problem is, that I have radio buttons and select-box. But the selected values are not submitted. F.ex.
<input type="radio" name="typ" value="anfrage"><input type="radio" name="typ" value="reservierung">
If anfrage is checked, the script is not submitting this value - there is always reservierung submitting.
Thanks for help!
Martin

I could solve this by:
var formData = new FormData();
if (!form || form.nodeName !== "FORM") {
return;
}
var i, j, q = [];
for (i = form.elements.length - 1; i >= 0; i = i - 1) {
if (form.elements[i].name === "") {
continue;
}
switch (form.elements[i].nodeName) {
case 'INPUT':
switch (form.elements[i].type) {
case 'text':
case 'hidden':
case 'password':
case 'button':
case 'reset':
case 'submit':
formData.append(form.elements[i].name, form.elements[i].value);
break;
case 'checkbox':
case 'radio':
if (form.elements[i].checked) {
formData.append(form.elements[i].name, form.elements[i].value);
}
break;
case 'file':
break;
}
break;
case 'TEXTAREA':
formData.append(form.elements[i].name, form.elements[i].value);
break;
case 'SELECT':
switch (form.elements[i].type) {
case 'select-one':
formData.append(form.elements[i].name, form.elements[i].value);
break;
case 'select-multiple':
for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
if (form.elements[i].options[j].selected) {
formData.append(form.elements[i].name, form.elements[i].value);
}
}
break;
}
break;
case 'BUTTON':
switch (form.elements[i].type) {
case 'reset':
case 'submit':
case 'button':
formData.append(form.elements[i].name, form.elements[i].value);
break;
}
break;
}
}

js keybourd function - event is undefined

what wrong in this code? why console.log(evt) returns 'undefined'?
this is my code:
var documentKeydown = (evt)=>{
console.log(evt);
if (counter == 0) {
XWhenDown = currentX;
YWhenDown = currentY;
document.onkeyup = documentKeyup();
switch (evt.keyCode) {
case 37 : currentX -= 10; break;
case 38 : currentY -= 10; break;
case 39 : currentX += 10; break;
case 40 : currentY += 10; break;
}
animationTick = Ticker.add(animation);
}
}
document.onkeydown = documentKeydown();

You should call your function only when an event happens:
var documentKeydown = ()=>{
console.log(event);
if (counter == 0) {
XWhenDown = currentX;
YWhenDown = currentY;
document.onkeyup = documentKeyup();
switch (event.keyCode) {
case 37 : currentX -= 10; break;
case 38 : currentY -= 10; break;
case 39 : currentX += 10; break;
case 40 : currentY += 10; break;
}
animationTick = Ticker.add(animation);
}
}
document.addEventListener('keydown', documentKeydown) ;

it will be document.onkeydown = documentKeydown;
not document.onkeydown = documentKeydown();
documentKeydown is a function so do not need add () to call
var documentKeydown = (evt)=> {
console.log(evt);
}
document.onkeydown = documentKeydown;
<input type="text"/>

Is there a way to change cases within the switch statement?

So, I'm working on a switch statement and i was wondering if it's possible to change the case on a specific action.
Lets say I have this:
var check0 = false;
var check1 = false;
switch(stage){
case "0":
rect(10,10,10,10);
check0 = true;
break;
case "1":
if(check0 === true){
rect(20,20,20,20);
check1 = true;
break;
}else{
/* How to set case 0 ? */
//stage = 0; //Doesnt work
//stage = "0"; //Doesn't work
}
break;
}

var check0 = false;
var check1 = false;
function xyz(stage){
switch(stage){
case "0":
rect(10,10,10,10);
check0 = true;
break;
case "1":
if(check0 === true){
rect(20,20,20,20);
check1 = true;
break;
}else{
xyz(0)
}
break;
}
}

Wrap in function:
var check0 = false;
var check1 = false;
function checkFunc(stage) {
switch(stage){
case "0":
rect(10,10,10,10);
check0 = true;
break;
case "1":
if(check0 === true){
rect(20,20,20,20);
check1 = true;
break;
}else{
checkFunc("0")
}
break;
}
}
checkFunc("1");

Your options for this are to use the method #Tarun Khurana and #Artee have suggested or reorganize the cases so case "1" is on top of case "0", but only breaks if the condition is met:
switch(stage){
case "1":
if(check0 === true){
rect(20,20,20,20);
check1 = true;
break;
}
// case "0" is executed since there is no break statement
case "0":
rect(10,10,10,10);
check0 = true;
break;
}

Try this:
var check0 = false, check1 = false;
function checkSet(stage){
switch(stage){
case 0:
//rect(10,10,10,10);
check0 = true;
return;
case 1:
if(check0 === true){
//rect(20,20,20,20);
check1 = true;
return;
}
else{
checkSet(0);
}
return;
}
}
console.log(check0); checkSet(1); console.log(check0);

js move object with arrow keys (only once)

Hi I've taken the code (to move objects with arrow keys) from some internet template. Since then, I've limited the area that the object can be moving around but I still have a problem that when I press an arrow key the object moves more than necessary, I just want to move it 20px in the appropriate direction, regardless how long the key is pressed.
Here are the functions:
var GameInput = (function() {
var pressedKeys = {};
function setKey(event, status) {
var code = event.keyCode;
var key;
switch(code) {
case 32:
key = 'SPACE'; break;
case 37:
key = 'LEFT'; break;
case 38:
key = 'UP'; break;
case 39:
key = 'RIGHT'; break;
case 40:
key = 'DOWN'; break;
default:
// Convert ASCII codes to letters
key = String.fromCharCode(event.keyCode);
}
pressedKeys[key] = status;
}
document.addEventListener('keydown', function(e) {
setKey(e, true);
});
document.addEventListener('keyup', function(e) {
setKey(e, false);
});
function isDown(key) {
return pressedKeys[key];
}
return {
isDown: isDown
};
})();
And the function calling it:
function update() {
if(GameInput.isDown('DOWN')) {
if(player.y < canvas.height - player.sizeY) {
player.y += 20;
}
}
if(GameInput.isDown('UP')) {
if(player.y > 0) {
player.y -= 20;
}
}
if(GameInput.isDown('LEFT')) {
if(player.x > 0) {
player.x -= 20;
}
}
if(GameInput.isDown('RIGHT')) {
// Don't go out of canvas
if(player.x < canvas.width - player.sizeX) {
player.x += 20;
}
}
// You can pass any letter to `isDown`, in addition to DOWN,
// UP, LEFT, RIGHT, and SPACE:
// if(GameInput.isDown('a')) { ... }
}
I understand why it does what it does but I have not been able to modify it to only move 20px regardless how much time a key is pressed.
Thank you

How about using the keyup event to allow the operation to repeat only when a new key is pressed. Something like:
var allowRepeat = true;
document.addEventListener('keydown', function(e) {
if (allowRepeat) {
setKey(e, true);
}
allowRepeat = false;
});
document.addEventListener('keyup', function(e) {
allowRepeat = true;
setKey(e, false);
});

I think your logic is a little reverted, what you want is to disallow update 'before key up is fired', from your code, as long as the keyUp event is not fired, isDown('XXX') is still true..
So this is what you need: (you should do some refactoring, but this should work)
var GameInput = (function() {
....
var _allowUpdate = {};
function setKey(event, status) {
var code = event.keyCode;
var key;
switch(code) {
case 32:
key = 'SPACE'; break;
case 37:
key = 'LEFT'; break;
case 38:
key = 'UP'; break;
case 39:
key = 'RIGHT'; break;
case 40:
key = 'DOWN'; break;
default:
// Convert ASCII codes to letters
key = String.fromCharCode(event.keyCode);
}
// This checks whether it's the first time the key being pressed.
allowUpdate[key] = !pressedKeys[key] && status;
pressedKeys[key] = status;
}
function allowUpdate(key) {
_allowUpdate[key] ;
}
return {
allowUpdate: allowUpdate
};
}
function update() {
if(GameInput.allowUpdate('DOWN')) {
if(player.y < canvas.height - player.sizeY) {
player.y += 20;
}
}
.....
}

Javascript onkeyup/onkeydown input

I am playing with a very simple little shooter to learn about easeljs, tweenjs, and canvas coding. I've run into a problem that's stumped me.
I get an unexpected end of input error in Chrome and it indicates line 1. Whats up with that?
Note that in the code below I have commented out all of the keyboard input code. The error no longer appears. When I uncomment either the document.addEventListener or window.addEventListener input code the error is thrown again. And further experimentation led me to believe it has to do with the event object but beyond that I have no idea.
Hope someone can help!
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
init();
}
function init() {
console.log("init hit");
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
createStarField();
shipImg = new Image();
shipImg.onload = onShipLoaded;
shipImg.src = "ship1.png";
Ticker.setFPS(30);
Ticker.addListener(window);
/* document.addEventListener('keydown', function(event) {
switch(event.keyCode) {
case 37: // left
moveLeft = true; moveRight = false;
break;
case 38: moveUp = true; moveLeft = false;
break;
case 39: moveRight = true; moveLeft = false;
break;
case 40: moveDown = true; moveUp = false;
break;
}
}, false);
document.addEventListener('keyup', function() {
switch(e.keyCode) {
// left
case 37: moveLeft = false;
break;
// up
case 38: moveUp = false;
break;
// right
case 39: moveRight = false;
break;
// down
case 40: moveDown = false;
break;
}
}, false);
*/
/*function onKeyDown(e) {
//if(!e) { var e = window.event; }
switch(e.keyCode) {
// left
case 37: moveLeft = true; moveRight = false;
break;
case 38: moveUp = true; moveLeft = false;
break;
case 39: moveRight = true; moveLeft = false;
break;
case 40: moveDown = true; moveUp = false;
break;
}
}
function onKeyUp(e) {
// if(!e) { var e = window.event; }
switch(e.keyCode) {
// left
case 37: moveLeft = false;
break;
// up
case 38: moveUp = false;
break;
// right
case 39: moveRight = false;
break;
// down
case 40: moveDown = false;
break;
}
*/
function checkMovement() {
if(moveLeft)
{
ship.x -= speed;
if(ship.x < 0)
ship.x = 640;
}
else if(moveRight)
{
ship.x += speed;
if(ship.x > 640)
ship.x = 0;
}
if(moveUp)
{
if(ship.y - speed > 24)
ship.y -= speed;
}
else if(moveDown)
{
if(ship.y + speed < 460)
ship.y += speed;
}
}
function onShipLoaded() {
ship = new Bitmap(shipImg);
ship.regX = ship.image.width * .05;
ship.regY = ship.image.height * 0.5;
ship.x = 320;
ship.y = 450;
stage.addChild(ship);
}
function createStarField() {
console.log("create star field");
stars = new Array();
g = new Graphics();
g.setStrokeStyle(1);
g.beginStroke(Graphics.getRGB(255,255,255));
g.beginFill(Graphics.getRGB(255,255,255));
g.drawCircle(0,0,1);
for(var i = 0; i < 100; ++i) {
var s = new Shape(g);
stars.push(s);
s.x = randRange(10,630);
s.y = randRange(-250, 470);
s.scaleX = randRange(0.5, 2);
s.scaleY = s.scaleX;
s.alpha = Math.random() + 0.2;
stage.addChild(s);
}
}
function randRange(min, max) {
return Math.floor(Math.random()*(max - min)) + min;
}
function tick() {
console.log("tick hit");
updateStarField();
checkMovement();
stage.update();
}
function updateStarField() {
console.log("updateStarField()");
var curStar;
var limit = stars.length;
for(var i = 0; i < limit; ++i) {
curStar = stars[i];
curStar.y += 4
if(curStar.y > 480) {
curStar.x = randRange(10,630);
curStar.y = -randRange(20, 450);
}
}
}

The last commented out onKeyUp(e) function lacks a closing curly brace (})