我正在使用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);
}
}