How can I display selected values together using jQuery?

Question

I have some dropdown fields which trigger a popup that allows the user to enter a value. I want this value to appear in the button here:

<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value should appear here</button>

I'm able to get the most recently selected value to appear in the <button>, but I can't get all three values to appear together. Here is the full source code:

   $("#comparator_indicator").on('change', function() {
   		var comparator_value = $(this).val();
   		$("#moving_average_output").text(comparator_value);
   });
   $("#right_side_indicator_select-me").on('change', function() {
    //alert($(this).val());
    if ($(this).val() == 1) {
      $("#myModal_first").modal('show');
    }else if($(this).val() == 2) {
      $('#simple_moving_average').val('');
      $("#myModal_second").modal('show');
    }
   });
   $("#movingaveragebutton").on('click', function(event) {
      event.preventDefault();
      simplemovingaverage = $("#simple_moving_average").val();
      $("#moving_average_output").text(simplemovingaverage);
   });
   $("#exponentialbutton").on('click', function(event) {
      event.preventDefault();
      exponentialstring = $("#exponentialstring").val();
      exponentialnumber = $("#exponentialnumber").val();
      $("#moving_average_output").text(exponentialstring+','+exponentialnumber);
   });

/*   ----------------------right side -------------------------------------------*/

	$("#left_indicator_side_select-me").on('change', function() {
    //alert($(this).val());
    if ($(this).val() == 1) {
      $("#myModal_first").modal('show');
    }else if($(this).val() == 2) {
      $('#simple_moving_average').val('');
      $("#myModal_second").modal('show');
    }
   });
   $("#movingaveragebutton").on('click', function(event) {
      event.preventDefault();
      simplemovingaverage = $("#simple_moving_average").val();
      $("#moving_average_output").text(simplemovingaverage);
   });
   $("#exponentialbutton").on('click', function(event) {
      event.preventDefault();
      exponentialstring = $("#exponentialstring").val();
      exponentialnumber = $("#exponentialnumber").val();
      $("#moving_average_output").text(exponentialstring+','+exponentialnumber);
   });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

               <div class="row block-9">
                  <div class="col-md-4 pr-md-4">
                     <div class="form-group">
                        <label for="sel1">Right Side Indicator:</label>
                        <select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
                           <option>Select</option>
                           <option value="1">Moving Average</option>
                           <option value="2">Exponential Moving Average</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-md-4 pr-md-4">
                     <div class="form-group">
                        <label for="sel1">Comparator:</label>
                        <select class="form-control" id="comparator_indicator" name="comparator_indicator">
                           <option>Select</option>
                           <option value="=">=</option>
                           <option value=">">></option>
                           <option value="<"><</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-md-4 pr-md-4">
                     <div class="form-group">
                        <label for="sel1">Left Side Indicator:</label>
                        <select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
                           <option>Select</option>
                           <option value="1">Moving Average</option>
                           <option value="2">Exponential Moving Average</option>
                        </select>
                     </div>
                  </div>
               </div>










               <div class="form-group">
                  <label for="sel1">Selected values</label>
                  <button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">value will display here</button>
               </div>


               <div class="form-group">
                  <div id="myModal_first" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
                           </div>
                           <button type="button" id="movingaveragebutton" name="movingaveragebutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <div id="myModal_second" class="modal fade" role="dialog">
                     <div class="modal-dialog">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <div class="modal-content">
                           <div class="modal-body">
                              <div class="row block-9">
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="exponentialstring" name="exponentialstring">
                                          <option>SELECT THE OPTIONS</option>
                                          <option value="open">OPEN</option>
                                          <option value="close">CLOSE</option>
                                          <option value="low">LOW</option>
                                          <option value="high">HIGH</option>
                                       </select>
                                    </div>
                                 </div>
                                 <div class="col-md-6 pr-md-6">
                                    <div class="form-group">
                                       <select class="form-control" id="exponentialnumber" name="exponentialnumber">
                                          <option>SELECT THE OPTIONS</option>
                                          <option>1</option>
                                          <option>2</option>
                                          <option>3</option>
                                          <option>4</option>
                                          <option>5</option>
                                          <option>6</option>
                                          <option>7</option>
                                          <option>8</option>
                                          <option>9</option>
                                          <option>10</option>
                                       </select>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <button type="button" id="exponentialbutton" name="exponentialbutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>

