jQuery 检查和更改自定义 Google 电子表格页面上的输入和下拉菜单

Question

我正在使用 Google spreadsheets/docs 通过私人和本地网站上的表单将数据输入电子表格。

我已经按照第一个回复删除了重定向：Google Forms: Send data to spreadsheet

这只是基于以下形式的示例形式：https://docs.google.com/forms/d/1SueoRbKQ4LVp-S5jHyjper-ZVH1W3YgnA1ySoH9nC-k/viewform?usp=send_form

现在... 我正在尝试使 jQuery 具有 3 个功能。

如您所见，我曾尝试防止多次选择重复的名称和空格，但它不起作用：/
我还想突出显示错误所在的下拉菜单，不要太难看，应该让它们看起来像错误。
最后，不是重定向到 Google 是否可以用 html...[=17= 的自定义位替换 <div="all> 中的所有内容]

我如何最好地进行这三项更改？

JSFiddle 示例：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>

Answer 1

这是我认为您正在尝试做的事情的要点：https://jsfiddle.net/qhucdmL5/2/

我执行的两个功能与您设置的功能略有不同。

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
  }
}

这会绘制字段并向每个字段添加一个 class：

  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);
    }
}

Answer 2

另一种方法

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
    });
});

Answer 3

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 检查和更改自定义 Google 电子表格页面上的输入和下拉菜单

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

javascript

jquery

html

google-sheets

google-docs

JSFiddle 示例：https://jsfiddle.net/qhucdmL5/

Javascript / jQuery:

CSS: