Combine select choice with text value to show new alert

Question

I am trying to combine a select value and textbox number - to get a hidden question to popup. I have got the input popup done but not the combined select. So what I am trying to do is say choose option 3 - and if that one is picked and a certain value is entered in the textbox - I will get a popup. Also If I wanted to do a number between say 1-25 rather than just 1 number or maybe a set or numbers eg 1,3 or 5 is that possible? Thanks!

$(document).ready(function () {
    $("#cntnt01fbrp__70").keyup(function () {
        $("#question-1").css("display", this.value == "355" ? "block" : "none");
    });

});

Rick Hitchcock · Answer 1 · 2015-09-19T21:05:54.157

You can simplify this:

$("#question-1").css("display", this.value == "355" ? "block" : "none");

by using toggle():

$("#question-1").toggle(this.value == "355");

You can combine the select's value with the input's value by doing something like this:

$("#question-1").toggle($('#fbrp__119').val()=="5" && this.value=="355");

That will show the popup when the select equals "5" and the input equals "355".

In that case, you probably want to attach an input event rather than a keyup event, and test both elements:

$('#cntnt01fbrp__70, #fbrp__119').on('input', function () {
  $("#question-1").toggle($('#fbrp__119').val()=="5" &&  $('#cntnt01fbrp__70').val()=="355");
});

Fiddle

score 0 · Answer 2 · edited May 23 '17 at 11:44

Don't use shorthand if you're not comfortable with JavaScript, it'll only trip you up further. Here's a revised fiddle that displays question one properly when 355 is entered into the serial number box.

$(document).ready(function () {

        $("#cntnt01fbrp__70").keyup(function () {
            $("#question-1").css("display", function() {
              if ($('#cntnt01fbrp__70').val() === "355" && $('#fbrp__119').val()[0] === "2") {
                  console.log('worked');
                  return "block";
              } else {
                  return "none";
              }
            });

        });

});

Edit: As for your other questions, can you clarify a practical example of what you want to accomplish? What you described seems feasible, you simply need to do the string manipulation after getting both values, and adjust the conditional statements.

Edit 2: Modified to demonstrate additional conditions.

Edit 3: Rechecked and Rick was correct, removed those parts from my answer.

If you want to look for multiple values being selected, you'd have to check if the values are in the array, here's a solution for that which will return either true or false.

function isInArray(value, array) {
  return array.indexOf(value) > -1;
}

You'd use it like so:

var selectedNumbers =  $('#fbrp__119').val();
isInArray("2", selectedNumbers); //returns true if 2 is selected in the array.

Make sure you use quotation marks, as the array will return the values as strings.

Then use that boolean value to do whatever you'd like, you can check to see if 2 and 3 are in the array for instance by using that function twice, not the best execution, but just an example that it's possible.

As for multiple numbers in the input field, you're better off creating multiple input fields for different serial numbers, or creating an array from the values, and asking users to separate the values by a comma or space, and checking if the desired serial number is in the array as one part of your if statement condition. You can add as many && operators as you need to.

Hi first - thanks for the reply. It was working as expected in the text input part - (the fiddle said script was ok - but I will go with what works!) so if I enter 355 I had the modal popup. What I could not get working is the combinition - E.G so I I enter option 2 and then 355 I get the popup. — MediaMax, Sep 19 '15 at 20:54
@MediaMax You're welcome, have a look at the edited code, and updated fiddle: http://jsfiddle.net/mdz098c5/8/. Working with what you had initially, you can just add an additional condition in the if statement to look for both conditions to be true before displaying your question. Note, the reason for the `[0]` is because the `val()` method on that select returns an array. — Rashad Nasir, Sep 19 '15 at 21:02
thats brilliant thanks so much! - Is it possible to have more than one value so eg 355, 421 etc... — MediaMax, Sep 19 '15 at 21:11
@RickHitchcock You're right, for some reason the fiddle didn't run properly on my end initially and I framed my answer around the idea of having `this` be in the callback function of the css method. As it is, you're 100% correct. — Rashad Nasir, Sep 19 '15 at 21:20
@MediaMax Check edit #3. Basically the idea here is either you have separate input fields for different serial numbers (quicker to set up) or one input field, where users need to separate serial numbers by a space or comma. Then you'd need to parse their response, push each value to a single array of serial numbers, and then check against that array for the desired serial number or group of serial numbers to be in there, which can be done with the function listed in the answer. — Rashad Nasir, Sep 19 '15 at 21:29

Combine select choice with text value to show new alert

2 Answers2