링크를 클릭하여 JavaScript로 양식을 출시하는 방법은 무엇입니까?

링크를 클릭하여 JavaScript로 양식을 출시하는 방법은 무엇입니까?

---

대신 버튼 대신 링크가 있습니다.

<form>

  <a href="#"> submit </a>

</form>

클릭 할 때 양식을 사용할 수 있습니까?

---

가장 좋은 방법

가장 좋은 방법은 적절한 입력 태그를 삽입하는 것입니다.

<input type="submit" value="submit" />

최고의 JS 방법

<form id="form-id">
  <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

에 의해 후자의 자바 펼쳐 코드를 동봉 DOMContentLoaded(만 선택 이벤트 load에 대한 역 호환성 아직 수행하지 않은 경우)

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

제부 재조정 할 수없는 방법 (이전 답변)

onclick링크와 id양식에 속성을 추가하십시오 .

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

모든 길

어떤 방법을 선택하든 formObject.submit()결국 에는 호출 할 때 formObject( <form>태그 의 DOM 객체는 어디에 있습니까 ).

또한 호출하는 이벤트를 호출하는 formObject.submit()사용자가 특정 링크 또는 버튼을 클릭하면 바인딩해야합니다. 두 가지 방법이 있습니다.

• 권장 : 이벤트 리스너를 DOM 오브젝트에 바인드하십시오.

  // 1. Acquire a reference to our <form>.
  //    This can also be done by setting <form name="blub">:
  //       var form = document.forms.blub;
  
  var form = document.getElementById("form-id");
  
  
  // 2. Get a reference to our preferred element (link/button, see below) and
  //    add an event listener for the "click" event.
  document.getElementById("your-id").addEventListener("click", function () {
    form.submit();
  });
  

• 권장하지 않음 : 인라인 JavaScript를 삽입하십시오. 이 기술이 권장되지 않는 몇 가지 이유가 있습니다. 하나의 주요 주장은 마크 업 (HTML)과 펼쳐보기 (JS)를 혼합한다는 것입니다. 코드가 구성되지 않고 유지 관리가 불가능합니다.

  <a href="#" onclick="document.getElementById('form-id').submit();">submit</a>
  
  <button onclick="document.getElementById('form-id').submit();">submit</button>
  

이제 제출 () 호출을 트리거하는 UI 요소를 결정해야 할 시점에 도달했습니다.

1. 단추

   <button>submit</button>
   

2. 링크

   <a href="#">submit</a>
   

이벤트 리스너를 추가 비용으로 언급 한 기술을 적용하십시오.

---

jQuery를 사용하고 인라인 솔루션이 필요한 경우 매우 유용합니다.

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

또한 교체하고 싶을 수도 있습니다.

<a href="#">text</a>

와

<a href="javascript:void(0);">text</a>

따라서 링크를 클릭 할 때 사용자가 페이지 상단으로 스크롤하지 않습니다.

---

양식과 링크에 몇 가지 ID를 부여한 다음 onclick링크 및 submit양식 의 이벤트 를 구독 할 수 있습니다.

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

그리고 :

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

마크 업 의미를 존중하고 자바 스크립트가 비활성화 된 사용자에게도 작동하므로 양식 제출을 위해 제출 버튼을 사용하는 것이 좋습니다.

---

HTML 및 CSS-Javascript 솔루션 없음

버튼을 부트 스트랩 링크처럼 보이게 만들기

HTML :

<form>
    <button class="btn-link">Submit</button>
</form>

CSS :

.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

---

이것은 특별한 기능이 필요없이 잘 작동합니다. PHP로도 작성하기가 훨씬 쉽습니다.<input onclick="this.form.submit()"/>

---

document.getElementById("theForm").submit();

제 경우에는 완벽하게 작동합니다.

다음과 같은 기능에서도 사용할 수 있습니다.

function submitForm()
{
     document.getElementById("theForm").submit();
} 

양식 ID로 "theForm"을 설정하십시오. 끝났다.

---

귀하의 질문에 대한 최상의 솔루션은 다음과 같습니다. 양식 안에 다음 코드가 있습니다.

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

CSS 파일에서 다음을 수행하십시오.

button{
  display: none;
}

JS에서는 다음을 수행합니다.

$("a").click(function(){
   $("button").trigger("click");
})

됐습니다.

---

<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>

참고 URL : https://stackoverflow.com/questions/6799533/how-to-submit-a-form-with-javascript-by-clicking-a-link