Send form after clicking on link

Question

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>

score 2 · Accepted Answer · answered Jan 16 '15 at 16:04

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.

answered Jan 16 '15 at 16:04

cнŝdk

31,391
7
56
78

Thank you. The console logs the right url, so the action is set. However, the form still does not submit. – user3053216 Jan 16 '15 at 16:16
No it does, but the problem is with the url I changed the href to http://www.w3schools.com/ and it submit correctly see [**the fiddle here**](http://jsfiddle.net/x98vwkx4/3/) and try it locally with your url and it will work fine. – cнŝdk Jan 16 '15 at 16:20
I don't get an error. But it simply follows the link, no postdata is sent. – user3053216 Jan 16 '15 at 16:25
You just need to add `method="POST"` to your form. – cнŝdk Jan 16 '15 at 16:35
I already did, just forgot in the example. Doesnt matter. I added form="post" to your fiddle, and changed the location to my local address on a site with only var_dump($_POST) on it and it prints an empty array. It does not send post data. – user3053216 Jan 16 '15 at 17:26

score 2 · Answer 2 · answered Jan 16 '15 at 16:11

2

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>

answered Jan 16 '15 at 16:11

Sanmveg saini

744
1
7
22

1

You shouldn't use "#" because they may force the webpage to go to the top. "href='javascript:void(0)'" is safer. – dev4life Jan 16 '15 at 16:15
Theres should indeed be a var linkObject; above row 2, but i added it and it doesnt work. And i want to avoid changing my html. – user3053216 Jan 16 '15 at 16:20
Leaving it blank is not good practice. If it's blank, then why put it? – dev4life Jan 16 '15 at 16:21
Im looking for a solution that does not involve changing html – user3053216 Jan 16 '15 at 17:27

score 1 · Answer 3 · edited May 23 '17 at 12:14

1

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.

edited May 23 '17 at 12:14

Community

1
1

answered Jan 16 '15 at 15:54

Joe W

2,773
15
35

I want to use a normal link, but restyle a button. And the second one is kind of what i am trying to do here, with adding a submit(). However, i cannot get it working – user3053216 Jan 16 '15 at 16:17

score 1 · Answer 4 · answered Jan 16 '15 at 15:55

1

JQuery submit function binds a handler to the submit event.

you can use AJAX, for example to send data

answered Jan 16 '15 at 15:55

Tal

700
4
11

I don't want to use ajax, i want the the page to refresh and submit the form like pressing on a button would do. – user3053216 Jan 16 '15 at 16:17

score 0 · Answer 5 · answered Jan 16 '15 at 19:08

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

Send form after clicking on link

5 Answers5