javascript - 文本链接填写表单字段

Question

我想学习如何创建文本链接，单击该链接时会在上面的表单上填写某些信息。

因此，在上下文中，我有一个包含字段的捐赠表格 - 金额/国家/项目。 在其下方，我在“我们最紧急的呼吁”标题下有一些链接。这可能类似于非洲的住房 - 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>

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

Answer 1

要以编程方式设置表单，您只需设置相关输入的 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>