javascript - 电子邮件脚本主题设置

Question

我从我的网络托管服务提供商处获得了一个电子邮件脚本。我要解决的是取单选组按钮的值，然后如果其中一个的 id 很小，那么电子邮件的主题应该是“företag”，否则如果 id 很大，那么电子邮件的主题应该是“Sök jobb hos oss”

这是电子邮件脚本：

<form method="post" action="http://www.something.se/cgi-bin/FormMail.pl"
                            accept-charset="ISO-8859-1" onsubmit="var originalCharset= document.charset;
            document.charset= 'ISO-8859-1';
            window.onbeforeunload= function () {document.charset=originalCharset;};" class="form">
                            <div class="u-margin-bottom-medium">
                                <a name="section-book"></a>
                                <h2 class="heading-secondary">
                                    kontakta oss
                                </h2>
                            </div>

                            <div class="form__group">
                                <input type="text" class="form__input" placeholder="För och efternamn" id="name"
                                    required>
                                <label for="name" class="form__label">Full
                                    name</label>
                            </div>

                            <div class="form__group">
                                <input type="email" class="form__input" placeholder="Epost-adress" id="email" required>
                                <label for="email" class="form__label">Email
                                    address</label>
                            </div>

                            <div class="form__group">
                                <textarea class="form__input" id="message" required
                                    placeholder="Skriv ditt meddelande..." cols="30" rows="5"></textarea>
                                <label for="textarea" class="form__label">Textarea</label>
                            </div>

                            <div class="form__group u-margin-bottom-medium">
                                <div class="form__radio-group">
                                    <input type="radio" class="form__radio-input" id="small" name="size">
                                    <label for="small" class="form__radio-label">
                                        <span class="form__radio-button"></span>
                                        Företag
                                    </label>
                                </div>

                                <div class="form__radio-group">
                                    <input type="radio" class="form__radio-input" id="large" name="size">
                                    <label for="large" class="form__radio-label">
                                        <span class="form__radio-button"></span>
                                        Sök jobb hos oss
                                    </label>
                                </div>
                            </div>

                            <div class="form__group">
                                <!--<button class="btn btn--green">Skicka
                                    &rarr;</button>-->
                                <input class="btn btn--green" type="submit" value="Skicka&rarr;" />
                            </div>
                            <input type="hidden" name="recipient" value="[e-mail]" />
                            <input type="hidden" name="subject" value="Subject" />
                            <input type="hidden" name="redirect" value="http://www.something.se/tack.html" />
                            <input type="hidden" name="missing_fields_redirect"
                                value="http://www.something.se/fel.html" />
                            <input type="hidden" name="required" value="realname,email,Message" />
                        </form>

这是否可以更改以下内容：

<input type="hidden" name="subject" value="Subject" />

用javascript提交表单中任一单选按钮的值可能吗？

谢谢

标签： javascripthtml-email

Answer 1

您可以使用获取和设置隐藏主题输入字段的值

document.getElementsByName("subject")[0].value

document.getElementsByName(name)返回一个NodeList - 一个数组 - 包含名称为name的所有元素。由于只有一个元素，我们可以使用附加的[0]来引用它。

要找出实际检查了哪个单选按钮，我们可以使用document.getElementById(id) ，因为您为它们提供了small和large的唯一 id 。

  var small = document.getElementById("small").checked;
  var large = document.getElementById("large").checked;

这将返回 true 或 false，因此另一个简单的 if 块可以基于此填充主题字段。

  if (small) {
    document.getElementsByName("subject")[0].value = "Företag";
  }
  if (large) {
    document.getElementsByName("subject")[0].value = "Sök jobb hos oss";
  }

如果将其包装在一个函数中，则可以使用表单的onsubmit事件调用它。

这是一个例子：

function addSubject() {
  var small = document.getElementById("small").checked;
  var large = document.getElementById("large").checked;
  if (small) {
    document.getElementsByName("subject")[0].value = "Företag";
  }
  if (large) {
    document.getElementsByName("subject")[0].value = "Sök jobb hos oss";
  }
}

<form method="post" action="http://www.something.se/cgi-bin/FormMail.pl" accept-charset="ISO-8859-1" onsubmit="addSubject(); var originalCharset= document.charset;
            document.charset= 'ISO-8859-1';
            window.onbeforeunload= function () {document.charset=originalCharset;};" class="form">
  <div class="u-margin-bottom-medium">
    <a name="section-book"></a>
    <h2 class="heading-secondary">
      kontakta oss
    </h2>
  </div>

  <div class="form__group">
    <input type="text" class="form__input" placeholder="För och efternamn" id="name" required>
    <label for="name" class="form__label">Full
                                    name</label>
  </div>

  <div class="form__group">
    <input type="email" class="form__input" placeholder="Epost-adress" id="email" required>
    <label for="email" class="form__label">Email
                                    address</label>
  </div>

  <div class="form__group">
    <textarea class="form__input" id="message" required placeholder="Skriv ditt meddelande..." cols="30" rows="5"></textarea>
    <label for="textarea" class="form__label">Textarea</label>
  </div>

  <div class="form__group u-margin-bottom-medium">
    <div class="form__radio-group">
      <input type="radio" class="form__radio-input" id="small" name="size">
      <label for="small" class="form__radio-label">
                                        <span class="form__radio-button"></span>
                                        Företag
                                    </label>
    </div>

    <div class="form__radio-group">
      <input type="radio" class="form__radio-input" id="large" name="size">
      <label for="large" class="form__radio-label">
                                        <span class="form__radio-button"></span>
                                        Sök jobb hos oss
                                    </label>
    </div>
  </div>

  <div class="form__group">
    <!--<button class="btn btn--green">Skicka
                                    &rarr;</button>-->
    <input class="btn btn--green" type="submit" value="Skicka&rarr;" />
  </div>
  <input type="hidden" name="recipient" value="[e-mail]" />
  <input type="hidden" name="subject" value="Subject" />
  <input type="hidden" name="redirect" value="http://www.something.se/tack.html" />
  <input type="hidden" name="missing_fields_redirect" value="http://www.something.se/fel.html" />
  <input type="hidden" name="required" value="realname,email,Message" />
</form>