Jump to content
Sign in to follow this  
Periander

Javascript createElement

Recommended Posts

I'd appreciate if someone could help me here, as I have something that functions correctly in Chrome, but not FF or IE. I've provided a simple example below.

 

I suspect it's got something to do with the javascript createElement calls, but can't work out why despite trying all sorts of crazy shit, and am tearing hair out.

 

In the following code I want both buttons to post, i.e. refresh the page.

 

<html>
<head>
</head>
<body>
<form name="myform" method="post">
<input type='hidden' name='content' value='products' />
</form>

<script type="text/javascript">
alert('page refreshed!');

function postContent()
{
	var form = document.createElement('form');
	form.method = 'POST';
	form.name = 'anotherForm';
	var input = document.createElement('input');
	input.type = 'hidden';
	input.name = 'content';
	input.value = 'products';
	form.appendChild(input);
	form.submit();

};
</script>

<button onclick="postContent()">products</button>
<button onclick="document.myform.submit()">products2</button>
</body>
</html>

As far as I can tell the two buttons should be effectively doing the same thing.

Edited by Periander

Share this post


Link to post
Share on other sites

Try adding the form to the document, in the js.

 

I don't not for sure, but I suspect Chrome is more 'friendly' with the problem. Problem being (I suspect) that the form doesn't know where to post back to because it's not a part of a document. Although I tried putting an action attrib in but that made no difference.

 

<html>
<head>
</head>
<body>
<div id="cont">
</div>
<form name="myform" method="post">
	<input type='hidden' name='content' value='products' />
</form>

<script type="text/javascript">
alert('page refreshed!');

function postContent()
{
	var form = document.createElement('form');
	form.method = 'POST';
	form.name = 'anotherForm';
	var input = document.createElement('input');
	input.type = 'hidden';
	input.name = 'content';
	input.value = 'products';
	
	form.appendChild(input);
	
	var cont = document.getElementById('cont');
	cont.appendChild(form);	
	form.submit();	
}	
</script>

<button onclick="postContent()">products</button>
<button onclick="document.myform.submit()">products2</button>
</body>
</html>
Edited by kikz

Share this post


Link to post
Share on other sites

Thanks kikz, that worked.

 

Just missing an apostrophe here if anyone else wants to copy/paste:

 

input.name = content';
Edited by Periander

Share this post


Link to post
Share on other sites

fix0red. I had used setAttribute and in my copy and paste edit on the forum I missed it :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×