Form action --when calling HREF

Question

I have a basic question about the form action.

Consider the below code here, just ignore the syntax if any.

<form action="demo_form.asp" method="get">
 <a href="test.asp">Code testing</a>
 First name: <input type="text" name="fname" /><br />
 Last name: <input type="text" name="lname" /><br />
 <button type="submit">Submit</button><br />
</form> 

The demo_form.asp is called when the form is submitted and I can process the variables in the form as below in demo_form.asp,

request.GET('fname')

How can I process the variables in the form when test.asp is called through HREF..Can I use the same GET or POST method?

Solution 1

If you call test.asp via a link (or href as you say), you can process variables only using the GET method. So if you have, for example, test.asp?fname=bob&lname=smith, those GET variables will be available in test.asp

You cannot do this with POST data.

Solution 2

The only way you can submit data through a hyperlink is via a GET request. This would of course involve all of the fields in your form instead being added as query parameters to the hyperlink.

You could of course modify an a element so that it instead uses an onclick handler and JavaScript to get the data from your form using DOM methods, dynamically modify the href attribute, and then fire the click event of that particular anchor tag. This would also be a GET request.

HTML:

<form action="test.asp" id="theForm">
     <a href="test.asp?" id="link">Code testing</a>
     First name: <input type="text" name="fname" /><br />
     Last name: <input type="text" name="lname" /><br />
</form>

jQuery:

$('#link').click(function() {
    var href = "";
    $('#theForm > input').each(function(event) {
        event.preventDefault();
        href = $('#link').attr("href") + "&" + 
            $(this).attr("name") + "=" + $(this).attr("value");
        $('#link').attr("href", href);
    });
    $(this).click();  // or window.location = $(this).attr("href");
});

I'm not sure what value this would bring to you, other than as an exercise to learn more about the DOM and the way the browser processes events.

Without knowing what you're trying to accomplish, it's tough to know why you're not just using the form itself.

Comments

[Kirk Woll]

Hyperlinks will not include the form data. The <form> itself could be defined as method="GET", and you could then use a normal submit button to send that data as a GET request. However, there is nothing automatic about HTML that will allow you to do the same with an anchor tag.

[jamesmortensen]

@Kirk - Sorry if this isn't clear, but in my answer I say that you "have to use an onclick handler and JavaScript to get the data from your form using DOM methods." Perhaps I can clarify by adding in that you also need event.preventDefault() to prevent the hyperlink from redirecting you until you've retrieved the data. You've inspired me to post an example.

[Kirk Woll]

Sure, if you make it clear that the only way to post form data via a hyperlink is by using Javascript, then all is good.