We Keep Coding

How to render a new page in a javascript script

I am using XHTML, JSF and JavaScript to create a form, validate that information has been submitted into selected fields onclick in a h:commandButton, and if validated, redirect to a different page homepage.xhtml. Everything works up to the redirection, which I can't get to work.
In the JavaScript function Validation(), I have tried location="homepage.xhtml", window.location.href="homepage.xhtml", location.url="homepage.xhtml" and a few others, but nothing seems to work. I have a feeling I'm supposed to have some sort of statement which adds href="homepage.xhtml" to the h:commandButton if Validate() returns true, but I am unsure as to how to do that.
Any help is greatly appreciated. I have added the relevant code below.
Button:
<h:commandButton class="btn btn-warning" value="Continue" onclick="Validation()"/>
Validation
function Validation() {
var nameCheck = document.getElementById('formdiv:cardName');
var numCheck = document.getElementById('formdiv:cardNumber');
var expCheck = document.getElementById('formdiv:expDate');
console.log(nameCheck.value);
console.log(numCheck.value);
console.log(expCheck.value);
var variablesToCheck = [nameCheck, numCheck, expCheck];
for(i=0; i < variablesToCheck.length; i++){
if(variablesToCheck[i].value == null || variablesToCheck[i].value == ""){
alert("Fields marked with a * must be completed");
return false;
}
}
// This is where the redirection needs to go, I think...
return true;
}
EDIT: Just noticed the if else statement is incorrect logically, but syntactically it shouldn't make a difference. The else part needs to be a statement outside of the loop without a condition; this code simply tries to redirect when the field it is checking has something in, not when all fields have something in.
EDIT 2: Loop corrected

Why you need h:commandButton anyway you are using simple javascript validation
h:commandButton is rendered as <input type="submit" ../> its mission is
to submit the form so what ever javascript you are writing your form will be submitted and your page is gonna be refreshed, So If you need it this way you have to force it not to submit the form,
However from understanding your needs all you need is simple <a /> or <button /> , Or you can just add type="button" into your h:commandButton ex:<h:commandButton type="button" .../>

You can either use..
window.location.replace('Your_url'); ..
or you can use..
window.location.href= 'Your_url'; .. I guess there must be other functions too. If you want to open it in another window, like a popup, you can use.. window.open('your_url');
Hope this helps!

Button.onclick automatically triggers, then will not trigger again

