将用户(前端)生成的表单字段动态导出到Firebase是否有问题? [英] Problem with exporting dynamically user (frontend) generated form fields to firebase?
本文介绍了将用户(前端)生成的表单字段动态导出到Firebase是否有问题?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
将几个动态输入字段导出到Firebase时出现问题，
I've got a problem exporting a couple of dynamic input fields to firebase,
我似乎得到了初始字段，但是当我生成新的动态字段时却没有得到
i seem to get the initial fields but when i generate new dynamic fields they dont get
已导出到数据库，建议我在名称或ID标记后放置[]以解决该问题.
exported to the database, i have been advised to put: [] behind the name or id tag to solve it.
不幸的是，这似乎并没有做到.
That doesn't seem to do it unfortunately.
所以，如果你们还有其他建议，我将非常感激！
So if you guys have any other tips i would be very greatful!
提前谢谢您并保持安全！ :)
Thank you in advance and stay safe! :)
HTML
<!-- Begining modal section -->
<div class="bg-modal">
<div class="modal-contents">
<div class="close li:hoover">+</div>
<!-- validation todo -->
<form class="input-modal" id="kundInfo">
<br>
<input class="input-modal" type="text" placeholder="name" id="userName" required>
<input class="input-modal" type="email" placeholder="e-mail" id="userEmail" required>
<textarea class="input-modal" name="meddelande" placeholder="Övrig information" id="userMessage"></textarea>
<select class="input-modal" id="deliveryTown" value="">
<option value="default">Välj leveransort</option>
<option value="Stockholm">Stockholm</option>
<option value="Göteborg">Göteborg</option>
<option value="Kalmar">Kalmar</option>
</select>
<br>
<div id="input-modal">
<input class="dynamic-input-fields" type="text" id="tillverkare[]" placeholder="Tillverkare">
<input class="dynamic-input-fields" type="text" id="artikel[]" placeholder="Artikel" required>
<input class="dynamic-input-fields" type="number" id="kvantitet[]" placeholder="Kvantitet" required>
<input class="dynamic-input-fields" type="button" value="Lägg till" id="add">
<!-- (original submit button)
<input type="submit" value="submit">
-->
</div>
<br>
<select class="input-modal" id="produktKategori" value="">
<option value="default">Välj inköpskategori</option>
<option value="trävaror">Trävaror</option>
<option value="mur&puts">Mur & puts</option>
<option value="mark&trädgård">Mark & trädgård</option>
<option value="vvs">VVS</option>
<option value="våtrum">Våtrum</option>
<option value="verktyg">Verktyg</option>
</select>
<br>
<br>
<button class="input-modal" id="Skicka" type="submit">Skicka</button>
</form>
<div class="alert">Ditt förfrågan har skickats!</div>
</div>
</div>
jquery.js(用于生成动态字段)
jquery.js (for generating the dynamic fields)
$(document).ready(function() {
$("#add").click(function(e) {
event.preventDefault()
$('#input-modal').append(
'<div><input class="dynamic-input-fields" type="text" id="tillverkare[]" name="tillverkare[]" placeholder="Tillverkare">'+
'<input class="dynamic-input-fields" type="text" id="artikel[]" name="artikel[]" placeholder="Artikel">' +
'<input class="dynamic-input-fields" type="number" id="kvantitet[]" name="kvantitet[]" placeholder="kvantitet">' +
'<input type="button" name="delete" value="delete" id="delete"/></div>'
);
});
$('body').on('click', '#delete', function(e) {
event.preventDefault()
$(this).parent('div').remove();
});
});
main.js(已初始化Firebase的地方)
main.js (where firebase is initialized)
// Firebase configuration
var firebaseConfig = {
apiKey: "***************************",
authDomain: "***************************",
databaseURL: "***************************",
projectId: "***************************",
storageBucket: "***************************",
messagingSenderId: "***************************",
appId: "***************************"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// reference messages collection
var messagesRef = firebase.database().ref('kundAnbud');
/*--------------------------
listen for submit form
----------------------------*/
document.getElementById('kundInfo').addEventListener('submit', submitForm);
//submit form
function submitForm (e) {
e.preventDefault();
// get all the form values.
var userName = getInputVal('userName');
var userEmail = getInputVal('userEmail');
var userMessage = getInputVal('userMessage');
var deliveryTown = getInputVal('deliveryTown');
var produktKategori = getInputVal('produktKategori');
var tillverkare = getInputVal('tillverkare[]');
var artikel = getInputVal('artikel[]');
var kvantitet = getInputVal('kvantitet[]');
//save message
saveMessage(userName, userEmail, userMessage, deliveryTown, produktKategori, tillverkare, artikel, kvantitet);
//show alert
document.querySelector('.alert').style.display = 'block';
// hide alert after 3 secs.
setTimeout(function(){
document.querySelector('.alert').style.display = 'none';
},3000);
//clear form
document.getElementById('kundInfo').reset();
}
//function to get form values.
function getInputVal(id){
return document.getElementById(id).value;
}
//save message to firebase.
function saveMessage(userName, userEmail, userMessage, deliveryTown, produktKategori, tillverkare, artikel, kvantitet){
var newMessageRef = messagesRef.push();
newMessageRef.set({
userName: userName,
userEmail: userEmail,
userMessage: userMessage,
deliveryTown: deliveryTown,
produktKategori: produktKategori,
tillverkare: tillverkare,
artikel: artikel,
kvantitet: kvantitet,
});
}
这可能行得通吗?
$("#add").click(function(e){
e.preventDefault();
if(x < 10){x++; $(wrapper).append(
'<div><input id="tillverkare'+x+'"/><input id="artikel'+x+'"/><input id="kvantitet'+x+'"/><a href="#" class="delete">Delete</a></div>'
); //add input box
}
});
推荐答案
如果在commitForm函数中初始化变量后控制台控制台记录变量，它们是否设置正确?让我们看看问题出在您是如何从表单捕获数据的，还是问题在于您在Firebase中的设置方式.那就是我要开始的地方！
if you console log the variables after you initialize them in your submitForm function are they set correctly? let's see if the issue is how you're capturing your data from the form or if issue is with the way you're setting if in Firebase. That's where I'd start!
这篇关于将用户(前端)生成的表单字段动态导出到Firebase是否有问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
