how to dynamically create the action attribute (URL) of my html form based on user input

Question

Sorry - still a beginner - How do I dynamically create action url using the input text from the user?

 <form name="myInstitution"  action="" method="GET">
        <div>
            <label for="names" class="bold">Institution Name</label>
            <input id="names" name="schoolName" type="text"></input>                

        </div>

        <div class="bold"></div>

        <div>
            <input type="submit" value="Submit" id="sbutton" name="submit" />
            <input type="reset" value="Reset" />
        </div>
    </form>

Where do you want the action to come from? schoolName input? — Explosion Pills
– Explosion Pills, Commented Feb 18, 2013 at 4:47

Community · Accepted Answer · 2017-05-23 10:24:51Z

1

Since you don't seem to be using a javascript library, I'll copy the bind code in pure javascript from this answer.

var on = (function(){
    if ("addEventListener" in window) {
        return function(target, type, listener){
            target.addEventListener(type, listener, false);
        };
    }
    else {
        return function(object, sEvent, fpNotify){
            object.attachEvent("on" + sEvent, function(){
                fpNotify(window.event);
            });
        };
    }
}());


on(document.getElementById("sbutton"), "click", function(){
    this.action = document.getElementById( "names" ).val() + ".ext";
});

If you were using a javascript library like jQuery, you could bind to the event handler like this:

$( "form[name=\"myInstitution\"]" ).on( "submit", function( e ){
    var $this = $(this),
        text  = $this.find( "input#names" ).val();

    $this.prop( "action", text + ".ext" );
});

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Feb 18, 2013 at 4:49

rockerest

10.5k3 gold badges39 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sasi · Accepted Answer · 2013-02-18 15:25:49Z

1

$('#myForm').submit(function ()
{
    var action = '';
    // compute action here...
    $(this).attr('action', action);
});

Hope it will help you..

edited Feb 18, 2013 at 15:25

answered Feb 18, 2013 at 4:46

sasi

4,3784 gold badges30 silver badges48 bronze badges

2 Comments

user1769203 Over a year ago

@sasu why is the word event in the argument for the function?

sasi Over a year ago

i had edited the code..thats no need..is this worked for you?

Collectives™ on Stack Overflow

how to dynamically create the action attribute (URL) of my html form based on user input

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related