jQuery checks & changes to inputs and dropdowns on a custom Google spreadsheets page

Question

I'm using Google spreadsheets/docs to input data into a spreadsheet via a form on private & local website.

I've removed the redirect by following the first reply in: Google Forms: Send data to spreadsheet

This is just an example form based of the form: https://docs.google.com/forms/d/1SueoRbKQ4LVp-S5jHyjper-ZVH1W3YgnA1ySoH9nC-k/viewform?usp=send_form

Now... I'm trying to make the jQuery have 3 functions.

As you can see I've had an attempt at preventing duplicate names and blanks from being chosen more than once but it's not working :/
I also want to highlight the dropdown where the errors are, not too ugly it's supposed to make them look like an error.
And finally instead of redirecting to Google is it possible to replace everything inside <div="all> with a custom bit of html...

How best would I go about these three changes?

JSFiddle Example: https://jsfiddle.net/qhucdmL5/

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function checkDropdowns()
        {
        var name=document.predictions.name;
        if (name.value == '') {alert('Please fill out name'); name.focus(); return false; }
            // The number of dropdowns you have (use the naming convention 'dropx' as an id attribute)
            var iDropdowns = 10; 

            var sValue;
            var sValue2;
            // Loop over dropdowns
            for(var i = 1; i <= iDropdowns; ++i)
            {
                // Get selected value
                sValue = document.getElementById('Name' + i).value;

                // Nested loop - loop over dropdowns again
                for(var j = 1; j <= iDropdowns; ++j)
                {
                    // Get selected value
                    sValue2 = document.getElementById('Name' + j).value;

                    // If we're not checking the same dropdown and the values are the same...
                    if ( i != j && sValue == sValue2 )
                    {
                        // ...we have a duplicate!
                        alert('You have selected the same name for multiple options');

                        return false;
                    }
                }
            }

            // No duplicates
            return true;
        }

    </script>
    <script type="text/javascript">
        $(function() {
            $('#mainform').submit(function() {
                alert('test'); // it's not doing anything
                checkDropdowns()
                //return true; // return false to cancel form action
            });
        });
    </script>
</head>
<body>
    <div id="all">
    <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='http://google.com/';}"></iframe>
    <form action="https://docs.google.com/forms/d/1SueoRbKQ4LVp-S5jHyjper-ZVH1W3YgnA1ySoH9nC-k/formResponse" id="mainform" name="predictions" method="POST" id="ss-form" target="hidden_iframe" onsubmit="submitted=true;">
    <div id="general">Name: <input type="text" name="entry.509620581" value="" class="ss-q-short" id="entry_509620581" style="font-size: 18pt;" dir="auto" aria-label="Name  " aria-required="true" required="" title="" tabindex="1"></div>
    <div id="main">
        <table cellpadding="3" cellspacing="3">
            <tr>
                <td align="center">Name 1<br><select name="entry.1382992313" id="Name1" tabindex="2" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
                <td align="center">Name 2<br><select name="entry.574800946" id="Name2" tabindex="3" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
                <td align="center">Name 3<br><select name="entry.1563963632" id="Name3" tabindex="4" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
                <td align="center">Name 4<br><select name="entry.574091641" id="Name4" tabindex="5" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
                <td align="center">Name 5<br><select name="entry.1132113470" id="Name5" tabindex="6" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
                <td align="center">Name 6<br><select name="entry.2083154196" id="Name6" tabindex="7" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
                <td align="center">Name 7<br><select name="entry.1737857772" id="Name7" tabindex="8" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
                <td align="center">Name 8<br><select name="entry.418826495" id="Name8" tabindex="9" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
                <td align="center">Name 9<br><select name="entry.1495023397" id="Name9" tabindex="10" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
                <td align="center">Name 10<br><select name="entry.186425174" id="Name10" tabindex="11" style="font-size: 18pt;"><option value = "VOID" selected="selected"></option><option value ="test1">test1</option><option value ="test2">test2</option><option value ="test3">test3</option><option value ="test4">test4</option><option value ="test5">test5</option><option value ="test6">test6</option><option value ="test7">test7</option><option value ="test8">test8</option><option value ="test9">test9</option><option value ="test10">test10</option></select></td>
            </tr>
        </table>
    </div>
    <div id="submit">
        <input type="submit" name="submit" value="Submit" style="font-size: 18pt;" id="ss-submit" class="jfk-button jfk-button-action" tabindex="12">
    </div>
</body>

I cleaned it up a little: https://jsfiddle.net/qhucdmL5/1/ Mainly just added creation of the select/options. you need a lookup with the check to see if the value is uniq. — Justin Thomas, Mar 13 '15 at 22:52

score 1 · Answer 1 · answered Mar 13 '15 at 23:02

This is the gist of what I think you are trying to do: https://jsfiddle.net/qhucdmL5/2/

