CODEWITHSUNDEEP
javascripthtml
Josh Bates
Josh Bates

Reputation: 9

Why this JavaScript is not working?

This is not supposed to be secure it is just to keep not smart people away from personal stuff. I have run this in HTML kit and it works flawlessly, but when I run it in a web browser it does not work. When I run it in the browser it will not redirect to google.com (just an example) and I'm not sure why

<!DOCTYPE html>
<html>
<head>
<script>
var url = "http://www.google.com";    
function validateForm() {
    var x = document.forms["myForm"]["Uname"].value;
    var y = document.forms["myForm"]["Pname"].value;
    if (x == "Joshua") 
    {
        if (y == 1234)
        {
            window.open(url)
        }   
    }
    else
    {
        alert("You have entered the wrong information!");
        return false;
    }
}
</script>
</head>
<body style="background-color:lightgrey">

<form name="myForm"
onsubmit="return validateForm()" method="post">
Username: <input type="text" name="Uname">
Password: <input type="text" name="Pname">
<input type="submit" value="Submit">
</form>

</body>
</html>

Upvotes: 0

Views: 1604

Answers (1)

Brett Caswell
Brett Caswell

Reputation: 730

for the most part, your code functions properly.. you were simply missing a semi-colon behind 'window.open()'..

I opted to do an addEventListener on the form submit; and I cleaned up the markup a bit.

var url = "http://www.google.com";    

function validateForm(e)
{
    var x = document.forms["myForm"]["Uname"].value;
    var y = document.forms["myForm"]["Pname"].value;
    console.log("%o - %o",document.forms["myForm"]["Uname"].value, document.forms["myForm"]["Pname"].value);
    if (x == "Joshua") 
    {
        if (y == 1234)
        {
            e.target.innerHTML = "<span>SO permission settings don't allow this operation. go to the fiddle to test window.open</span><br /><a href='http://jsfiddle.net/qq7wh80v/1/' target='_blank'>http://jsfiddle.net/qq7wh80v/1/</a>";
        //window.open(url);
        }   
    }
    else
    {
        alert("You have entered the wrong information!");
    
    }
    return e.returnValue = false;
}

/*   
    # This next line should run when the dom is ready, 
    # or when all the resources have been loaded (window.onload || body.onload) 

    # Note: I'm not doing the onload because it's automatic in this SO 'run code snippet'.
*/  

  document.getElementById("myForm").addEventListener('submit', validateForm);
<form id="myForm" name="myForm" method="POST">
  <label for="Uname">Username</label>:
  <input type="text" id="Uname" name="Uname" value="" placeholder="Username" />
  <label for="Pname">Password</label>:
  <input type="text" id="Pname" name="Pname" value="" placeholder="Password" />
  <button type="submit" id="btnSubmit">Submit</button>
</form>

Note: window.open is blocked in this StackOverflow snippet because of permission settings on the sandboxed frame; thus it won't work.

Chrome Notification:

"Blocked form submission to 'http://stacksnippets.net/js' because the form's frame is sandboxed and the 'allow-forms' permission is not set."

Here is the jsFiddle: http://jsfiddle.net/qq7wh80v/1/

As a side note, I was having issues using the html onEvent attributes.. but that may have been a jsFiddle issue..

Upvotes: 0

Related Questions