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, Feb 18 '13 at 04:47

sasi · Answer 1 · 2013-02-18T15:25:49.360

1

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

Hope it will help you..

edited Feb 18 '13 at 15:25

answered Feb 18 '13 at 04:46

sasi

4,192
4
28
47

@sasu why is the word event in the argument for the function? – user1769203 Feb 18 '13 at 15:24
i had edited the code..thats no need..is this worked for you? – sasi Feb 18 '13 at 15:26

score 1 · Answer 2 · edited May 23 '17 at 10:24

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" );
});

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

2 Answers2