Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Stop multiple form actions using Javascript

    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.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Code:
    // 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.

    Code:
    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.
    Last edited by Philip M; 11-17-2010 at 08:00 PM.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by Philip M View Post
    Code:
    // 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.

    Code:
    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.
    Code:
    <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.

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    change.js: (function not needed)
    Code:
    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.

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

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by glenngv View Post
    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.

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    If all the forms in a page need to be changed to the same action, then change.js should look something like this:
    Code:
    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

    Code:
    javascript:alert(document.forms[0].action);
    Either way, when you submit the form, it should submit to the new URL.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by kenship View Post
    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.

  • #11
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.

  • #13
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    You can change the form method to 'get' or nothing in the same way as you changed the form action.

    Code:
    <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.
    Last edited by Philip M; 11-18-2010 at 04:48 PM.

  • Users who have thanked Philip M for this post:

    kenship (11-18-2010)

  • #15
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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?

    Code:
    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:

    Code:
    $(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>');
    });

  • Users who have thanked Spudhead for this post:

    kenship (11-19-2010)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •