CODEWITHSUNDEEP
jquery
user2722885
user2722885

Reputation: 43

How to change the action of a form with jquery

Script here:

$('#txt').click(function(){

         $('#formID').attr('action', 'https://www.google.se/');

});

Html here:

<form method="post" name="myForm" action="http://www.youtube.com/" id="formID"  >

        <input type="button" id="txt" value="Submit" />

</form>

So basically what I want to happen is that when I press the submit button the action of the form will be changed to google and google will open. This is not working at all and I dont know why. :|

Upvotes: 1

Views: 133

Answers (4)

2xAA
2xAA

Reputation: 308

The problem is that your button isn't a submit button, so even now your code won't do a thing unless you have some other JavaScript or jQuery you've not shown us or you left out your submit button?

Anyway, this is the new jQuery:

$(function() { //Run on page load
    $('#txt').click(function(e) {
        e.preventDefault(); //Prevent default action from happening
        $('#formID').attr('action', 'https://www.google.se/').submit(); //Change the form's action attribute
        $('#formID').submit(); //Submit the form
    });
});

Html here - changed type="button" to type="submit" and changed method="post" to method="get" because google doesn't like post:

<form method="get" name="myForm" action="http://www.youtube.com/" id="formID"  >
    <input type="submit" id="txt" value="Submit" />
</form>

Upvotes: 0

cssyphus
cssyphus

Reputation: 40038

This is the exact code that worked for me. Copy/Paste it into a new document and give it a try. You can see where I commented out my own answer to try j08691's answer (it also worked).

Let us know.

<html>
    <head>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                $('#txt').click(function(e) {
                    e.preventDefault();
                    //window.location.href = "http://google.ca";
                    $('#test').attr('action', 'https://www.google.se/').submit();
                });
            }); //END $(document).ready()

        </script>
    </head>

<body>

    <form id="test">
        Fisrt: <input type="text" />
        Last : <input type="text" />
        <input id="txt" type="submit" value="Go" />
    </form>

</body>
</html>

Upvotes: 1

j08691
j08691

Reputation: 207881

Try:

$('#txt').click(function (e) {
    e.preventDefault();
    $('#formID').attr('action', 'https://www.google.se/').submit();
});

Upvotes: 2

cssyphus
cssyphus

Reputation: 40038

This is not really what forms were designed to do, so you must override the normal behavior of the submit button in your form.

One way to do this is via jQuery (assuming txt is the id of your submit button):

$('#txt').click(function(e) {
    e.preventDefault(); //prevent form from attempting to submit
    window.location.href = "http://google.com";
});

Note: updated. Forgot the 'e' inside the function() and parens after e.preventDefault()

Upvotes: 2

Related Questions