Question

我会尽力直截了当。我正在构建与html表单集成到Google工作表。这个概念很好用，我只有一个问题：我的页面上有两个表单（其中很多个）。有了很多测试结果，我发现问题是我的javascript只接受HTML输入中的ID标记。

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

Ids应该是唯一的，所以如果你需要定位多个元素，你应该使用一个类，或者考虑在你可以定位的元素上设置一个extension=php_phalcon.dll属性。

所以如果你有：

data-form-id

您的Javascript可以像这样定位：

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

这假设您正在使用$("form[data-form-id='" + field +"']");，但也可以使用vanilla Javascript。

Answer 2

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

class

ID无法重复使用。应该是独一无二的。

Answer 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添加前缀。

相同的ID不会在javascript

3 个答案: