It's not working using 'a' to submit the form in HTML

Question

I tried to submit the request with post method by clicking the element a in HTML. But it always refreshes current page, even the action is updated with correct value.

This is how I submit the request.

$(function() {
    $('.detail a').click(function() {
        $('#cityId').val($(this).data('cid'));
        $('#cityName').val($(this).data('cn'));
        $('#parentIds').val($(this).data('pids'));

        $('#cityForm').submit();
    });
});

I passed the values to the hidden elements for submitting with POST method. Before the submit(), I checked and the action attribute of form is the right URL I want. But, after it, it didn't redirect to the URL I set, it just refreshed the current page.

This is the a in my code:

<a href data-cid="<c:out value='${cc.id}'/>" data-pids="<c:out value='${cc.type}'/>"

This is how the form looks like:

<form id="cityForm" method="post" action="<%=basePath%><c:out value='${sp}'/>">

It did work in IE. I searched online and found some solutions saying that it's caused by Chrome takes it as the same request, so I need to add a timestamp after the URL, but didn't work for me.

Position of script and set href="" may be issue. – GrvTyagi Dec 18 '15 at 06:56 — GrvTyagi, Dec 18 '15 at 06:56
@GrvTyagi What do you mean? I need to set href="" ? – Sky Dec 18 '15 at 06:58 — Sky, Dec 18 '15 at 06:58
@Sky means its due to set it as null string, use href = '#' – GrvTyagi Dec 18 '15 at 10:37 — GrvTyagi, Dec 18 '15 at 10:37

Michał Perłakowski · Accepted Answer · 2015-12-18T07:04:30.853

4

If you have a link with empty href attribute, it will become current page URL, so when you click such link, page just refreshes. If you want to bind some action to a element, you have to prevent its default behavior, using event.preventDefault():

$(function() {
    $('.detail a').click(function(event) {
        event.preventDefault();

        $('#cityId').val($(this).data('cid'));
        $('#cityName').val($(this).data('cn'));
        $('#parentIds').val($(this).data('pids'));

        $('#cityForm').submit();
    });
});

edited Dec 18 '15 at 07:04

answered Dec 18 '15 at 06:54

Michał Perłakowski

88,409
26
156
177

Thanks. This works for me. Can you explain in more detail? – Sky Dec 18 '15 at 06:59
Nature of `a` tag is to navigate user, as we want to invoke the function n click of this element, we need to prevent default nature of `a` tag.. – Rayon Dec 18 '15 at 07:02
I got it. Thanks, then if I set href to '#', it can work too, right? – Sky Dec 18 '15 at 07:14
@Sky If you set `href` to `#`, you will as well need to use `event.preventDefault()` because `#` link scrolls page to the top. IMHO the best solution is to use `button` instead of `a`, as Gerald wrote. See also: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 – Michał Perłakowski Dec 18 '15 at 07:19
@RayonDabre Yes, but I assume OP doesn't want any side effects. – Michał Perłakowski Dec 18 '15 at 07:23
Yes, Rayon is right. It can work, but with a bit suspending. – Sky Dec 18 '15 at 07:24

Gerald Schneider · Answer 2 · 2015-12-18T07:09:41.540

Use an <input type="submit"> or a <button type="submit"> instead of a link. You can use CSS to style the input exactly like an a tag and it will still work when JavaScript is disabled on the browser, which is not possible with your current solution.

button[type=submit].link {
  display: inline;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
button[type=submit].link:hover {
  text-decoration: underline;
  color: blue;
}

<button type="submit" class="link">This is a submit button</button>

You should always build websites to be completely functional without JavaScript, then you can add JS to improve the comfort of navigating the site.

Alfred · Answer 3 · 2016-01-19T18:29:39.370

1

Try;

<a href="" data-cid="<c:out value='${cc.id}'/>" data-pids="<c:out value='${cc.type}'/>" >Submit Form</a>

edited Jan 19 '16 at 18:29

answered Dec 18 '15 at 07:04

Alfred

21,058
61
167
249

Thanks, this does work. Just a little suspending when clicking the element. – Sky Dec 18 '15 at 07:50
`a` element without `href` attribute look just like `span`, see [JSFiddle](https://jsfiddle.net/y9gg2zjh/). – Michał Perłakowski Jan 19 '16 at 18:27

It's not working using 'a' to submit the form in HTML

3 Answers3