Javascript: Отправить форму, нажав на любой якорный тег в форме

Question

У меня есть форма и множество ссылок:

<form action="/a"> 
<input type=text name=somedata> 
<input type=submit> 

<a href="/b">my first link</a> 
<a href="/c">link</a> 
<a href="/d">link</a> 
<a href="/e">link</a> 
</form> 

Если пользователь нажимает представить, форма должна быть представлена ​​в/а, как обычно (так без изменений).

Но когда пользователь нажимает на/b, вместо того, чтобы сломать somedata и отправить GET-запрос в/b, я хочу отправить POST-запрос в/b так, как если бы форма была <form action=/b>.

Можно ли сделать это автоматически со всеми гипертекстовыми якорями на странице, чтобы он не только работал с/b, но и/c,/d и/e?

Оба чистых Javascript и jQuery являются приемлемыми.

Answer 1

Изменение action формы к href в <a> выбран и затем отправить форму

$('form a').click(function(event){ 
    event.preventDefault(); 
    $(this).closest('form').attr('action', this.href).submit(); 
}); 

Answer 2

var form = document.querySelector("form"); 
 
var allA = document.querySelectorAll("a"); 
 

 
allA.forEach(function(el){ 
 
    
 
    el.addEventListener("click",function(e){ 
 
    form.submit(); 
 
    e.preventDefault();   
 
    }); 
 
    
 
}); 
 

 
form.addEventListener("submit",function(e){ 
 
    e.preventDefault(); 
 
    console.log("The form has been submit"); 
 
});

<form action="/a"> 
 
<input type=text name=somedata> 
 
<input type=submit> 
 

 
<a href="/b">my first link</a> 
 
<a href="/c">link</a> 
 
<a href="/d">link</a> 
 
<a href="/e">link</a> 
 
</form>

Answer 3

Сначала удалить кнопку отправки.

$("#formId a").click(function(){ 
    var currentHref = $(this).attr("href"); 
    $("#formId").attr("action",currentHref); 
    $("#formId").submit(); 
}); 

Answer 4

var form = document.querySelector("form"); 
 
var allA = document.querySelectorAll("a"); 
 

 
allA.forEach(function(el){ 
 
    
 
    el.addEventListener("click",function(e){ 
 
    form.action = this.href; 
 
    console.log("Form action is been change to => " + this.href) 
 
    form.submit(); 
 
    e.preventDefault();   
 
    }); 
 
    
 
}); 
 

 
form.addEventListener("submit",function(e){ 
 
    e.preventDefault(); 
 
    console.log("The form has been submit"); 
 
});

<form action="/a"> 
 
<input type=text name=somedata> 
 
<input type=submit> 
 

 
<a href="/b">my first link</a> 
 
<a href="/c">link</a> 
 
<a href="/d">link</a> 
 
<a href="/e">link</a> 
 
</form>