If you run the example, you'll see that only the most recently entered value is displayed in the <button>.

Create one function that get values from 3 select and concatenate them into the button. Call that function after getting every value. — Triby
– Triby, Commented Jan 19, 2020 at 21:15

djs · Accepted Answer · 2020-01-19 23:45:17Z

OK I think I have this refactored correctly, I changed the order of your indicators because they seemed backwards:

<div class="col-md-4 pr-md-4">
   <div class="form-group">
      <label for="sel1">Left Side Indicator:</label>
      <select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
         <option>Select</option>
         <option value="1">Moving Average</option>
         <option value="2">Exponential Moving Average</option>
      </select>
   </div>
</div>

<div class="col-md-4 pr-md-4">
   <div class="form-group">
      <label for="sel1">Comparator:</label>
      <select class="form-control" id="comparator_indicator" name="comparator_indicator">
         <option>Select</option>
         <option value="=">=</option>
         <option value=">">></option>
         <option value="<"><</option>
      </select>
   </div>
</div>

<div class="row block-9">
   <div class="col-md-4 pr-md-4">
      <div class="form-group">
         <label for="sel1">Right Side Indicator:</label>
         <select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
            <option>Select</option>
            <option value="1">Moving Average</option>
            <option value="2">Exponential Moving Average</option>
         </select>
      </div>
   </div>
</div>

 <div class="form-group">
    <label for="sel1">Selected values</label>
    <button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value goes here</button>
 </div>

And here is the refactored JS (note that I removed the last two event handlers from your example, as they were not needed):

const output = {

  left: '',
  compare: '',
  right: '',

  toString: function() {
    return `${this.left} ${this.compare} ${this.right}`;
  },

};

let sideIndicator = '';

$("#left_indicator_side_select-me").on('change', function() {
  sideIndicator = 'left';
  if ($(this).val() == 1) {
    $("#myModal_first").modal('show');
  }else if($(this).val() == 2) {
    $('#simple_moving_average').val('');
    $("#myModal_second").modal('show');
  }
});

$("#comparator_indicator").on('change', function() {
  output.compare = $(this).val();
  $("#moving_average_output").text(output.toString());
});

$("#right_side_indicator_select-me").on('change', function() {
  sideIndicator = 'right';
  if ($(this).val() == 1) {
    $("#myModal_first").modal('show');
  }else if($(this).val() == 2) {
    $('#simple_moving_average').val('');
    $("#myModal_second").modal('show');
  }
});

$("#movingaveragebutton").on('click', function(event) {
  event.preventDefault();
  output[sideIndicator] = $("#simple_moving_average").val();
  $("#moving_average_output").text(output.toString());
});

$("#exponentialbutton").on('click', function(event) {
  event.preventDefault();
  exponentialstring = $("#exponentialstring").val();
  exponentialnumber = $("#exponentialnumber").val();
  output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
  $("#moving_average_output").text(output.toString());
});

Here's a JSFiddle where you can work with it and see if this solution meets your needs.

Brief Explanation

I created an object, output which will hold the text of the #moving_average_output <button> element. The properties will hold the text from the elements of the same name on the page:

const output = {

  left: '',
  compare: '',
  right: '',

  toString: function() {
    return `${this.left} ${this.compare} ${this.right}`;
  },

};

So, output.left will have the text content from this HTML element:

<div class="col-md-4 pr-md-4">
   <div class="form-group">
      <label for="sel1">Left Side Indicator:</label>
      <select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
         <option>Select</option>
         <option value="1">Moving Average</option>
         <option value="2">Exponential Moving Average</option>
      </select>
   </div>
</div>

This works by creating a variable sideIndicator in the global scope and setting it to the side of the dropdown that was clicked in your 'change' event handlers. Here is the example for the #left_indicator_side_select-me event handler:

let sideIndicator = '';

$("#left_indicator_side_select-me").on('change', function() {
  sideIndicator = 'left';
  if ($(this).val() == 1) {
    $("#myModal_first").modal('show');
  }else if($(this).val() == 2) {
    $('#simple_moving_average').val('');
    $("#myModal_second").modal('show');
  }
});

We can then use bracket notation to dynamically assign the value of the #simple_moving_average button and the #exponentialstring and #exponential number to the correct side in the output object:

$("#movingaveragebutton").on('click', function(event) {
  event.preventDefault();
  output[sideIndicator] = $("#simple_moving_average").val();
  $("#moving_average_output").text(output.toString());
});

$("#exponentialbutton").on('click', function(event) {
  event.preventDefault();
  exponentialstring = $("#exponentialstring").val();
  exponentialnumber = $("#exponentialnumber").val();
  output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
  $("#moving_average_output").text(output.toString());
});

The call to output.toString() will return the correctly formatted string as the button text.

Another Possible Solution

As an aside, you are doing some repetitive things in your version, which I didn't change in my refactor above. If I were approaching this project, I would do things a little differently in my JS. Here's another way of looking at things:

const movingAverageOutput = document.getElementById('moving_average_output');
const simpleMovingAverage = document.getElementById('simple_moving_average');

const output = {

  left: '',
  compare: '',
  right: '',

  toString: function() {
    return `${this.left} ${this.compare} ${this.right}`;
  },

};

const triggerModal = (val) => {
  if (val == 1) return $("#myModal_first").modal('show');
  if (val == 2) {
    simpleMovingAverage.value = '';
    $("#myModal_second").modal('show');
  }
};

let sideIndicator = '';

const setSideIndicator = (id) => {
  if (id === 'left_indicator_side_select-me') return sideIndicator = 'left';
  if (id === 'right_side_indicator_select-me') return sideIndicator = 'right';
};

window.addEventListener('change', function(e) {
  triggerModal(e.target.value);
  setSideIndicator(e.target.id);
});

$("#comparator_indicator").on('change', function() {
  output.compare = $(this).val();
  movingAverageOutput.textContent = output.toString();
});

$("#movingaveragebutton").on('click', function(event) {
  output[sideIndicator] = simpleMovingAverage.value;
  movingAverageOutput.textContent = output.toString();
});

$("#exponentialbutton").on('click', function(event) {
  exponentialstring = $("#exponentialstring").val();
  exponentialnumber = $("#exponentialnumber").val();
  output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
  movingAverageOutput.textContent = output.toString();
});

And here is a JSFiddle of that version if you want to mess around with it.

score 1 · Accepted Answer · 2020-01-19 21:53:49Z

Create 2 functions like bellow

Function 1 :

$(document).ready(function(){

 $('#my_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"add_data.php", //This is your page which inserts data in db
   method:"POST",
   data:form_data,
   dataType:"JSON",
   success:function(data)
   {
    if(data.error != '')
    {
     $('#error_message').html(data.error);

     load_my_data(); //This is second function name
    }
   }
  })
 });

Now ! we are ready for second function here

     load_my_data();

     function load_my_data()
     {
      $.ajax({
       url:"fetch_data.php",
       method:"POST",
       success:function(data)
       {
        $('#display_data').html(data);
       }
      })
     }
});

Create all your php and html codes in fetch_data.php when data submited in modal it will auto display your data in

<div id="display_data"></div>

And This div will display errors

<div id="error_message"></div>

See this comment system as an example it works same way as you want : https://www.webslesson.info/2017/12/comments-system-using-php-and-ajax.html

Collectives™ on Stack Overflow

How can I display selected values together using jQuery?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related