CODEWITHSUNDEEP
javascripthtmlanchor
Abraham
Abraham

Reputation: 240

Javascript in anchor not working with IE

I'm trying to redirect to my ServletController via an anchor tag and javascript.

Now it works in Google chrome and not in IE. I looked around the web for two days so far and found that IE does not work with setAttribute well with dynamic elements so I had to switch to using the actually attribute and assigning it a value.

The anchor is suppose to create a dynamic form and make a form submission which then creates a new request to my Servlet but for some reason when I click on the anchor in javascript it does nothing. However when I click on the anchor in chrome it does it correctly and redirects me to the next page without any problem.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Account</title>
<meta name="description" content="eTeam Bank">
<meta name="author" content="Abraham Cabrera">
<link rel="stylesheet" type="text/css" href="css/mystyles.css">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
<script type="text/javascript"> 
function anchorRedirect(username, user_id, operation) {
"use strict";
var form = document.createElement("form");
form.name="form";
form.id="form";
form.method = "post";
form.action = "ServletController";

var hiddenField1 = document.createElement("input");
hiddenField1.type = "hidden";
hiddenField1.name = "username";
hiddenField1.value = username;
form.appendChild(hiddenField1);

var hiddenField2 = document.createElement("input");
hiddenField2.type = "hidden";
hiddenField2.name = "user_id";
hiddenField2.value = user_id;
form.appendChild(hiddenField2);

var hiddenField3 = document.createElement("input");
hiddenField3.type = "hidden";
hiddenField3.name = "operation";
hiddenField3.value = operation;
form.appendChild(hiddenField3);

form.submit();
}
</script>
</head>
<body>
<header>
    <div id="title">eTeam Bank</div>
</header>

<div id="container">
    <div class="userTitle" >
        <div class="user">
            Welcome: user
        </div>
        <div class="userTime">
        Thu Jan 31 09:24:16 EST 2013
        </div>
    </div>
    <div class="accountBox" >
        <div class="accountSpace"></div>
        <div id="accountAnchor">
        <a href="javascript:anchorRedirect('user', '2', 'loadPersonalInfo');">Personal Info</a> 
        </div>
        <div id="accountAnchor"> 
        <a href="javascript: anchorRedirect('user', '2', 'loadAccountInfo')">Account Info</a> 
        </div>
        <div id="accountAnchor"> 
        <a href="javascript: anchorRedirect('user', '2', 'loadAccountSum')">Account Summary</a> 

        </div>
    </div>
</div>

<footer>
    <div id="footerContent">Abraham Cabrera &copy; 2013</div>
</footer>

Additional Details:
1. This is not for any type of production business or corporation and is just for personal studies.
2. I did try passing the variables via the url path directly without using the java script function but that does not meet my requirments because I need to make a new request to my ServletController in order to get the users account information via the model class or which ever operation it was and forward it back to the view.

Upvotes: 0

Views: 308

Answers (2)

Charlie Wallace
Charlie Wallace

Reputation: 1830

I notice that if I take your code and add a div with id='form_div1' and append the newly created form to it before submit it starts working from FireFox and IE.

var my_div = document.getElementById("form_div1");
my_div.appendChild(form);
form.submit();

Upvotes: 1

mihaimm
mihaimm

Reputation: 521

I suggest to create the form inside the HTML (not via javascript) with all the needed fields inside already. Then, instead of creating and setting the elements, you would radically simplify your JS by simply setting the values of the hidden fields and submitting the form. Something like 

<form name="myform" id="myform" method="post" action="ServletController">
    <input type="hidden" name="username" value="">
    <input type="hidden" name="user_id" value="">
    <input type="hidden" name="operation" value="">
</form>

with a javascript like 

function anchorRedirect(username, user_id, operation) {
    document.myform.username.value = username;
    document.myform.user_id.value = user_id;
    document.myform.operation.value = operation;
    document.myform.submit();
}

Upvotes: 0

Related Questions