JavaScript 错误：自定义函数无法将数据输入表单字段的解决方案

摘要

本文旨在解决在使用 JavaScript 自定义函数向 HTML 表单字段输入数据时遇到的 Uncaught SyntaxError: Unexpected end of input 错误。通过分析问题代码，我们将提供正确的 PHP 语法，确保 JavaScript 函数能够成功调用并传递数据，从而实现动态表单填充的功能。

正文

在使用 PHP 从数据库动态生成 HTML 元素，并结合 JavaScript 函数处理用户交互时，经常会遇到引号嵌套的问题，导致 JavaScript 语法错误。本教程将以一个实际案例为例，详细讲解如何正确处理引号，避免 Uncaught SyntaxError: Unexpected end of input 错误。

问题描述

在从数据库中读取产品代码，并动态生成 HTML div 元素时，期望点击这些元素能够调用 JavaScript 函数 setProduct()，并将产品代码传递给该函数，最终将产品代码填充到 HTML 表单的 product 字段中。

立即学习“Java免费学习笔记（深入）”；

原始代码存在以下问题：

PHP 代码：

<?php
$query_popular_product="SELECT product_code FROM database_table GROUP BY product_code ORDER BY product_code DESC";
$result_popular_product = $link->query($query_popular_product);
while($row = $result_popular_product->fetch_assoc()) {
    $product_code = $row['product_code'];
    echo '<div class="popularProduct" onclick="setProduct("'.$product_code.'")">'.$product_code.'</div>';
}
?>

JavaScript 代码：

function setProduct(product) {
    console.log(product);
    document.getElementsByName("product")[0].value = product;
    document.getElementById("addProductPanel").style.display = "none";
}

生成的 HTML 代码类似于：

<div class="popularProduct" onclick="setProduct("PROD123")">PROD123</div>

在 Chrome 浏览器的开发者工具中，会看到 Uncaught SyntaxError: Unexpected end of input 错误，并且 JavaScript 函数 setProduct() 没有被调用。

问题分析

问题在于 PHP 代码中使用了双引号嵌套，导致 HTML onclick 属性中的双引号提前结束。例如，onclick="setProduct("PROD123")" 被解析为 onclick="setProduct("，后面的 PROD123") 则变成了无效的 JavaScript 代码，从而引发语法错误。

解决方案

解决此问题的关键是正确处理引号的嵌套。以下是两种可行的解决方案：

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

方案一：使用单引号包裹 JavaScript 函数调用，并转义内部的单引号

这是最推荐的方案，因为它避免了双引号的嵌套问题。

修改后的 PHP 代码：

<?php
$query_popular_product="SELECT product_code FROM database_table GROUP BY product_code ORDER BY product_code DESC";
$result_popular_product = $link->query($query_popular_product);
while($row = $result_popular_product->fetch_assoc()) {
    $product_code = $row['product_code'];
    echo '<div class="popularProduct" onclick="setProduct(\''.$product_code.'\')">'.$product_code.'</div>';
}
?>

在这个方案中，我们使用单引号包裹 onclick 属性的值，并使用 \' 来转义产品代码中的单引号（如果存在）。这样可以确保 HTML 代码的正确性。

方案二：使用 HTML 实体编码

虽然不推荐，但可以使用 HTML 实体编码来代替双引号。

修改后的 PHP 代码：

<?php
$query_popular_product="SELECT product_code FROM database_table GROUP BY product_code ORDER BY product_code DESC";
$result_popular_product = $link->query($query_popular_product);
while($row = $result_popular_product->fetch_assoc()) {
    $product_code = $row['product_code'];
    echo '<div class="popularProduct" onclick="setProduct("'.$product_code.'")">'.$product_code.'</div>';
}
?>

在这个方案中，我们使用 " 来代替双引号。虽然可以解决问题，但代码可读性较差，不推荐使用。

验证与测试

选择上述任意一种解决方案后，重新加载页面，并点击动态生成的 div 元素。在 Chrome 浏览器的开发者工具中，应该能够看到产品代码被正确地打印到控制台中，并且 HTML 表单的 product 字段也被成功填充。

注意事项

• 务必仔细检查 PHP 代码中引号的嵌套，确保 HTML 代码的正确性。
• 使用浏览器的开发者工具可以帮助你快速定位和解决 JavaScript 错误。
• 在处理用户输入时，务必进行安全过滤，防止 XSS 攻击。

总结

通过本教程，你学习了如何解决在使用 JavaScript 自定义函数向 HTML 表单字段输入数据时遇到的 Uncaught SyntaxError: Unexpected end of input 错误。 掌握正确的引号处理方法，可以避免类似的问题，并编写出更健壮的 Web 应用程序。记住，选择单引号包裹 JavaScript 函数调用，并转义内部的单引号是最佳实践。

以上就是JavaScript 错误：自定义函数无法将数据输入表单字段的解决方案的详细内容，更多请关注php中文网其它相关文章！