链接以自动填充另一个页面中的输入框

Question

我正在尝试创建一个链接，单击该链接会将我重定向到另一个带有联系表单的html页面，并且该表单中有一个主题输入框。根据单击的链接，我希望使用相应的链接标题填充主题框。

现在尝试搜索了一段时间，但不知道如何让它工作。尝试使用其他一些地方提到的键值对方法，但肯定做错了，不确定如何。

下面是我的代码片段。h3"此处的产品标题"是我想填充主题框的内容(在我的实际网站中，我将有多个链接用不同的单词填充主题行(。

主页

<div class="squareIndexContentBox1" style="background-color: #fff">
<a href="contact us.html?subject=testing">
<h3>Title of the product here</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="learn-more">
<span id="learn-more">Contact us</span>
<span class="fa fa-hand-o-left"></span>
</div>
</a>
</div>

我要填充输入框的页面

<div class="contact-form">
<h2> Contact Us </h2>
<form method="POST" action="contact-form-handler.php">
<input type="text" name="name" placeholder="Name" required>
<br>
<input type="email" name="email" placeholder="Email" required>
<br>
<input id="subject" type="text" name="subject" placeholder="Subject" required>
<br>
<textarea type="text" name="message" placeholder="Message"></textarea>
<br>
<div class="g-recaptcha" data-sitekey=""></div>
<br>
<input type="submit" name="submit" class="submit-btn" value="Send Message">
</form>
</div>

提前感谢！

Answer 1

这取决于您如何从主页导航到第二个页面。

如果您使用简单的按钮导航到另一个页面，则在 url 中使用按钮传递唯一的字段名称，他们使用 $_GET 来获取该变量并在该唯一字段的帮助下搜索数据库中的特定字段并填写您的输入。

其次，如果您通过单击提交按钮从主页导航到另一个页面，即在填写一些表单后，您可以通过添加隐藏到另一个页面的输入类型来传递唯一的字段名称。

例

First Example:  <a href="second_page.php?prop_id=5 ">Click </a>

在 $_GET 的帮助下，在 second_page 中获取此变量 (prop_id

(

Second Example: <input type="hidden" name="email_address" value="<?php echo $email_address;?>" >

现在，通过提交表单，此输入类型也会发送到其他页面。

或者，您可以使用会话将该唯一字段传递到另一个页面。

*唯一字段名称是您可以从数据库中轻松查找值的键。

Answer 2

设法使用一些 js/jquery 让它工作，尽管它比我认为的要长一些。这样做的另一个问题是，即使我转到页面而不单击4个指定链接中的任何一个(例如通过导航栏(，输入框也会自动填充。

主页

<div class="squareIndexContentBox1" style="background-color: #fff">
<a href="contact us.html" onclick="autoinput1()">
<h3 id="this1">Service 1</h3>
<p>
dummy text 
</p>
</a>
</div>
<div class="squareIndexContentBox1" style="background-color: lightgrey;">
<a href="contact us.html" onclick="autoinput2()">
<h3 id="this2">Service 2</h3>
<p>
dummy text  
</p>
</a>
</div>
<div class="squareIndexContentBox1" style="background-color: lightgrey;">
<a href="contact us.html" onclick="autoinput3()"> 
<h3 id="this3">Service 3</h3>
<p>
dummy text 
</p>
</a>
</div>
<div class="squareIndexContentBox1" style="background-color: #fff">
<a href="contact us.html" onclick="autoinput4()"> 
<h3 id="this4">Service 4</h3>
<p>
dummy text 
</p>
</a>
</div>

爪哇语

将产品名称存储为可跨 html 文件使用的变量

function autoinput1() {
var productName = document.getElementById('this1').innerText;
localStorage.something = productName;
}
function autoinput2() {
var productName = document.getElementById('this2').innerText;
localStorage.something = productName;
}
function autoinput3() {
var productName = document.getElementById('this3').innerText;
localStorage.something = productName;
}
function autoinput4() {
var productName = document.getElementById('this4').innerText;
localStorage.something = productName;
}

我希望填充输入框的页面。

添加了一些jQuery，根据点击的链接填充"主题"输入字段

<script>
$(document).ready(function() {
$("#subject").val(localStorage.something);
});
</script>

我绝不是说这是解决我问题的好方法，这只是我能弄清楚的唯一方法。即使代码效率极低，但我仍然只是想学习 ̄_(ツ(_/̄

非常感谢任何其他解决方案:)

(甚至只是缩短我的代码(