Hey Everyone!
I have come across a very interesting problem that seems to be impossible to solve. Basically a web application that I am working on relies on a JavaScript function called go to change the input named view to the page name and submit the form. This form's type is post, so no values are included in the actual URL string. There is also another input called action and it's value is view. This is to tell the application that the user would like to view a page. The problem is because of the variables being of method post, page refreshes and back and forwards return errors because the post variables view and action aren't sent with the required data. To somewhat solve this problem I have created a feature that tells the application that if the post value page is empty then to try and get a GET var called page. To insert this var into the go javascript function I simple add this code

document.go.action = document.go.action+"&page="+page;

This line basically adds &page=[page] to the action of the form. The problem is, this code doesn't work because action is also the name of a form element. Referencing document.go.action refers to the input element named action and not to the form's action. Changing the named of the action input value is out of the question (Way to much changing of code, and possible room for error). What can I do to change the action of the form without referencing the input named action. Here is my go form and the JavaScript code:

<form name="go" action"index.php?sid=123" method="post">
 <input type="hidden" name="action" value="view" />
 <input type="hidden" name="view" value="" />
</form>
<script type="text/javascript">
 function go(page)
 {
  document.go.view.value = page;
  document.go.action = document.go.action+"&page="+page; //Problem Line
  document.go.submit();
 }
</script>

Thanks for your Help!!!

Dani AI

Generated

The problem is the well-known name-collision where named form controls become properties on the form object. That makes document.go.action resolve to the input element named action instead of the form's action URL. Two robust options avoid changing the input name.

Use getAttribute/setAttribute to read and write the actual action attribute (these bypass the named-property shadowing). This also lets you correctly add either ?page= or &page= and safely encode the page value:

var f = document.forms['go'];
var base = f.getAttribute('action') || f.action;           // raw attribute (or fallback)
var sep = base.indexOf('?') === -1 ? '?' : '&';
f.setAttribute('action', base + sep + 'page=' + encodeURIComponent(page));
f.submit();

Alternatives and notes: adding a hidden page field (as suggested) is simplest when you want the value sent in POST; that avoids touching the action URL. The onsubmit renaming trick implemented (rename the control temporarily) works but is brittle and harder to maintain. If your goal is to make pages bookmarkable / compatible with back/forward without resubmitting POSTs, consider using a Post‑Redirect‑Get pattern (server redirects to a GET URL) or client-side history manipulation (HTML5 history API) so the visible URL reflects the state instead of relying on POST data.

Troubleshooting: inspect the DOM after calling the code to confirm the attribute changed (browser devtools). Remember getAttribute('action') returns the raw value as written, while form.action often yields an absolute URL. Always use encodeURIComponent for the page value to avoid broken URLs.

Recommended Answers

All 6 Replies

function go(page) { 
If !(page = "") { 
document.go.view.value = page;  
document.go.action = document.go.action+"&page="+page; 
document.go.submit(); 
}
}

my javascript is rusty, but this should only work if page is set

Thanks for the reply, but that's not exactly what I'm looking for. Let me explain further. When a link calls the JavaScript go function (Lets say the page is "home") JavaScript changes the normal go form:

<form name="go" action="index.php?sid=123" method="post">
 <input type="hidden" name="action" value="view" />
 <input type="hidden" name="view" value="" />
</form>

And changes the value of the hidden input view to the name of the page, in our case home:

<form name="go" action="index.php?sid=123" method="post">
 <input type="hidden" name="action" value="view" />
 <input type="hidden" name="view" value="home" />
</form>

I would like for JavaScript to also add &page=(Page name ex home) to the action of the form (index.php?sid=123) like this:

<form name="go" action="index.php?sid=123&page=home" method="post">
 <input type="hidden" name="action" value="view" />
 <input type="hidden" name="view" value="home" />
</form>

This is achieved by using the javascript command document.go.action (Where go is the name of the form and action refers to the action, index.php?sid=123, of the form). The problem with this is there is a input named action too and document.go.action refers to the hidden input and not to the action of the form (index.php?sid=123). How can I add code to my JavaScript go function that adds &page=(Page Name) to the action of the go function (So it looks like this: index.php?sid=123&page=[Page Name])
Thanks!

Also note that I realized that the first form was incorrect. There was not equal sign between action and the beginning of the form action. This is not the problem with my code...I only made a mistake when I wrote it on DaniWeb and not in my actual code!

My JavaScript is a little rusty too! :P

Anyone have a solution, I could really use some help here!!
Thanks!! :D

Why does the page value need to be passed in the url?
Will it always be the same as the hidden field view?

I ask because i see $_GET & $_POST being set to the same value.

Here is a quick example of moving the value of "page" to a hidden field and setting it and view to the value:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#go').submit( function() {
		var page = $('#where').val();
		alert(page);
		//Set view to value of where
		$('#view').val(page);
		//Set page to value of where
		$('#page').val(page);
	});
});
</script>
</head>
<body>
<!-- Added ID to the form for easier reference -->
<form name="go" id="go" action="post.php" method="post">
    <input type="hidden" name="action" value="view" />
    <input type="hidden" name="view" id="view" value="" />
    <input type="hidden" name="page" id="page" value="" />
    
    
    <!-- Added input field for illustrative purposes -->
    <input type="text" name="where" id="where" value="" />
    <!-- Added submit button for illustrative purposes -->
    <input name="submit" type="submit" value="Go!" />
</form>
</body>
</html>

I added a where field and a submit button to illustrate how the change happens and post.php in the action of the form, was simply print_r($_POST) Does this kind of workaround work?
BTW, this uses jQuery for the javscript library.

Thanks for the code. I think I have found a solution myself though. Simply name the action input field act and give it an id of act and then add onSubmit="document.getElementById('act').name = 'action';" . Then simply you can make changes to both (I just have to change document.go.act instead of document.do.action to edit the value of the input.

indeed, that was going to be the suggestion I made if you didn't find my previous solution suitable.

I saw a lot of issues regarding that while searching for any workarounds or ways to deal with it.

Glad you found something that works

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.