CODEWITHSUNDEEP
javascriptjqueryhtmltriggersonchange
Pedro Monteiro
Pedro Monteiro

Reputation: 337

Getting the onChange value before actually changing Select Box

I'm trying to develop a function to fetch the onChange value from a select box before it actually changes.

Lets imagine I have a select box like this:

<select id='testing_combobox'>
   <option value='0'>Test</option>
   <option value='1'>Test 1</option>
   <option value='2'>Test 1</option>
</select>

And when I click in a specific link I run this next jquery code:

$('#link').click(function(){
   $('#testing_combobox').val(299);
});

Now what I want is to have an attached trigger in the select box which would catch the value 299 parse and validate it according to some rules and if everything is ok I'll then actually change the select box.

No, I cannot change the .click function since that belongs to an external module.

And I can't also put the val in a hidden input to validate it.

Any ideas?

Upvotes: 1

Views: 2581

Answers (3)

Ruben Marques
Ruben Marques

Reputation: 1

This issue was posted by Pedro Monteiro by my request, so, maybe i can better explain it myself.

This issue reported was an example, i'll try to summarize the true problem.

Initially we had a select box with over 40k entries, which was making the website getting very slow. Due to that we've started using an external module called Selectize.

What selectize does is to hide the initial select box and removes all entries in there and then creates his own div with all the entries that should be in the initial select box.

In practical terms what happens is this: BEFORE:

<select id='test'>
  <option value=1>test1</option>
  <option value=2 selected>test2</option>
  <option value=3>test3</option>
</select>

AFTER CALLING SELECTIZE:

<select id='test>
   <option value='2' selected>test2</option>
</select>

<div id='test-selectize'>
  <div data-value=1>test1</div>
  <div data-value=2>test2</div>
  <div data-value=3>test3</div>
</div>

What happens is that each time i select an option in the selectize generated combobox he creates that selected item in the initial select box and puts it selected.

So in the initial select box i'll only have the 'real, selected value'.

Until here everything's perfect. The problem that we're now facing is that this is a project with over 4 years of development with thousands of code lines.

And there are many code lines that will force the selection of value via jquery to a select box. Something like this $('#test').val(3);

But now since we're using the Selectize module, the initial select box does not have that option on it.

So what we wanted to do is almost a try/catch, so when i try to change the value of my initial select box via code i grab that event and instead of 'changing' the value of the select box i'll call my own function which will select the value on the Selectize module instead.

The easy solution would be to grab all code done during the past 4 years and in each place where i'm forcing the .val on a select box i'll re-write it to use the new module, but, this is very time consuming and of course bugs will appear for sure.

Hope this has explained better the problem.

Upvotes: 0

Deepak Biswal
Deepak Biswal

Reputation: 4320

Here is a working fiddle.

HTML

<select id='testing_combobox'>
   <option value='0'>Test</option>
   <option value='1'>Test 1</option>
   <option value='2'>Test 2</option>
</select>

JS

var isValid = function(itemVal) {
    // Do your logic here are return true/false
    // For now I am always returning false
    return false;
}

var lastItemSelected = $('#testing_combobox').val();
$('#testing_combobox').change(function(event){
   var selectedItemVal = $(this).val();
    if(!isValid(selectedItemVal)) { // Check if it is not valid then select previous value
        $(this).val(lastItemSelected);
        return;
    }
    lastItemSelected = $(this).val();
});

// Trigger event on link click. You can assign whatever value you want to assign and then trigger change event.
$('#link').click(function(){
    $('#testing_combobox')
     .val('2')
     .trigger('change');
});

Hope this is what you need!

Upvotes: 1

Steven Brookes
Steven Brookes

Reputation: 894

You can get the current value at the point of 'mousedown' on the button, which fires before click:

$('#link').mousedown(function(){
   var combobox = $('#testing_combobox');

   combobox.data('prevVal', combobox.val());

});

There are some problems you still face though. When setting val() through jQuery, the change event doesn't fire which is issue 1. Issue 2 is that val wont set anything if there isnt a valid value in the select options list.

Without manually triggering the change event, you would have to poll the value, but that won't change because of issue 2.

Is the module likely to change what it is doing? You could unbind the event and rebind your own, which is pretty 'hacky'

Why cant you use a hidden input?

Upvotes: 1

Related Questions