मेरे पास कुछ फ़ील्ड के साथ एक फॉर्म है और सबमिट करने के बाद मैं पूरे फॉर्म को रीसेट करना चाहता हूं लेकिन केवल इनपुट टेक्स्ट क्षेत्रों को इनपुट प्रकार फ़ाइल रीसेट करना चाहता हूं।

मैं हर समान प्रश्नों और समाधानों की जांच करता हूं लेकिन उनमें से कोई भी मेरे लिए काम नहीं करता है। कुछ समाधान पृष्ठ को रीफ्रेश करते हैं जो मुझे नहीं चाहिए।

<form class=" dropzone px-5" id="mydropzone">
  <h2 class="text-center">Lets create your menu</h2>
  <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);
        });
      });
    });
  });
});
-1
azermann 8 अक्टूबर 2019, 14:57

3 जवाब

सबसे बढ़िया उत्तर

मैं डीबग करता हूं और पाता हूं कि पूर्वावलोकन को साफ करने की जरूरत है

Document.getElementById ("पूर्वावलोकन")। src = "#";

0
azermann 9 अक्टूबर 2019, 10:04

मुझे लगता है कि आप उस दायरे से बाहर createMenuForm तक पहुंचने का प्रयास करते हैं जहां const createMenuForm घोषित किया गया था।

इसे ईवेंट श्रोता के ऊपर घोषित करने का प्रयास करें:

// create menu
const createMenuForm = document.querySelector('#mydropzone');
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
// ...

या सीधे साथ

document.querySelector('#mydropzone').reset();
0
kmgt 8 अक्टूबर 2019, 12:32

क्या आप इन चीजों को भी आजमा सकते हैं

document.getElementById("myForm").reset();
$("#myForm").trigger("reset");
0
Justin J 8 अक्टूबर 2019, 12:01