这是我在 StackOverflow 上的第一个问题，所以我希望在这篇文章的格式和解释方面得到任何帮助！谢谢！
我一直在尝试完成一项关于创建一个表单的作业，该表单需要 4 个输入并将其转换为 QR 码，同时还将其数据保存在一个简单的 .txt 文件中。
我发现了两个模板，每个模板都能做到这一点。然而，当我尝试将它们合并到一个 HTML 文件中时，它似乎不起作用。
<!DOCTYPE html>
<html>
<head>
<title>Contact form</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
html, body {
min-height: 100%;
padding: 0;
margin: 0;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
}
h1 {
margin: 0 0 20px;
font-weight: 400;
color: #1c87c9;
}
p {
margin: 0 0 5px;
}
#qrcode{
float: left;
}
.main-block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1c87c9;
}
form {
padding: 25px;
margin: 25px;
box-shadow: 0 2px 5px #f5f5f5;
background: #f5f5f5;
}
.fas {
margin: 25px 10px 0;
font-size: 72px;
color: #fff;
}
.fa-envelope {
transform: rotate(-20deg);
}
.fa-at, .fa-mail-bulk {
transform: rotate(10deg);
}
input, textarea {
width: calc(100% - 18px);
padding: 8px;
margin-bottom: 20px;
border: 1px solid #1c87c9;
outline: none;
}
input::placeholder {
color: #666;
}
button {
width: 100%;
padding: 10px;
border: none;
background: #1c87c9;
font-size: 16px;
font-weight: 400;
color: #fff;
}
button:hover {
background: #2371a0;
}
img.qr-code {
margin: 100px;
width: 200px;
height: auto;
}
@media (min-width: 568px) {
.main-block {
flex-direction: row;
}
.left-part, form {
width: 50%;
}
.fa-envelope {
margin-top: 0;
margin-left: 20%;
}
.fa-at {
margin-top: -10%;
margin-left: 65%;
}
.fa-mail-bulk {
margin-top: 2%;
margin-left: 28%;
}
}
</style>
</head>
<body>
<div class="main-block">
<div id="qrcode" class="left-part"></div>
<form id="myForm">
<h1>Generador de Qr</h1>
<div class="info">
<input type="text" id="input1" type="text" name="codigo" placeholder="Codigo">
<input type="text" name="laboratorio" placeholder="Laboratorio" id="input2">
<input type="text" name="producto" placeholder="Producto" id="input3">
<input type="text" name="precio" placeholder="Precio" id="input4">
</div>
<p>Principio Activo</p>
<div>
<textarea id="principio-activo" rows="4"></textarea>
</div>
<button type="button" id="submit-button">Guardar Datos</button>
<button id="generate" style="margin-top: 5px;">Generar Qr</button>
</form>
</div>
<!-- Script para generar la descarga de datos-->
<script>
document.getElementById('submit-button').addEventListener('click', function () {
// Get the form data
const codigo = document.querySelector('[name=codigo]').value;
const laboratorio = document.querySelector('[name=laboratorio]').value;
const producto = document.querySelector('[name=producto]').value;
const precio = document.querySelector('[name=precio]').value;
const principioActivo = document.getElementById('principio-activo').value;
// Create a text content
const textContent = `Codigo: ${codigo}\nLaboratorio: ${laboratorio}\nProducto: ${producto}\nPrecio: ${precio}\nPrincipio Activo:\n${principioActivo}`;
// Create a blob with the text content
const blob = new Blob([textContent], { type: 'text/plain' });
// Create an object URL
const url = URL.createObjectURL(blob);
// Create a download link
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'form_data.txt';
// Append the link to the body and trigger the click event
document.body.appendChild(a);
a.click();
// Clean up
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
</script>
<!--Script para generar el Qr-->
<script>
$(document).ready(function () {
$('#generate').click(function () {
const input1 = $('#input1').val();
const input2 = $('#input2').val();
const input3 = $('#input3').val(); // Include input3 value
const input4 = $('#input4').val(); // Include input4 value
const data = { input1, input2, input3, input4 }; // Create a JSON object
// Convert the JSON object to a string and generate a QR code
const jsonStr = JSON.stringify(data);
const qrCodeUrl = `https://chart.googleapis.com/chart?cht=qr&chl=${encodeURIComponent(jsonStr)}&chs=200x200`;
$('#qrcode').html(`<img src="${qrCodeUrl}" alt="QR Code">`);
});
});
</script>
</body>
</html>我尝试更改名称变量，从头开始重写它，但不知何故只有一个按钮起作用。
出现问题的原因是，当您单击通用二维码按钮时，表单已提交，并且您用于生成二维码的代码将不会被执行，这是表单的自然行为。 要解决这个问题，您必须阻止在单击通用 Qr 按钮时提交表单，您可以使用
event.preventDefault()以下是您的代码所需的修改：
<script>
$(document).ready(function () {
$('#generate').click(function (event) {
event.preventDefault();
const input1 = $('#input1').val();
const input2 = $('#input2').val();
const input3 = $('#input3').val(); // Include input3 value
const input4 = $('#input4').val(); // Include input4 value
const data = { input1, input2, input3, input4 }; // Create a JSON object
console.log(data);
// Convert the JSON object to a string and generate a QR code
const jsonStr = JSON.stringify(data);
const qrCodeUrl = `https://chart.googleapis.com/chart?cht=qr&chl=${encodeURIComponent(jsonStr)}&chs=200x200`;
$('#qrcode').html(`<img src="${qrCodeUrl}" alt="QR Code">`);
});
});
</script>