I have an HTML form and i want to submit it using a link. The form has to be sent to the href of the link. This is my idea:

Set a click event to the link tag which does the following:

• Blocks the default action of following the link.
• Edits the form by setting the action to the href of the link.
• Submits the form using jquery submit() function.

I am looking for a solution where i don't have to change my html, only javascript.

I tried this, but it doesn't work. Here is my code:

Javascript:

jQuery('.row_header').find('td').each(function(){
    var cell = jQuery(this);
    cell.find('a').each(function(){
        //Get last link in cell. There is only one
        linkObject = jQuery(this);
    });     

    //Gets form
    var form = jQuery('#searchForm');

    if(typeof linkObject !== 'undefined'){
        //Get location url for form
        var url = linkObject.attr('href');

        linkObject.click(function(e){
            //Prevent default (following link)
            e.preventDefault(); 
            //Set location from link as form action     
            form.attr('action',url);
            //Submits form
            form.submit();

        });
    }
});

HTML:

<form id="searchForm">
    <input type="text" name="myInput" value="myValue">
    <input type="submit" name="mySubmit" value="mySubmitValue">
</form>

<table>
    <tr class="row_header"><td><a href="myLocation.php">The Link </a></td></tr>
</table>

I have an HTML form and i want to submit it using a link. The form has to be sent to the href of the link. This is my idea:

Set a click event to the link tag which does the following:

• Blocks the default action of following the link.
• Edits the form by setting the action to the href of the link.
• Submits the form using jquery submit() function.

I am looking for a solution where i don't have to change my html, only javascript.

I tried this, but it doesn't work. Here is my code:

Javascript:

jQuery('.row_header').find('td').each(function(){
    var cell = jQuery(this);
    cell.find('a').each(function(){
        //Get last link in cell. There is only one
        linkObject = jQuery(this);
    });     

    //Gets form
    var form = jQuery('#searchForm');

    if(typeof linkObject !== 'undefined'){
        //Get location url for form
        var url = linkObject.attr('href');

        linkObject.click(function(e){
            //Prevent default (following link)
            e.preventDefault(); 
            //Set location from link as form action     
            form.attr('action',url);
            //Submits form
            form.submit();

        });
    }
});

HTML:

<form id="searchForm">
    <input type="text" name="myInput" value="myValue">
    <input type="submit" name="mySubmit" value="mySubmitValue">
</form>

<table>
    <tr class="row_header"><td><a href="myLocation.php">The Link </a></td></tr>
</table>

• javascript
• jquery
• html
• forms

Share Improve this question Follow edited Jan 16, 2015 at 16:21 user3053216 asked Jan 16, 2015 at 15:48 user3053216user3053216 81911 gold badge1010 silver badges2727 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

If you want to set the action of your form the href of your link when it's clicked, try the following:

 $( "#myLink" ).click(function() {
   var form =  $( "#searchForm" ); 
   form.action=$(this).attr('href');
   console.log(form.action);
   form.submit();
 });

Here is a working Fiddle.

you see where is your link object defined. There is linkObject which is inside the ( ).

have you defined this variable?

You have used a element which would take you to the link. so you must use the attribute which starts like this data- and you can make it to look like data-href1=' your link' ard set the attribut href as #.

Simply your a element should look like:

<a href='#' data-href1 ='your link'> click </a>    

One option is to style the a form submit button like a link. You can see that here:

How to make button look like a link?

Or have the link use javascript to submit the form. Like here:

Use a normal link to submit a form

Both will do what you need.

JQuery submit function binds a handler to the submit event.

you can use AJAX, for example to send data

I have found a solution. I still have no idea why, but for some reason .submit() doesn't call the submit function. My workaround is finding the submit button and triggering a click on that:

form.find('#submitId').trigger('click'); 

in stead of

form.submit()

And

 <input type="submit" name="mySubmit" id="submitId" value="mySubmitValue">

in stead of

 <input type="submit" name="mySubmit" value="mySubmitValue">

Altough editing the html is not necessary, but then you have to edit the find() function to find the submit on name or type. I also changed my code a bit while looking for the result. Here is the final JS:

jQuery(function(){
    jQuery('.row_header').find('td').each(function(){

        var linkObject = jQuery(this).find('a');

        if(typeof linkObject !== 'undefined'){

            linkObject.click(function(e){
                //Prevent following the link
                e.preventDefault();
                //Get url
                var url = jQuery(this).attr('href');     
                //Get form              
                var form = jQuery('#searchForm');
                //Change form action
                form.action = jQuery(this).attr('href');
                //Click submit button
                form.find('#submitId').trigger('click');
            });
        }
    });
});