Превращение ссылки в кнопку

278

26 июня 2017, 17:54

Возможно ли при помощи JQuery заставить <a> выполнять действие <input type="submit">? Если "да", то как и какие методы использовать?

Answer 1

Банально ставим обработчик click на ссылку. При клике вызываем submit у формы.

$(document).on('click', '#submit-form', function(e){ 
    e.preventDefault(); 
    $('form').submit(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<form action="/test/yo" method="post"> 
  <input type="text" value="test">   
</form> 
 
<a href="#" id="submit-form">click</a>

При таком подходе даже не обязательно, чтобы #submit-form был ссылкой. Можно клик установить вообще на любой элемент. Главное тут вызвать сабмит формы $('form').submit();

Answer 2

Можно просто делать submit формы при клике на ссылку:

$("#linkSubmit").on("click", function() { 
  $("#form").submit(); 
  return false; 
});

<form id="form" action="save"> 
  <input name="key" value="value" /> 
</form> 
<a id="linkSubmit" href="">Link submit</a> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Если обязательно нужно нажать именно на <input type="submit">, то тогда можно сделать именно это:

$("#linkSubmit").on("click", function() { 
  $("#inputSubmit").click(); 
  return false; 
});

<form id="form" action="save"> 
  <input name="key" value="value" /> 
  <input id="inputSubmit" type="submit" /> 
</form> 
<a id="linkSubmit" href="">Link submit</a> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>