Дополнительного содержания формы в зависимости от нажатой кнопки

Question

Можно ли сделать что-то похожее на:

$(".T1C1butn").click(function() { 
     $(this).closest("form").attr("action", "/article/" + $(".T1C1Fetch").innerHTML);   
}); 

но вместо модификации действия формы в зависимости от которой была нажата кнопка, изменить данные, пересылаемые то есть, если пользователь нажимает кнопку 'Testbtn', затем <input type="text" class="form-control" name="url"> со значением «www.example.com» отправляется в почтовом запросе, и если они нажимают другую кнопку, значение для URL-адреса отличается.

Answer 1

Чтобы заполнить входы с определенными значениями, на основе которых нажата кнопка, вы должны привязать обработчик событий к каждому нажатию кнопки и назначить входные значения, используя jQuery .val().

Я бы также рекомендовал отделить функциональность заполнения и отправки формы, чтобы пользователь мог убедиться, что правильные значения заполнены перед отправкой. В приведенном ниже примере кнопки нажатия Data 1/2/3 заполняют поля, а нажатие кнопки «Отправить» представляет форму.

Демо: http://jsfiddle.net/BenjaminRay/oatyz6md/

HTML:

<form action="your url" method="post"> 
    <button id="T1C1butn1">Data 1</button> 
    <button id="T1C1butn2">Data 2</button> 
    <button id="T1C1butn3">Data 3</button><br /> 
    <input id="name" name="name" /><br /> 
    <input id="dob" name="dob" /><br /> 
    <input id="email" name="email" /><br /> 
    <button id="submit">Submit</button> 
</form> 

JavaScript:

$(function() { 

    $("#T1C1butn1").click(function (event) { 
     event.preventDefault(); 
     $('#name').val('John'); 
     $('#dob').val('8 October'); 
     $('#email').val('john@example.com'); 
    }); 

    $("#T1C1butn2").click(function (event) { 
     event.preventDefault(); 
     $('#name').val('Steve'); 
     $('#dob').val('12 September'); 
     $('#email').val('steve@example.com'); 
    }); 

    $("#T1C1butn3").click(function (event) { 
     event.preventDefault(); 
     $('#name').val('Mike'); 
     $('#dob').val('1 January'); 
     $('#email').val('mike@example.com'); 
    }); 

}); 

Answer 2

Это не понятно, почему вы должны сделать это. Тем не менее, самый простой способ, вероятно, будет хранить значения в атрибуте пользовательских данных на самих кнопках, то при нажатии, получить сохраненные значения и загружать их в элементы:

$(function() { 
 
     
 
    $(".btn").click(function() { 
 
     // get info from button 
 
     var info = $(this).data('info').split(','); 
 
     // set info to the inputs 
 
     $.each(info, function(i,e){ 
 
     $('#myForm input').eq(i).val(e); 
 
     }); 
 
     // submit form 
 
     // $('#myForm').submit(); // commented out because submit doesnt work in SO snippets 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="mypage.php" method="post" id="myForm"> 
 
    <input type="text" class="form-control" id="name" name="name" value="name"/><br /> 
 
    <input type="text" class="form-control" id="dob" name="dob" value="dob" /><br /> 
 
    <input type="text" class="form-control" id="email" name="email" value="email" /><br /> 
 
</form> 
 

 
<button class="btn" data-info="John,8 October,john@example.com">Data 1</button> 
 
<button class="btn" data-info="Steve,12 September,steve@example.com">Data 2</button> 
 
<button class="btn" data-info="Mike,1 January,mike@example.com">Data 3</button><br />