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> 

をユーザー押すが提出した場合、フォームはいつものように、/に提出しなければならない（そう変化なし）。

somedataを廃棄して/ bに送信する代わりに、ユーザーが/ bをクリックすると、フォームが<form action=/b>のように/ bにPOSTリクエストを送信したいとします。

これは、ページ上のすべてのハイパーテキストアンカーで自動的に行うことができるので、/ bだけでなく、/ c、/ d、/ eでも機能しますか？

純粋なJavascriptとjQueryの両方を使用できます。選択<a>のhrefに

Answer 1

変更フォームのactionし、フォーム

$('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>