我正在使用Google电子表格/文档通过私人和本地网站上的表单将数据输入到电子表格中。
我已删除重定向,方法是按照中的第一个答复:Google Forms: Send data to spreadsheet
这只是一个基于表单的示例表单:https://docs.google.com/forms/d/1SueoRbKQ4LVp-S5jHyjper-ZVH1W3YgnA1ySoH9nC-k/viewform?usp=send_form
现在。。。我试图使jQuery有3个函数。
正如你所看到的,我曾试图防止重复的名字和空白被选中不止一次,但没有成功:/
我还想强调一下下拉框中的错误,不要太难看,它应该使它们看起来像一个错误。
最后,与其重定向到Google,还不如用自定义的html替换<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>

最佳答案

这就是我认为你要做的要点: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
  }
}

这将绘制字段并为每个字段添加一个类:
  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);
    }
}

10-05 20:42
查看更多