javascript无法识别相同的ID [重复]

Posted 2023-05-07

【中文标题】javascript无法识别相同的ID [重复]

【英文标题】：identical id don't recognized on javascript [duplicate]

【发布时间】：2018-02-27 09:33:43

【问题描述】：

我会尽量直奔主题。我正在构建与 html 表单到谷歌表格的集成。这个概念很好用，我只有一个问题：我的页面上有两个表单（其中很多）。通过许多测试结果，我发现问题在于我的 javascript 仅从 HTML 的输入中获取 ID 标记。

所以，我不能使用相同的 id，我知道，但我只有一个表格有效！我已经测试了几个小时。有人可以帮帮我吗？

我发现的唯一解释是我的代码只读取了 ID 标签。所以我看到了两条路径：

我使用了一些替代标签来代替 ID，我可以在这两种形式上使用它； 有一些方法（我不知道）可以在这个 javascript 代码中插入一些行并强制我的代码接受重复的 id 或类似的东西。

以下是一些示例：我的表单之一和搜索变量的 javascript 部分。我对javascript不太了解，所以我请求你的帮助！

function submit_form()     
// Check Fields
var complete = true;
var error_color = '#FFD9D9';
var fields = ['nome','email','telefone'];
var row = '';
var i;
for(i=0; i < fields.length; ++i) 
    var field = fields[i];
    $('#'+field).css('backgroundColor', 'inherit');
    var value = $('#'+field).val();       
    // Validate Field
    if(!value) 
        if(field != 'message') 
            $('#'+field).css('backgroundColor', error_color);
            var complete = false;
        
         else             
		// Sheet Data
        row += '"'+value+'",';
    

   
// Submission
if(complete) 		
	// Clean Row
	row = row.slice(0, -1);		
    // Config
    var gs_sid = ''; // Enter your Google Sheet ID here
    var gs_clid = '306153877656-sbedffh19uommvljmns11ji28ckdj7g0.apps.googleusercontent.com'; // Enter your API Client ID here
    var gs_clis = ''; // Enter your API Client Secret here
    var gs_rtok = ''; // Enter your OAuth Refresh Token here
    var gs_atok = false;
    var gs_url = 'https://sheets.googleapis.com/v4/spreadsheets/'+gs_sid+'/values/A1:append?includeValuesInResponse=false&insertDataOption=INSERT_ROWS&responseDateTimeRenderOption=SERIAL_NUMBER&responseValueRenderOption=FORMATTED_VALUE&valueInputOption=USER_ENTERED';
    var gs_body = '"majorDimension":"ROWS", "values":[['+row+']]';        
     // HTTP Request Token Refresh
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://www.googleapis.com/oauth2/v4/token?client_id='+gs_clid+'&client_secret='+gs_clis+'&refresh_token='+gs_rtok+'&grant_type=refresh_token');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onload = function()             
        var response = JSON.parse(xhr.responseText);
        var gs_atok = response.access_token;            
		// HTTP Request Append Data
        if(gs_atok) 
            var xxhr = new XMLHttpRequest();
            xxhr.open('POST', gs_url);
            xxhr.setRequestHeader('Content-length', gs_body.length);
            xxhr.setRequestHeader('Content-type', 'application/json');
            xxhr.setRequestHeader('Authorization', 'OAuth ' + gs_atok );
            xxhr.onload = function() 
				if(xxhr.status == 200) 
					// Success
					$('#message').html('<p>Row Added to Sheet | <a href="http://snydergroupinc.com/tutorials/tutorial-google-sheets-api.php">Add Another &raquo;</a></p><p>Response:<br/>'+xxhr.responseText+'</p>');
					 else 
					// Fail
					$('#message').html('<p>Row Not Added</p><p>Response:<br/>'+xxhr.responseText+'</p>');
				
            ;
            xxhr.send(gs_body);
                    
    ;
    xhr.send();

