我有一个包含某些字段的表单，提交完成后想重设整个表单，但只重设输入文本区域而不重设输入文件
我检查了所有类似的问题及其解决方案，但它们对我都不起作用，有些没有重置，有些重置但没有将我的表格数据下载到Firestore
<form class=" dropzone px-5" id="mydropzone">
<h2 class="text-center">Lets create your menu</h2>
<div class="form-group">
<label for="menuTitle">Menu Section Name</label>
<input type="text" class="form-control" id="menuTitle" aria-describedby="menuTitleHelp" placeholder="Enter your menu section name" required>
<small id="menuTitleHelp" class="form-text text-muted">Enter your menu's section name e.g.: Starters</small>
</div>
<div class="form-group">
<label for="foodName">Menu Item Name</label>
<input type="text" id="foodName" class="form-control" aria-describedby="menuFoodNameHelp" placeholder="Food/Drink name" required>
<small id="menuFoodNameHelp" class="form-text text-muted">Enter your menu's item name e.g.: Chicken Salad</small>
</div>
<div class="form-group">
<label for="menuItemDescription">Menu Item Description</label>
<textarea class="form-control" id="menuItemDescription" rows="3" aria-describedby="menuItemDescriptionHelp" required></textarea>
<small id="menuItemDescriptionHelp" class="form-text text-muted">Enter your menu item's description e.g.: Tomato, parsley, green pepper, onion with lemoni olive oil dressing with free lavas bread</small>
</div>
<div class="form-group">
<label for="menuItemInfo">Menu Item Info</label>
<textarea class="form-control" id="menuItemInfo" rows="6" aria-describedby="menuItemInfoHelp" required></textarea>
<small id="menuItemInfoHelp" class="form-text text-muted">Enter your menu item's detailed info e.g.: Besides tomatoes, onion, garlic and parsley, another must have ingredient in an ezme salad is pomegranate molasses. It gives a very nice sweet-sourish flavor and a darker color to the salad. If you can’t find pomegranate molasses in your area, you can increase the amount of lemon juice a little. As for the spices, hot chili pepper flakes (aci pul biber) is the main one. Another spice I personally love in ezme salad is sumac, which increases its sourness and gives a subtle earthy flavor. You can add dried mint for a little refreshment and to balance the sour and hot flavors of the salad. </small>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCalories">Calorie</label>
<input type="text" class="form-control" id="inputCalories" required>
</div>
<div class="form-group col-md-6">
<label for="cc">Calorie Calculator</label>
<button id="cc" class="btn btn-primary btn-lg"><i class="fas fa-calculator mr-2"></i>Click Me</button>
</div>
</div>
<div class="form-row">
<div class="form-group ml-2 col-sm-6">
<label>Menu Item Image</label>
<div id="msg"></div>
<div class="progress" id="uploader">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div>
</div>
<input type="file" name="img[]" class="file" accept="image/*" id="fileButton">
<div class="input-group my-3">
<input type="text" class="form-control" disabled placeholder="Upload File" id="file" required>
<div class="input-group-append">
<button type="button" class="browse btn btn-primary"><i class="fas fa-folder-open mr-2"></i>Browse...</button>
</div>
</div>
<div class="ml-2 col-sm-6">
<img src=" " id="preview" class="img-thumbnail">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block mb-3">Submit Menu</button>
<!-- -------------------------------------------------------------------------- -->
</div>
</form>
// create menu
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e) {
var file = e.target.files[0];
var storageRef = firebase.storage().ref('foodImg/' + file.name);
var task = storageRef.put(file);
task.on('state_changed', function progress(snapshot) {
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;
}, function(error) {
console.error(error);
}, function() {
task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('File available at', downloadURL);
const createMenuForm = document.querySelector('#mydropzone');
createMenuForm.addEventListener('submit', (e) => {
e.preventDefault();
db.collection('restaurants').add({
foodLine: {
menuTitle: createMenuForm.menuTitle.value
},
food: {
foodName: createMenuForm.foodName.value,
imageURL: downloadURL,
inputCalories: createMenuForm.inputCalories.value,
menuItemDescription: createMenuForm.menuItemDescription.value,
menuItemInfo: createMenuForm.menuItemInfo.value
}
}).then(() => {
//reset form
createMenuForm.reset();
fileButton.value = "";
var preview = document.getElementById('preview');
preview.value = "";
}).catch(err => {
console.log(err.message);
});
});
});
});
});
我的图片预览代码是
$(document).on("click", ".browse", function() {
var file = $(this).parents().find(".file");
file.trigger("click");
});
$('input[type="file"]').change(function(e) {
var fileName = e.target.files[0].name;
$("#file").val(fileName);
var reader = new FileReader();
reader.onload = function(e) {
// get loaded data and render thumbnail.
document.getElementById("preview").src = e.target.result;
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
});
没有任何错误
答案 0 :(得分：0)
你也可以尝试这些东西
document.getElementById("myForm").reset();
$("#myForm").trigger("reset");
答案 1 :(得分：0)
我认为您尝试在声明createMenuForm的范围之外访问const createMenuForm。
尝试在事件侦听器上方声明它：
// create menu
const createMenuForm = document.querySelector('#mydropzone');
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
// ...
或直接与
document.querySelector('#mydropzone').reset();
答案 2 :(得分：0)
我调试并发现预览需要干净
document.getElementById（“ preview”）。src =“＃”;