在帶有動態Ids的隱藏表單字段中插入值

Question

我有一個表單，我試圖通過點擊按鈕將值插入隱藏字段。

我使用的ID都是獨一無二的。但是，數據似乎沒有在POST請求中提交。

我使用獨特的ID，因爲有多種形式。

我在做什麼和我該如何解決它？

function buttonClick(theButton){ 
 
     document.getElementById('clicked_button4562').value = theButton.value; 
 
     alert(theButton.value) 
 
     return true; 
 
    }

<input type="hidden" name="button_action" id="clicked_button4562" value=""/> 
 

 
<button class="button is-primary is-outlined next" name="button_action" type="submit" value="tweet" onclick="return buttonClick(this)"> 
 
    <span class="icon"> 
 
    <i class="fa fa-twitter"></i> 
 
    </span> 
 
    <span>Tweet</span> 
 
</button> 
 
<button class="button is-info is-outlined next" name="button_action" type="submit" onclick="return buttonClick(this)" data-button_action="save" value="save"> 
 
    <span class="icon"> 
 
    <i class="fa fa-save"></i> 
 
    </span> 
 
    <span>Save</span> 
 
</button>

更新：作爲請求POST請求 添加代碼：

<script> 
     document.addEventListener("DOMContentLoaded", function() { 
      for (var i = 0, form; form = document.forms[i]; ++i) {//iterate throu forms 
       initForm(form); 
      } 
     }); 
     function initForm(frm) { 
      //find elements of interest inside the form 
      var fileUpload = frm.file1;//get by 'name' attribute inside the form 
      var statusInfo = frm.querySelector('.status'); 
      var progressBar = frm.querySelector('.progress'); 
      var progressInfo = frm.querySelector('.loaded_n_total'); 

      //update. 'textarea' is in a separate form which doesn't contain 'file1' 
      if (fileUpload) 
       fileUpload.addEventListener('change', uploadFile); 

      function uploadFile(e) {//'e' is 'change' event. It isn't used and may be ommited 
       var file = this.files[0];// 'this' is fileUpload element 
       //alert(file.name + " | " + file.size + " | " + file.type); 
       console.log(file); 
       var formdata = new FormData(); 
       formdata.append("file1", file, file.name); 

       //update. A form with fileUpload contains other elements 
       for (var i = 0, el; el = this.form.elements[i]; ++i) { 
        if (el !== this) 
         formdata.append(el.name, el.value); 
       } 

       statusInfo.innerHTML = 'prepare upload'; 
       var ajax = new XMLHttpRequest(); 
       var uploadValue = this.getAttribute("data-uploadValue"); 
       ajax.upload.addEventListener("progress", progressHandler, false); 
       ajax.addEventListener("load", completeHandler, false); 
       ajax.addEventListener("error", errorHandler, false); 
       ajax.addEventListener("abort", abortHandler, false); 
       ajax.open("POST", "/upload/" + uploadValue); // 
       ajax.send(formdata); 
      } 
      function progressHandler(event) { 
       progressInfo.innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total; 
       var percent = (event.loaded/event.total) * 100; 
       progressBar.value = Math.round(percent); 
       statusInfo.innerHTML = Math.round(percent) + "% uploaded... please wait"; 
      } 

      function completeHandler(event) { 
       statusInfo.innerHTML = event.target.responseText; 
       progressBar.value = 0; //wil clear progress bar after successful upload 
      } 

      function errorHandler(event) { 
       statusInfo.innerHTML = "Upload Failed"; 
      } 

      function abortHandler(event) { 
       statusInfo.innerHTML = "Upload Aborted"; 
      } 
     }//initForm 

    </script> 

Answer 1

好吧，如果你刪除{和}人物，你的代碼就可以了（奇怪的是，它即使存在]或[也仍然有效）。 請參閱this MDN頁面。

使用ASCII字母，數字，'_'，' - '和'。'之外的字符。可能會導致兼容性問題，因爲它們在HTML 4中是不允許的。雖然HTML 5解除了此限制，但ID應以字母開頭以便兼容。

我不知道你在做什麼，但我會遠離異常的ID。

Answer 2

var hiddenInput = document.getElementById("hiddenInput"); 
 

 
function proccessButtonClick(evt) { 
 

 
\t var btn = evt.target; 
 
\t hiddenInput.value = btn.value; 
 
    
 
    for (v in btn.dataset) { 
 
    \t hiddenInput.value += "|" + btn.dataset[v]; 
 
    } 
 
    
 
} 
 

 
function showHiddenInputValue(evt) { 
 
\t alert(hiddenInput.value); 
 
}

<input type="hidden" id="hiddenInput"/> 
 
<button value="tweet" data-v1="tweet1" data-v2="tweet2" onclick="proccessButtonClick(event)">Tweet</button> 
 
<button value="foo" data-v1="foo1" data-v2="foo2" onclick="proccessButtonClick(event)">Foo</button> 
 
<button value="bar" data-v1="bar1" data-v2="bar2" onclick="proccessButtonClick(event)">Bar</button> 
 
<button onclick="showHiddenInputValue(event)">Show hidden input value!</button>

Answer 3

function buttonClick(theButton){ 
 
     document.getElementById('clicked_button4562').value = theButton.value; 
 
     alert(theButton.value) 
 
     return false; 
 
    }

形式的按鈕提交按鈕，當你點擊它，它改變了輸入的價值，但同時也提交表單，從而將形式設置爲它的原始狀態。您需要通過從點擊處理程序返回false來防止默認設置。