I have a script, which I'm using to try and display only one section of a webpage at a time.
function showMe(id){ clearPage(); changeDisplay(id, "block"); console.log(id)}
Currently, I'm using buttons to change which section is displayed.
var aBtn = document.getElementById("a-btn");
var otherBtn = document.getElementById("other-btn");
aBtn.onclick=showMe("a-btn-section-id");
otherBtn.onclick=showMe("other-btn-section-id");
However, when I load the page, the following happens:
I see the function attached to each button activate once in sequence in the console.
The page refuses to respond to further button inputs.
Testing with the console shows that showMe() and the functions it calls still all work properly. I'm sure I'm making a very basic, beginner mistake (which, hopefully, is why I can't find this problem when I Google/search StackOverflow/read event handling docs), but I'm at a loss for what that mistake is. Why would my script assume my buttons are clicked on load, and why won't it let me click them again?

You're calling the function an assign the value to onclick property instead of attach the function, try defining your onclick property as:
aBtn.onclick=function(){showMe("a-btn-section-id");};
otherBtn.onclick=function(){showMe("other-btn-section-id");};
Try the follow jsfiddle:
function showMe(id){ // some stuff..
console.log(id)
}
var aBtn = document.getElementById("a-btn");
var otherBtn = document.getElementById("other-btn");
aBtn.onclick=function(){showMe("a-btn-section-id");};
otherBtn.onclick=function(){showMe("other-btn-section-id");};
<input type="button" value="a-btn" id="a-btn"/>
<input type="button" value="other-btn" id="other-btn"/>
Hope this helps,

Redirecting pages with confirmation

I doing a little site for my web project, but I can't get the code to work. I have 4 "pages" (don't know what to call them) that I want to link to one another. You answer a question and an alert shows up redirecting you to the next page. I get the first link to work but not the other ones.
Here's my code:
<button data-href="../index.html" onclick="return confirm_alert(this);" class="knap3" >Nej</button>
This is what I used for the first link but it does not work when I have multiple of these in place. I tried giving them different tags/names but that didn't work.
function confirm_alert(element) {
redirect = confirm("confirmation for redirecting?");
if(redirect) {
window.location = element.dataset.href
}
Edit: When I put multiple of these in my buttons did not work anymore(nothing happends when I clicked on them).
(English isn't my native language so sorry for all the spelling errors.)

here is code that works
<button onclick="return confirm_alert('../index.html');" class="knap3" >Nej</button>
and
function confirm_alert(next) {
var msg="confirmation for redirecting?";
if(confirm(msg)) {
location.href=next;
}
}
here is a stand-alone page that works (i tested it), just save it to test.html and try it out. If this works, you can start building on it. if it does not, you have a separate issue that i cannot help with
<button onclick="return confirm_alert('../index.html');" class="knap3" >Nej</button>
<script>
function confirm_alert(next) {
var msg="confirmation for redirecting?";
if(confirm(msg)) {
location.href=next;
}
}
</script>

OnClick function is not working in IE 10, but fine in older versions

Within a standard Dot.Net application there is an option to add buttons, which can do certain functions.
This button, when clicked, opens Google in a new window with an input parameter from the current window.
<button class="exButton" language="VBS" onclick="MakeReq()">Search Google</button>
<script language="VBS">
Sub MakeReq()
window.open "https://www.google.nl/?gws_rd=ssl#q=" & frmMain.FreeTextField_01.Value
End Sub
</script>
The button works fine in IE9 or in IE10 in compatibility mode.
However on Chrome or IE 10 it does not function. I get no response or visible error.
Does anyone know:
Why it fails to function in IE10?
More importantly how I can adjust to code to get it working again?
Please keep in mind I can only influence this small piece of script as the rest of the page is controlled by the supplier of the application.

Move to javascript, something like this:
<button class="exButton" onclick="MakeReq()">Search Google</button>
<script language="text/javascript">
function MakeReq() {
frmMain = document.forms[0]; // if it is the first form
textField = frmMain.elements["FreeTextField_01"];
window.open("https://www.google.nl/?gws_rd=ssl#q="+textField.value;
}
</script>
But it's not cleat what is frmMain.FreeTextField_01.value, so I tried to imagine it is a field in the first form in the page.
Other ways could be:
textField = document.getElementsByName("FreeTextField_01")[0];
or
frmMain = document.forms["frmMain"];
textField = frmMain.elements["FreeTextField_01"];
or
frmMain = document.forms[0]; // if it is the first form
textField = frmMain.elements[0]; // if it is the first form element
or
frmMain = document.getElementById("frmMain");
textField = frmMain.elements["FreeTextField_01"];
if the form has an id="frmMain"

Thanks for the help! Below is what ended up working for me.
<button class="exButton" onclick="myFunction()">Google Search</button>
<script language="text/javascript">
function myFunction()
{
frmMain = document.getElementById("frmMain");
textField = frmMain.elements["FreeTextField_01"];
window.open("google.nl/?gws_rd=ssl#q="+textField.value);
}
</script>

Making a basic Javascript calculator

jsfiddle demo
Bear with me, total newb here.
I'm trying to make a simple multiplication calculator, as a experimentation with Javascript.
The catch is that -
No libraries, just pure javascript.
Javascript must be unobtrusive.
Now, the problem arises, that it doesn't give the value out.
When I do this locally, answer has a value of NaN, and if you hit Submit it stays that way, BUT, if you press the back button, you see the actual result.
In the JSFiddle, much is not shown, except for the fact that it simply doesn't work.
Please tell me, is it even possible to make an unobtrusive calculator? How?
(PS. I was taking a bit of help from sciencebuddies, just to see basic syntax and stuff, but I found it can't be done without code being obtrusive)

I realize you're probably just getting started and don't know what to include, remove, and whatnot. But, good advice here, clearly label your elements so you can understand them, and pare it down to the smallest possible code you need for it to work (even less, so you can build it up).
Here is your code reworked:
HTML
<div>
<input type="text" id="multiplicand" value="4">
<input type="text" id="multiplier" value="10">
<button type="button" id="multiply">Multiply</button>
</div>
<p id="result">
The product is: <span id="product"> </span>
</p>
Javascript
window.onload = function(){
var button = el('multiply'),
multiplicand = el('multiplicand'),
multiplier = el('multiplier'),
product = el('product');
function el(id) {
return document.getElementById(id);
};
function multiply() {
var x = parseFloat(multiplicand.value) || 0,
y = parseFloat(multiplier.value) || 0;
product.innerHTML = x * y;
}
button.onclick = multiply;
};
http://jsfiddle.net/userdude/EptAN/6/
A slightly more sophisticated approach, with add/subtract/multiply/divide:
http://jsfiddle.net/userdude/EptAN/9/

You have to change the submit button so that it doesn't submit the form. Right now clicking "Submit" causes the form submits to the same page which involves a page reload.
Change the <input type="submit" id="submitt"> to <button type=button> and it should work.
You can probably do without the <form> element in the first place. That'll stop clicking enter in your text input from reloading the page.

Your example has a couple of problems:
The form still submits. After the JS changes the value, the submit will cause the page to reload, and that work you've done setting the answer value is wasted.
You're trying to do this stuff right away. In the header, none of the body has been parsed yet (and thus, the form elements don't even exist). You'll want to wait til the page is loaded.
The script hijacks window.onload. If you don't have any other scripts on the page, that's fine...but the whole point of unobtrusive JS (IMO) is that nothing breaks whether the script is there or not.
Fixed, we have something kinda like:
// Wrap this onload in an IIFE that we pass the old onload to, so we can
// let it run too (rather than just replacing it)
(function(old_onload) {
// attach this code to onload, so it'll run after everything exists
window.onload = function(event) {
// run the previous onload
if (old_onload) old_onload.call(window, event);
document.getElementById('Xintox').onsubmit = function() {
var multiplier = +this.multiplier.value;
var multiplicand = +this.multiplicand.value;
this.answer.value = multiplier * multiplicand;
return false; // keep the form from submitting
};
};​
})(window.onload);
Note i'm attaching the meat code to the form, rather than the button, because hitting Enter in either of the factor boxes will trigger a submit as well. You could still attach to the button if you wanted, and just add a submit handler that returns false. But IMO it's better this way -- that way the form works just the same with JS as without (assuming the script on the server fills in the boxes appropriately), except it won't require a round trip to the server.