Setting up the subject line for an email script

Question

Setting up the subject line for an email script

I have received an email script from my hosting provider that I need to customize. My goal is to extract the value of radio buttons in a group, and based on their id determine the subject line of the email. If the id is small, the subject should be "företag", or if it's large, then the subject should be "Sök jobb hos oss".

Here is the script for the email form:

<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>

                            <!-- More form input fields here -->

                        </form>

Is there a way to modify this part:

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

to dynamically set the subject based on the selected radio button using JavaScript?

javascript html-email

Answer 1

Answer №1

Manipulating the value of a hidden field in your form can be done using JavaScript. In this case, you can access and modify the value of the hidden "subject" input field with the following code:

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

The method document.getElementsByName(name) returns a NodeList (an array-like object) containing all elements with the specified name attribute. By selecting the first element ([0]), we isolate the desired hidden input.

To determine which radio button is selected, you can utilize the unique ids assigned to them - 'small' and 'large'. Access their checked status using the following code snippet:

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

Based on the boolean values returned by these checks, you can update the subject field accordingly using conditional statements:

if (small) {
  document.getElementsByName("subject")[0].value = "Company";
}
if (large) {
  document.getElementsByName("subject")[0].value = "Job Opportunities";
}

For better organization, encapsulate this logic within a function that can be triggered by the form's onsubmit event. Here’s an example showcasing how this can be implemented:

function updateSubject() {
  var small = document.getElementById("small").checked;
  var large = document.getElementById("large").checked;
  if (small) {
    document.getElementsByName("subject")[0].value = "Company";
  }
  if (large) {
    document.getElementsByName("subject")[0].value = "Job Opportunities";
  }
}

Incorporate this function invocation within your form declaration ensuring it triggers correctly during submission:

<form method="post" action="youraction.php" onsubmit="updateSubject(); return true;">
  <!-- Form fields and other contents here -->
</form>

Answer 2

Manipulating the value of a hidden field in your form can be done using JavaScript. In this case, you can access and modify the value of the hidden "subject" input field with the following code:

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

The method document.getElementsByName(name) returns a NodeList (an array-like object) containing all elements with the specified name attribute. By selecting the first element ([0]), we isolate the desired hidden input.

To determine which radio button is selected, you can utilize the unique ids assigned to them - 'small' and 'large'. Access their checked status using the following code snippet:

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

Based on the boolean values returned by these checks, you can update the subject field accordingly using conditional statements:

if (small) {
  document.getElementsByName("subject")[0].value = "Company";
}
if (large) {
  document.getElementsByName("subject")[0].value = "Job Opportunities";
}

For better organization, encapsulate this logic within a function that can be triggered by the form's onsubmit event. Here’s an example showcasing how this can be implemented:

function updateSubject() {
  var small = document.getElementById("small").checked;
  var large = document.getElementById("large").checked;
  if (small) {
    document.getElementsByName("subject")[0].value = "Company";
  }
  if (large) {
    document.getElementsByName("subject")[0].value = "Job Opportunities";
  }
}

Incorporate this function invocation within your form declaration ensuring it triggers correctly during submission:

<form method="post" action="youraction.php" onsubmit="updateSubject(); return true;">
  <!-- Form fields and other contents here -->
</form>

Setting up the subject line for an email script

Answer №1

Similar questions

Error: Unable to access undefined properties (attempting to read 'getBoundingClientRect')

Is there a way to locate the final <li></li> within each <ul></ul>? (Regarding front-end development, specifically dealing with html, css, and jquery)

Using Jquery Ajax to Remove Post Upon Form Submission

What could be causing my vis.js network's node hover popups to not function properly?

Failure to trigger AJAX Success or Error Events

Unable to display an image element in fullscreen within a modal that is already fullscreen

Getting a ThreeJS element, specifically a mesh, by its ID

Choose dropdown menus that are pre-filled by JSON may require a manual refresh to show the content

Constant variable class

Discover the hidden truth: Unveiling the enigma of React

Managing callback functions within a for loop in Node.js: strategies and best practices

Tips for showcasing content by hovering over buttons with the help of Bootstrap3 and Jquery

Tips for updating the content within an HTML tag with jQuery

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

Adjust the sorting key for the displayed mapped array in a React component

What steps should be taken to configure Multer so that it delays saving an image until after a successful database entry using Mongoose has been made?

Utilizing a mutual RxJS subject for seamless two-way data binding in Angular 2

Comparing the positions of elements in Selenium WebDriver with PHP

Printing a webpage through an FGL printer (Boca System) step-by-step guide

Changing color based on AngularJS condition using CSS