文本链接填充表单字段

Text link fills in form fields

本文关键字：字段 表单 填充 链接 文本      更新时间：2023-09-26

我想学习如何创建一个文本链接，当点击它时，它会填充我上面表单上的某些信息。

因此，在上下文中，我有一个带有字段的捐赠表格——金额/国家/项目。下面我有几个链接，标题是"我们最紧急的呼吁"。这可能有点像非洲的住房——100英镑。

点击此链接时，它会在表格中填写信息，因此金额为100英镑，国家为非洲，项目为住房。该表格不会提交，它只会被填写好，用户可以更改他们想要的任何内容。

我四处寻找，但找不到合适的答案来帮助我。有人能帮忙吗？

就基本情况而言，我的表格可以是这样的：

<form target="paypal" id="general-donate" class="form-horizontal" action="https://www.paypal.com/cgi-bin/webscr" method="post" data-validate="parsley" >
<div class="control-group">
    <label for="amount" class="control-label">
        Donation Amount (&#163;)
    </label>
    <div class="controls">
        <input type="text" name="amount" data-min="5" min="5" value="10.00" required>
    </div>
</div>
<div class="control-group">
    <label for="os0" class="control-label">
        Country
    </label>
    <div class="controls">
        <input type="hidden" name="on0" value="Country">
        <select name="os0">
            <option value="Where Needed Most">Where Needed Most </option>
            <option value="Africa">Africa </option>
            <option value="Bangladesh">Bangladesh </option>
            <option value="Palestine/Gaza">Palestine/Gaza </option>
            <option value="Pakistan">Pakistan </option>
            <option value="UK">UK </option>
            <option value="Burma">Burma </option>
            <option value="Syria">Syria </option>
            <option value="Tunisia">Tunisia </option>
            <option value="Sri Lanka">Sri Lanka </option>
            <option value="Kashmir">Kashmir </option>
        </select>
    </div>
</div>
<div class="control-group">
    <label for="os1" class="control-label">
        Projects
    </label>
    <div class="controls">
        <input type="hidden" name="on1" value="Projects">
        <select name="os1">
            <option value="Where Needed Most">Where Needed Most </option>
            <option value="Food">Food </option>
            <option value="Water">Water </option>
            <option value="Medicine">Medicine </option>
            <option value="Water Wells">Water Wells </option>
            <option value="Hospitals">Hospitals </option>
            <option value="Disabled Assistance">Disabled Assistance </option>
            <option value="Eid Gift">Eid Gift </option>
            <option value="Housing">Housing </option>
        </select>
    </div>
</div>
<div class="form-actions">
<button type="submit" id="buynow" class="btn btn-danger">
    Donate via PayPal
</button>
</div>
</form>

我的链接只是下面的文本。点击后，相关信息就会填写在表格上。表格是基本的，有一个金额文本输入和两个下拉选项。

要用程序设置表单，只需设置相关输入的value属性：

var amount = document.getElementsByName('amount')[0],
    os0 = document.getElementsByName('os0')[0],
    os1 = document.getElementsByName('os1')[0];
function setForm(amountValue, os0Value, os1Value) {
  amount.value = amountValue;
  os0.value = os0Value;
  os1.value = os1Value;
}
var link = document.getElementById('set-form');
link.onclick = function (e) {
  setForm(100, 'Africa', 'Housing');
};

在您的html:中

<a href="#" id='set-form'>click</a>

好的，可以用jquery完成：

创建以下javascript函数：

function fillFields(amount, country, project) {
  $('input[name="amount"]').val(amount);
  $('select[name="os0"]').val(country);
  $('select[name="os1"]').val(project);
}

然后你的按钮的html应该是类似的东西

<button onclick="fillFields('100', 'Africa', 'housing')">Housing in Africa - £100</button>

"点击此链接时，它会在表格中填写信息，因此金额为100英镑，国家为非洲，项目为住房。表格不会提交，只会填写好，用户可以更改任何他们想要的内容。"

这应该有效：

<a class="click-me" href="javascript:;">Click Me</a>
<script>
// <![CDATA[
(function ($) {
   $(function () {
      $('body').delegate('.click-me', 'click', function () {
         $('input[name="amount"]').val('100'); // Set amount to £100
         $('select[name="os0"]').val('Africa'); // Set country to Africa
         $('select[name="os1"]').val('Housing'); // Set needed most to Housing
      });
   });
})(jQuery);
// ]]>
</script>

这里有一个jsFiddle：http://jsfiddle.net/NzX8V/

这将是一种更灵活的方式：（jsFiddle：http://jsfiddle.net/RLtVR/）

<a class="click-me" rel="100,Africa,Housing" href="javascript:;">Click Me</a>
<script>
// <![CDATA[
(function ($) {
   $(function () {
      $('body').delegate('.click-me', 'click', function () {
         var rel = $(this).attr('rel').split(','),
         amount = rel[0], country = rel[1], needed = rel[2];
         $('input[name="amount"]').val(amount); // Set amount
         $('select[name="os0"]').val(country); // Set country
         $('select[name="os1"]').val(needed); // Set needed most
      });
   });
})(jQuery);
// ]]>
</script>

如果你使用HTML5中的data-*属性而不是rel属性，你可以让它更容易维护和读取，但由于我不确定你的doctype，我想我会谨慎行事。例如，您可以将属性dataamount="100"datacountry="Africa"datarequired="Housing"，然后使用jQuery的.attr（）方法引用这些属性，而不是将它们逗号分隔并拆分。

相关文章：