How to render a new page in a javascript script

Question

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

http://stackoverflow.com/questions/15515946/how-to-validate-a-field-in-jsf — Jasper de Vries, Aug 17 '16 at 10:40
Why don't you just use JSF `required="true"` on the inputs? See also http://stackoverflow.com/q/4013410 — BalusC, Aug 17 '16 at 12:19

score 1 · Accepted Answer · answered Aug 17 '16 at 10:58

1

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" .../>

answered Aug 17 '16 at 10:58

Youans

4,801
1
31
57

I added type="button" and it worked just fine! Thanks for your help – CGurrell Aug 17 '16 at 12:03
@CGurrell: See the comment by BalusC above. Looks like you have a Porsche 911 but try to use it like a family car. – Kukeltje Aug 17 '16 at 18:36

score 0 · Answer 2 · answered Aug 17 '16 at 10:36

0

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!

answered Aug 17 '16 at 10:36

lloydaf

605
3
17

Ok so window.location.replace and window.location.href don't want to work, however window.open does work in the sense that it opens the page i want it to open in a new window. The problem is it keeps the page I want to close open. – CGurrell Aug 17 '16 at 10:45
Hmm. As the comment below says, why don't you try using a form with a submit? Sounds like a good idea to me! – lloydaf Aug 17 '16 at 11:34

How to render a new page in a javascript script

2 Answers2