Email script subject setup

Question

I have obtained a email script from my web hosting provider. What I want to solve is to take the value of radio group buttons, then if id of one of them is small, then subject of the email should be "företag" else if the id is large, then then subject of the email should be "Sök jobb hos oss"

Here is the email script:

<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="email@something.se" />
                            <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>

Is this possible to change the following:

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

to submit the values from either one of the radio buttons in the form with JavaScript maybe?

Answer 1

You can get and set the value of your hidden subject input field using

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

document.getElementsByName(name) returns a NodeList - an array - of all the elements with the name name. Since there's just one element we can reference it using the appended [0].

To find out which one of the radio buttons is actually checked we can use document.getElementById(id) since you gave 'em an unique id of small and large.

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

This will return either true or false so another simple if-block can fill the subject field based on this.

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

If you wrap this inside a function you can call it with the onsubmit event of your form.

Here's an example:

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="email@something.se" />
  <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>