如何将参数路径设置为html表单

Question

我的表单代码是

<form id="test-form" class="white-popup-block mfp-hide">
<div class="popup_box ">
<div class="popup_inner">
<h3>Title</h3>
<form action="#">
<div class="row">
<p>
Description
</p>
<!-- <div class="col-xl-12">
<button type="submit" class="boxed-btn3">
Close
</button>
</div> -->
</div>
</form>
</div>
</div>
</form>

我怎么称呼这个表格：

<a class="popup-with-form amira_margin2"
href="#test-form">More</a>

每次打开表格时，我都想发送不同的标题和描述，如何发送？

Answer 1

向<h3>和<p>添加一些ID
并使用innerHTML替换标题和说明

HTML代码：

<form id="test-form" class="white-popup-block mfp-hide">
<div class="popup_box ">
<div class="popup_inner">
<h3 id="_h3">Title</h3>
<form action="#">
<div class="row">
<p id="_p">
Description
</p>
<!-- <div class="col-xl-12">
<button type="submit" class="boxed-btn3">
Close
</button>
</div> -->
</div>
</form>
</div>
</div>
</form>

JavaScript代码：

document.getElementById('_button1').click(function(e) { //_button1 is the id of your first button.
//Change the contents of the title
document.getElementById('_h3').innerHTML = "Hello world from button1!";
//And the description
document.getElementById('_p').innerHTML = "Hello world from button1!";
};

然后为所有按钮添加此脚本。

Answer 2

将表单标题类添加到h3，将表单描述类添加到p标记。并为每个按钮添加类似的类button和不同的类button_one，button\utwo作为select。有关更多详细信息，请查看下面的代码。

let buttons = document.querySelectorAll(".button");
		buttons.forEach((button) => {
			button.addEventListener('click', function(e) {
				e.preventDefault();
				let formTitle = document.querySelector('.form-title');
				let formDescription = document.querySelector('.form-description');
				if (button.classList.contains('button_one')) {
					formTitle.innerHTML = 'Button One Title';
					formDescription.innerHTML = 'Button One Description';
				} else if (button.classList.contains('button_two')) {
					formTitle.innerHTML = 'Button Two Title';
					formDescription.innerHTML = 'Button Two Description';
				} else if (button.classList.contains('button_three')) {
					formTitle.innerHTML = 'Button Three Title';
					formDescription.innerHTML = 'Button Three Description';
				} else if (button.classList.contains('button_four')) {
					formTitle.innerHTML = 'Button Four Title';
					formDescription.innerHTML = 'Button Four Description';
				} else {
					return null;
				}
			});
		});

<a class="popup-with-form button button_one amira_margin2"
href="#test-form">Button One</a>
<br>
	<a class="popup-with-form button button_two amira_margin2"
href="#test-form">Button Two</a>
<br>
	<a class="popup-with-form button button_three amira_margin2"
href="#test-form">Button Three</a>
<br>
	<a class="popup-with-form button button_four amira_margin2"
href="#test-form">Button Four</a>
<br>
	<form id="test-form" class="white-popup-block mfp-hide">
<div class="popup_box ">
<div class="popup_inner">
<h3 class="form-title">Title</h3>
<form action="#">
<div class="row">
<p class="form-description">
Description
</p>
<!-- <div class="col-xl-12">
<button type="submit" class="boxed-btn3">
Close
</button>
</div> -->
</div>
</form>
</div>
</div>
</form>