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?

Answer 1

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.