jQuery Conditional String Manipulation

Question

jQuery Conditional String Manipulation

I have set up a system where users can input values and make selections from a drop-down menu, which then get integrated into JavaScript code to generate customized sentences based on their inputs. Once the user clicks submit, the sentence is formed. It's a simple process overall, but I am struggling with incorporating multiple inputs from a single drop-down selection into the sentence.

For instance, if a user selects "navigation" and "usb ports" within the drop-down, the sentence should read as follows: "It has these options: navigation, aux." Similarly, if three options are chosen, the sentence should be formatted like this: "It has these options: navigation, aux, usb ports."

I am looking for guidance on how to modify the code so that when two options are selected, they are separated by an "and" in the sentence. For example, it should say: "It has these options: navigation and aux." In cases where three or more options are selected, an "and" should appear before the last option, like so: "It has these options: navigation, aux, and usb ports."

jquery html drop-down-menu jquery-chosen

Answer 1

Answer №1

The input4 is an array provided by Chosen.

You simply need to iterate through the values in that array and customize them as desired, such as adding commas and including an "and" before the last value.

<!DOCTYPE html>
<html>

  <head>
<title>Greetings</title>;

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<style type="text/css">
  table,td,th {margin-left: auto;margin-right: auto}
  .display {display: flex;align-items: center;justify-content: center;}
  p {text-align: center;}
  textarea {display: block;margin-left:auto;margin-right: auto;}
</style>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<script type="text/javascript">

  $(function() {
    $(".chosen-select").chosen({
      disable_search_threshold: 4
    });
  })
  </script>

  <script type="text/javascript">

  function generateText() {
    document.getElementById("s1").value = "";// reset
    document.getElementById("s1").style.display = "block";
    document.getElementById("r1").style.display = "block";

    if (document.getElementById("z1").value == "") {
      alert("Please provide Year, Make, and Model");
      document.getElementById("z1").focus();
    }

  else if (document.getElementById("z2").value == "") {
      alert("Mileage is required");
    }

else if (document.getElementById("z3").value == "") {
      alert("Exterior color must be specified");
    }

    else {
      const input1 = document.getElementById("z1").value;
      const input2 = document.getElementById("z2").value;
      const input3 = document.getElementById("z3").value;
      var input4 = $('#z4').val();
      
      // =======================================
      console.log(input4);  // This represents an array.
      
      var formattedInput4 = "";
      if(input4.length==1){
        // Only one element...
        formattedInput4 = input4[0];
      }
      if(input4.length==2){
        // Two elements... Add "and"
        formattedInput4 = input4[0]+" and"+input4[1];
      }
      if(input4.length>2){
        // more than 2 elements...
        for(i=0;i<input4.length-1;i++){
          formattedInput4 += input4[i]+",";
        }
        formattedInput4 += " and"+input4[input4.length-1];
      }
      // =======================================
      
      document.getElementById("s1").value =
        "For sale is a " + input1 + " with " + input2 + " miles. It is finished in "
        + input3 + ". Options include: " +formattedInput4+ ".";

    }
  }

  function clearForm() {
    document.getElementById("s1").value = "";
  }


  function conceal() {
    document.getElementById("s1").style.display = "none";
    document.getElementById("r1").style.display = "none";
  }


</script>
  </head>

  <body onload="conceal()">
    <table>
      <tr>
        <td>
          <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100">
        </td>
        <td>
          <input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100">
        </td>
        <td>
          <input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100">
        </td>
        <td>
          <select data-placeholder="Options" name="options" id="z4"  multiple class="chosen-select">
            <option value=""></option>
            <option value=" navigation">Navigation</option>
            <option value=" aux">Aux</option>
            <option value=" usb ports">USB Ports</option>
            <option value=" heated seats">Heated Seats</option>
          </select>
        </td>
      </tr>
      <tr>
    </table>
    <br>
    <div class="display">
      <button onclick="generateText()"> Submit </button>
    </div>
    <hr>
    <br>
    <textarea rows="10" cols="100" id="s1"></textarea>
    <br>

    <div class="display">
      <button onclick="clearForm()" id="r1">Reset</button>
    </div>

  </body>
</html>

Answer 2

The input4 is an array provided by Chosen.

You simply need to iterate through the values in that array and customize them as desired, such as adding commas and including an "and" before the last value.

<!DOCTYPE html>
<html>

  <head>
<title>Greetings</title>;

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<style type="text/css">
  table,td,th {margin-left: auto;margin-right: auto}
  .display {display: flex;align-items: center;justify-content: center;}
  p {text-align: center;}
  textarea {display: block;margin-left:auto;margin-right: auto;}
</style>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<script type="text/javascript">

  $(function() {
    $(".chosen-select").chosen({
      disable_search_threshold: 4
    });
  })
  </script>

  <script type="text/javascript">

  function generateText() {
    document.getElementById("s1").value = "";// reset
    document.getElementById("s1").style.display = "block";
    document.getElementById("r1").style.display = "block";

    if (document.getElementById("z1").value == "") {
      alert("Please provide Year, Make, and Model");
      document.getElementById("z1").focus();
    }

  else if (document.getElementById("z2").value == "") {
      alert("Mileage is required");
    }

else if (document.getElementById("z3").value == "") {
      alert("Exterior color must be specified");
    }

    else {
      const input1 = document.getElementById("z1").value;
      const input2 = document.getElementById("z2").value;
      const input3 = document.getElementById("z3").value;
      var input4 = $('#z4').val();
      
      // =======================================
      console.log(input4);  // This represents an array.
      
      var formattedInput4 = "";
      if(input4.length==1){
        // Only one element...
        formattedInput4 = input4[0];
      }
      if(input4.length==2){
        // Two elements... Add "and"
        formattedInput4 = input4[0]+" and"+input4[1];
      }
      if(input4.length>2){
        // more than 2 elements...
        for(i=0;i<input4.length-1;i++){
          formattedInput4 += input4[i]+",";
        }
        formattedInput4 += " and"+input4[input4.length-1];
      }
      // =======================================
      
      document.getElementById("s1").value =
        "For sale is a " + input1 + " with " + input2 + " miles. It is finished in "
        + input3 + ". Options include: " +formattedInput4+ ".";

    }
  }

  function clearForm() {
    document.getElementById("s1").value = "";
  }


  function conceal() {
    document.getElementById("s1").style.display = "none";
    document.getElementById("r1").style.display = "none";
  }


</script>
  </head>

  <body onload="conceal()">
    <table>
      <tr>
        <td>
          <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100">
        </td>
        <td>
          <input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100">
        </td>
        <td>
          <input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100">
        </td>
        <td>
          <select data-placeholder="Options" name="options" id="z4"  multiple class="chosen-select">
            <option value=""></option>
            <option value=" navigation">Navigation</option>
            <option value=" aux">Aux</option>
            <option value=" usb ports">USB Ports</option>
            <option value=" heated seats">Heated Seats</option>
          </select>
        </td>
      </tr>
      <tr>
    </table>
    <br>
    <div class="display">
      <button onclick="generateText()"> Submit </button>
    </div>
    <hr>
    <br>
    <textarea rows="10" cols="100" id="s1"></textarea>
    <br>

    <div class="display">
      <button onclick="clearForm()" id="r1">Reset</button>
    </div>

  </body>
</html>

jQuery Conditional String Manipulation

Answer №1

Similar questions

Alternative form for non-javascript browsers in the absence of script

Tips for updating the color of a table row when it is chosen and a row is inserted using ajax

Unable to modify variable to play audio

Transferring array data between two distinct click actions

Created a custom JQuery Slider from scratch - Disappointed with the results

When using jQuery load and TinyMCE, I encountered an error stating "g.win.document is null" upon subsequent loads

Using the jquery-ui-daterangepicker to fetch date values within an MVC controller

JavaScript Date Validation: Ensuring Proper Dates

Bypass the save as dialogue box and initiate automatic file download without interruption

Extract content within Python pre tags

A table featuring two tbody sections positioned side by side within the table structure, with the thead located at the top

Using Django Template Variables in JavaScript Functions

Refreshing a webpage to accurately display changes made in a CRUD application without the need for a hard reset

Trouble with the JQuery event listener onchange()

What is the best way to include a .AVI file in an HTML document?

Tips for preventing recursion when utilizing scrollIntoView() in a scroll event handler

Basic HTML Audio Player Featuring Several Customizable Variables

What is the best way to ensure that text fields remain hidden upon page load until the appropriate drop down option is chosen?

Working with the visibility of a button using JavaScript

What is the most effective approach to seamlessly conceal and reveal a button with the assistance