<form id="sheets33" name="sheets33" class="contact-form row" method="post" action="c_form/envia.php">
					
					
                        <div class="col-md-4">
                            <label></label>
                            <input id="nome" name="nome" value="" class="form-control" placeholder="Insira seu nome">
                        </div>
                        <div class="col-md-4">
                            <label></label>
                            <input id="email" name="email"  value="" class="form-control" placeholder="Insira seu email">
                        </div>
                        <div class="col-md-4">
                            <label></label>
                            <input id="telefone" name="telefone" value="" class="form-control " placeholder="Insira seu telefone">
                        </div>
                        <div class="col-md-12">
                            <label></label>
                            <textarea name="mensagem" class="form-control" rows="9" placeholder="Digite sua mensagem"></textarea>
                        </div>
                        <div class="col-md-4 col-md-offset-4">
                            <label></label>
							
							<input type="hidden" class="form-control" placeholder="Origem" name="Origem" value="<?php echo $_GET["origem"]; ?>">
                            <button style="border-color:#000000" id="submit2" value="Submit" name="submit2" class="btn btn-primary btn-block btn-lg" onClick="submit_form()">
							<span style="color:#000000">Enviar<i class="ion-android-arrow-forward"></i></span></button>
							
							
							
							
                        </div>
                    </form>

【问题讨论】：

HTML 中禁止重复 ID。所以选择选项 1。

不是那么简单。你真的可以帮我吗？

【参考方案1】：

ID 是唯一的，因此如果您需要定位多个元素，您应该使用一个类，或者考虑在您可以定位的元素上设置 data-form-id 属性。

如果你有：

<form data-form-id="33">...

您的 Javascript 可以这样定位它：

$("form[data-form-id='" + field +"']");

假设您使用的是 jQuery，但也可以使用原生 Javascript。

【讨论】：

尼克，我已经编辑了 javascript 代码。当我在标签上使用任何东西而不是“ID”时，它不会发送到工作表。我已经对 javascript 代码进行了此修改，但效果不佳。顺便说一句，我只是在 Notepad++ 上编辑文件。这个 .js 文件似乎没有任何东西迫使它只读取 ID 标签，所以我仍然有麻烦；/

【参考方案2】：

使用其他选择器，例如 name 属性或 class

$('input[name='+field+']')

ID 不能重复使用。应该是唯一的。

【讨论】：

我已经尝试过了，但似乎 .js 代码（我已经使用完整的 .js 代码编辑了帖子）不接受与 ID 不同的任何内容。我仍在尝试改变这一点，但还没有任何效果......

$('#'+field).css('backgroundColor', 'inherit'); 需要替换为 $('input[name='+field+']').css('backgroundColor', 'inherit'); 。

我已经改变了它，但仍然没有任何改变。就像 Soren 说的，我认为它也是 .val 属性，或者我需要更改“id”属性。现在就试试。

【参考方案3】：

据我所知，问题不在于元素的选择，而在于值的处理。

$('#'+field) 选择所有具有匹配 id 的元素，但 css() 和 val() 都只选择找到的集合的第一个元素。

.val()

Get the current value of the first element in the set of matched elements or set the value of every matched element.

.css()

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

最好是由其他人推荐以避免重复的 ID。但如果无法避免，则必须遍历结果集并收集每个元素本身的数据。您可以使用经典的 for 循环或 jQuery .each() 函数。

为了防止重复的 ID，您可以编写一个 ID 生成器，或者如果您的表单 ID 是唯一的，您可以在字段 ID 前加上表单 ID。

【讨论】：

你的回答真的很好。就像我说的，我不太了解 Javascript。我会尝试理解这个 .each 函数，但是你建议我现在做什么，让它工作？ .val 和 .css 采用他们看到的第一个元素是有道理的，因为工作形式首先出现在代码中。我已经确定了问题，但我仍然没有我希望我必须修改它的所有知识。如果你能继续帮助我，我真的很感谢你！如果你不能，我明白。感谢您发现问题，我今天会尽力解决它。

我还是不知道应该如何替换 .val 函数。

您可以使用 .map()。看起来像 var values = $('#'+field).map(function(fielEl)return jQuery(fielEl).val();)。您将获得一个包含所有字段的所有值的数组。从那里开始，您可以使用普通的 for 循环对其进行迭代