0

I am programming a website what's function is needlessly to mention atm. I have set up some jQuery code to insert data over a form into the related database using ajax. Before, it should check some things like if one input has a same value from an array that I've set up as well and so on. In the follwing is my code, really can't find out, what the hella is wrong with this.

    // AJAX, CREATE CATEGORY FUNCTION
$('#create_category_form').submit(function(event){
    // VALID COLORS
    var valid_colors = ["249,95,110,.72", // STD RED
                        "155,39,175,.72", // PURPLE
                        "102,58,182,.72", // DEEP PURPLE
                        "33,149,242,.72", // BLUE
                        "95,124,138,.72", // BLUE GREY
                        "0,149,135,.72",  // TEAL
                        "64,147,67,.72",  // GREEN
                        "254,86,34,.72",  // DEEP ORANGE
                        "254,151,0,.72",  // ORANGE
                        "120,84,71,.72"]; // BROWN

    var colorchooser_value = $('#cat-color-value').val();

    if( $('#category_name').val().length === 0 ) {

        $('.category-name').css( 'background','#FCCED3' ).focus();
        return false;

    } else if( $('#cat-color-value').val().inArray(colorchooser_value, $valid_colors) == -1 ) {

        $('.category-name').css( 'background','#FCCED3' ).focus();
        return false;

    } else {

        event.preventDefault();
        $.ajax({
            type: 'GET',
            url: '/functions/create_category.php',
            data: $(this).serialize(),
            success: function(data){
                // REFRESH FORM
                $('#create_category_form')[0].reset();
                // CLOSE OVERLAYS
                $('#create-category').toggleClass('toggleOverlay');
                togglePageoverlay();
                // SHOW INFO
                $('#info-banner').addClass('toggleInfo');
                $('#info-banner .inner .innertext').html('Category was successfully created!');
                hideInfobannerDelayed();
            }
        });

    }

});

I hope someone could help me with this. It's necessary to check if the value of the given input is matching one of the array values. Thanks in advance.

Ayumi Takanashi
  • 53
  • 6
  • If I delete the else if part and just keep the first check it works fine, but if I add the second check for the color matching the color in the array, it's reloading the page and showing stuff in the browser ledge without inserting anything into the database – Ayumi Takanashi Jun 18 '17 at 23:14
  • I always find it suspicious when someone says that their website's functionality doesn't need to be mentioned. If it doesn't need to be mentioned, don't mention it. Otherwise it just sounds like you're doing something you shouldn't be ;) – Obsidian Age Jun 18 '17 at 23:15
  • If you go to the JavaScript console in your browser, you can sequentially run each step of `$('#cat-color-value').val().inArray(colorchooser_value, $valid_colors)` so you can see where things go wrong. Please tell us where you start to get values you don't expect. – Ken Y-N Jun 18 '17 at 23:15
  • In your `inArray(colorchooser_value, $valid_colors)`, `$valid_colors` shouldn't have a dollar sign. I'm assuming that's what is breaking for you. – Obsidian Age Jun 18 '17 at 23:17
  • Oh dang you're right – Ayumi Takanashi Jun 18 '17 at 23:21

1 Answers1

1

Based on jQuery.inArray documentation you should use jQuery.inArray like this:

$.inArray('value', array) // or jQuery.inArray('value', array)

So you need to change your code as follow:

else if ($.inArray(colorchooser_value, valid_colors) == -1)
    // ...

Related SO question: jQuery.inArray(), how to use it right?

Mehdi Dehghani
  • 10,970
  • 6
  • 59
  • 64