I did two functions a little differently that you had it setup.

function checkDropdowns() {
  var lookup = {};
  var errorCount = 0;
  $('.nameSelect').each(function(item, el) {
    var val = $(el).val();
    if(lookup[val]) {
        // do error for field
        $(el).addClass('error');
        errorCount++;
    } else {
       lookup[val] = el;
    }

  });

  if(errorCount === 0) {
      // all good
  }
}

This draws the fields and adds a class to each:

  function drawNames() {
    for(var i = 0; i < NUM_FIELDS; i++) {
        var select = $('<select>').addClass('nameSelect').attr('name', "name_" + i);
        select.append($('<option>'));
        for(var k = 0; k < OPTION_FIELDS; k++) {
          var option = $('<option>');
          option.attr('value','test' + (k + 1));
          option.html('test' + (k + 1));
          select.append(option);
        }

        $('#main').append(select);
    }
}

Hey Justin, Thanks for that, I've had a look at it seems to be semi-working. This is just an example, the values in the dropdowns won't always be "test1", "test2"...etc. Also doesn't let me make more than 1 mistake, for example: http://screencast.com/t/eXwB4NE9V you can see after my second attempt it's just a mess. I worked out the `$('#all').replaceWith('Complete');` and changed .error to `border: red 1px dashed` but still would prefer it to look more "error" like :/ — Ryflex, Mar 14 '15 at 00:45
Also, the `name` has to stay how it was because that's how it manages to push the data to google sheets, for example: `name="entry.186425174"` will put into column 11 — Ryflex, Mar 14 '15 at 01:15

score 1 · Answer 2 · answered Mar 16 '15 at 09:13

Just another way to do it

function checkSelect(){
var valid = true;
 var name = document.predictions.name;
if (name.value == '') {
    alert('Please fill out name');
    name.focus();
    return false;
}        
$.each($("select"),function(index,value){
    var others = $("select");       
    if($(value.selectedOptions).val()!=="VOID"){
        $.each(others,function(otherIndex,otherValue){
            if($(otherValue.selectedOptions).val() !=="VOID"){
                if(index === otherIndex && $(value.selectedOptions).val() === $(otherValue.selectedOptions).val()){                    
                }
                else if($(value.selectedOptions).val()===$(otherValue.selectedOptions).val()){
                    $(value).css("background-color","red");
                    $(otherValue).css("background-color","red");
                    if(valid){                        
                     alert('You have selected the same name for multiple options');
                    }
                    valid = false;
                }
            }
        });
  }
});
return valid;
}

$(function() {
    $('#mainform').submit(function () {
    // it's not doing anything
    //checkDropdowns()
    return checkSelect();
    //return true; // return false to cancel form action
    });
});

Hmm, that looks pretty good, I cant work out a few things. See: https://jsfiddle.net/qhucdmL5/6/ as you can see I've added an else to make blanks (void ones) appear as an error but non-blanks to appear white... Ideally I want blanks (void) + duplicates to show tooltips like you see in http://i.imgur.com/6U9jOix.png. Also I can't work out how to incorperate the `$('#all').replaceWith('Complete');` and lastly, it allows me to submit the form incorrectly, for example if I put a name in and then leave them all "void" and press submit it still submits. — Ryflex, Mar 16 '15 at 13:08
This is the fix when no dropdown is selected https://jsfiddle.net/casinoantonio/qhucdmL5/7/ — Antonio, Mar 16 '15 at 13:34
If you put a name in and fill in the first dropdown it tries to subumit even though 2,3,4,5,6,7,8,9 and 10 are all blank :/ — Ryflex, Mar 16 '15 at 14:07
that behavior was what I understood from your requirements. If all the dropdowns are required just get rid of the variable "atLeastAValue" that I used to allow the user to submit partially the form. Bye :) — Antonio, Mar 17 '15 at 16:05

score 1 · Accepted Answer · answered Mar 19 '15 at 11:48

Javascript / jQuery:

function checkSelect() {
    var $selects = $("select").removeClass('duplicate');
    $selects.each(function(){
        var value = this.value;
        $selects.not(this).has('option[value="'+this.value+'"]:selected').addClass('duplicate');
    })
    var valid = !$selects.hasClass('duplicate');
    if (!valid) {
        var $div2 = $("#error").stop(true, true);
        if ($div2.is(":hidden")) {
            $div2.show("slow");
            setTimeout(function () {
                $div2.hide("slow");
            }, 10000);
        }
    }
    return valid;
};

$(function () {
    $("select").on("change", function () {
        $(this).removeClass("duplicate");
    });
});

CSS:

.duplicate{
    background-color: #ff9696;
}

jQuery checks & changes to inputs and dropdowns on a custom Google spreadsheets page

JSFiddle Example: https://jsfiddle.net/qhucdmL5/

3 Answers3

Javascript / jQuery:

CSS: