...

View Full Version : Stop multiple form actions using Javascript



kenship
11-17-2010, 07:05 PM
I am very new to javascript and cannot find any info anywhere regarding the following problem:

On my website I have around 100 pages containing an action form. Occasionally it is necessary to cancel the action throughout the 100 pages which is very time-consuming. Then the action has to be reinstated once again for all the 100+ pages. I thought the solution would be to use javascript to change the action from a .js file which would mean only one page, the .js file, would require alteration:

The action that appears on all 100+ pages several times that I am trying to change or stop happening by overwriting the "form action":

<form action="http://www.changenamecart.com/" method="post">
<input type="hidden" name="userid" value="1234567">
<input type="hidden" name="return" value="http://www.thehomepage.co.uk/index.htm">
<input type="image" src="http://www.changenamecart.com/images/pic.gif">
</form>


My efforts to date are:

The change .js file:

function change()
{
var myChange = form action;

if(myChange == form action){
document.write("form xction");
}
}


The html file in the header:

<script src="change.js" type="text/javascript"></script>


I am afraid that my knowledge of programming is very small and I would welcome any help to solve this problem.

Philip M
11-17-2010, 07:24 PM
// For Google Chrome
document.getElementById('myForm').action.value = '/anotherDirectory/alternativeAction.php';
// For IE and Firefox
document.getElementById('myForm').action = '/anotherDirectory/alternativeAction.php';

So you will have to detect Chrome and use the above code for that browser. The difference is that for some reason Chrome requires action.value which does not work in IE or FF.


var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; // true = the browser is chrome;

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

kenship
11-17-2010, 08:10 PM
Many thanks for your very prompt reply. Unfortunately, because of my lack of knowledge of javascript I still cannot get the code to work:

Please could you confirm the final code to be placed in the .js file is:

function change()
{
var newAction = "http://www.changenamecart.com/";
document.myFormName.action = newAction;
}

which should change the htm file in the
<form action="www.changenamecart.com/" method="post">
to:
<form action="www.whateverilike.com/" method="post">

I am sorry to be a pain but will appreciate any further assistance that you could offer. I feel that I have missed out something small but nevertheless vital for this to work.

Many thanks

Ken

glenngv
11-17-2010, 08:11 PM
// For Google Chrome
document.getElementById('myForm').action.value = '/anotherDirectory/alternativeAction.php';
// For IE and Firefox
document.getElementById('myForm').action = '/anotherDirectory/alternativeAction.php';

So you will have to detect Chrome and use the above code for that browser. The difference is that for some reason Chrome requires action.value which does not work in IE or FF.


var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; // true = the browser is chrome;

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
First time to hear this. But I tried it without action.value and it works perfectly in Chrome.

<html>
<head>
<script type="text/javascript">
window.onload = function(){
alert('original action: ' + document.getElementById('myForm').action);
document.getElementById('myForm').action = 'new.htm';
alert('new action: ' + document.getElementById('myForm').action);
}
</script
</head>
<body>
<form id="myForm" action="orig.htm">
</form>
</body>
</html>
Then I tried action.value and it alerts undefined.

kenship
11-17-2010, 09:40 PM
Once again I appreciate the prompt reply.

I am obviously still missing the method of completing this javascript as I still cannot get the code to work. I'm afraid I do not understand the mention of "Chrome". I should have said that my browser is IE8.

Am I correct that the code I should be using in the change.js file is this:

function change()
{
window.onload = function(){
alert('original action: ' + document.getElementById('myForm').action);
document.getElementById('myForm').action = 'new.htm';
alert('new action: ' + document.getElementById('myForm').action);
}
}
which should change the form action line in the htm file from:
<html>
<head>
<script src="change.js" type="text/javascript"></script>
<SCRIPT language=JavaScript type=text/JavaScript></script>
</head>
<body>
<form action="http://www.changenamecart.com/cf/add.cfm" method="post">
</form>
</body>
</html>
to:
<html>
<head>
<script src="change.js" type="text/javascript"></script>
<SCRIPT language=JavaScript type=text/JavaScript></script>
</head>
<body>
<form action="http://www.whateverilike.com/cf/add.cfm" method="post">
</form>
</body>
</html>
As you can probably now tell I am really new to javascript and really do appreciate your help.

Many thanks

Ken

glenngv
11-17-2010, 09:59 PM
change.js: (function not needed)

document.forms[0].action = 'path/to/the/new/action';

Then put change.js at the bottom. It's safer than to put it onload which may conflict with existing onload if any.


</form>
<script src="change.js" type="text/javascript"></script>
</body>
</html>

Philip M
11-17-2010, 10:28 PM
First time to hear this. But I tried it without action.value and it works perfectly in Chrome.
Then I tried action.value and it alerts undefined.

Ah, I don't have Chrome myself, but I had a note to that effect. Obviously an error. Thanks for the info. :)

kenship
11-17-2010, 11:23 PM
Once again, many thanks for your prompt reply.

Unfortunately, I think I am still missing something vital. My problem is that I have 150 pages with approximately 5 Form Actions per page. At least once a month those form actions need to be cancelled which takes considerable time and then the form reinstated one week later. I thought that the easy way round the problem was, with the help of javascript, to have a small piece of search and replace type code held in a .js file which would effectively change all the htm forms with just one alteration on the .js file.
As I understand it the "change.js" code should now just read (with no other code, or instruction):

document.forms[0].action = 'www.whateverilike.com';

and this instruction with
</form>
<script src="change.js" type="text/javascript"></script>
on all 100 htm pages at the foot of each of 5 forms

will change the form action from:
<form action="http://www.changenamecart.com/cf/add.cfm" method="post">

to

<form action="http://www.whateverilike.com" method="post">

I have tried this code but nothing in the form action line changes.

Once again, because of my lack of programming knowledge I feel that I must be missing some code somewhere and I apologise for this.

Many thanks

Ken

glenngv
11-17-2010, 11:44 PM
If all the forms in a page need to be changed to the same action, then change.js should look something like this:

for (var formIndex=0; document.forms.length; formIndex++){
document.forms[formIndex].action = 'http://www.whateverilike.com';
}
When the page loads, the action for all the forms in the page will be changed to 'http://www.whateverilike.com'. Don't expect to exactly see this url as the form action when you do a View Source (or View Page Source) on the page. The form action is changed internally. You can only see it if you are looking at the source in Firebug or similar tools or by typing this in the address bar


javascript:alert(document.forms[0].action);

Either way, when you submit the form, it should submit to the new URL.

Philip M
11-18-2010, 07:50 AM
My problem is that I have 150 pages with approximately 5 Form Actions per page. At least once a month those form actions need to be cancelled which takes considerable time and then the form reinstated one week later.

I have to say that I am curious to know why this rather odd requirement arises. :confused:

kenship
11-18-2010, 08:15 AM
Fantastic! A result. Almost there. It certainly kills off the form action. Unfortunately, just one problem with this code is that a HTTP 405 error - "Method Not Allowed" is produced, although the new url is clearly displayed in the address bar. The perfect result would have been the new url (http://www.orlando.homecall.co.uk/maintenance.htm) which is stating that the website is "temporarily down for maintenance" to be displayed.

for (var formIndex=0; document.forms.length; formIndex++){
document.forms[formIndex].action = http://www.orlando.homecall.co.uk/maintenance.htm;
}

I have tried the code out on another server but with the same result.
I am sorry for this as I had no idea that "Error 405 - Method Not Allowed" existed. Does this mean there is no way round the problem?

glenngv
11-18-2010, 08:20 AM
It's a Web server configuration issue which restricts POST request to the server. It has nothing to do with this "change form action" script.

More info on this error here - http://www.checkupdown.com/status/E405.html

You should learn to google it for yourself.

kenship
11-18-2010, 04:06 PM
Sorry for the delay.

I have now read up the error 405 issue and understand that not all ISPs will accept a form POST and I am afraid that is the position of my current ISP. It seems that I have 2 ways around the problem.

1. A bit more code to remove the word POST at the same time as changing the url to http://www.orlando.homecall.co.uk/maintenance.htm in the .js file;

<form action="http://www.changenamecart.com/cf/add.cfm" method="post">

2. In the form action use "get" instead of "post" - I have no idea of the disadvantages or dangers of doing this, though? I have googled for this info but unable to find anything that I completely understand.

Many thanks

Ken

Philip M
11-18-2010, 04:35 PM
You can change the form method to 'get' or nothing in the same way as you changed the form action.


<form id="myForm1" action="oldAction.html" method = "POST">
</form>

<script type="text/javascript">
window.onload = function(){
alert('Original Action: ' + document.getElementById('myForm1').action);
alert('Original Method: ' + document.getElementById('myForm1').method);
document.getElementById('myForm1').action = 'newAction.html';
alert('New Action: ' + document.getElementById('myForm1').action);
document.getElementById('myForm1').method = 'get';
alert('New Method: ' + document.getElementById('myForm1').method);

}
</script>



In GET method data gets transferred to the processing page in name value pairs through URL, so it is exposed and can be easily traced by visiting history pages of the browser. So any login details with password should never be posted by using GET method.

I have to say that I do not really understand why you are trying to change the form action. If for some reason you do not wish the user to submit data at certain times, why do you not simply redirect to a page which says "This site is closed for maintenance"?

If you really want your form to submit to an alternative URL at certain times, then you must find a ISP who will accept form POST.

Spudhead
11-18-2010, 05:09 PM
Why even send the user through all the bother of submitting an unavailable form to a page that tells them that the form they just submitted is unavailable? Just stop the form submitting, surely?



for (var formIndex=0; formIndex < document.forms.length; formIndex++){
document.forms[formIndex].onsubmit = function(){
alert('Down for maintenance');
return false;
}
}


Or for the even lazier option, open a big 'ol can of jQuery and simply disable all the submit buttons:



$(function(){
$('input[type=submit]').attr('disabled', 'disabled').after('<label>This form is no more. It has ceased to be. It is an ex-form.</label>');
});

Philip M
11-18-2010, 05:13 PM
Well, yes. But why invite or permit the user to complete a form and then tell him it is disabled? :confused:

glenngv
11-18-2010, 06:44 PM
Right. Why let the user fill out the form then later you would tell them that the site is unavailable?

Just redirect them right away.

change.js:


location.href = "http://www.orlando.homecall.co.uk/maintenance.htm";
//or
//location.replace("http://www.orlando.homecall.co.uk/maintenance.htm"); //this replaces the current page in browser history


html:

<html>
<head>
<script type="text/javascript" src="change.js"></script>
</head>
<body>
..
</body>
</html>

kenship
11-18-2010, 09:23 PM
Sorry, I missed an earlier reply.

kenship
11-19-2010, 11:11 AM
Many thanks to you all for your very helpful contributions.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum