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字母，数字，＆＃39; _＆＃39;，＆＃39; - ＆＃39;以外的字符。和＆＃39;。＆＃39;可能会导致兼容性问题，因为HTML 4中不允许这样做。虽然HTML 5中已经解除了这个限制，但ID应该以兼容字母开头。

我不知道你要做什么，但我会远离异常ID。

Answer 2

var hiddenInput = document.getElementById( "hiddenInput" );

function proccessButtonClick( evt ) {

	var btn = evt.target;
	hiddenInput.value = btn.value;
    
    for ( v in btn.dataset ) {
    	hiddenInput.value += "|" + btn.dataset[v];
    }
    
}

function showHiddenInputValue( evt ) {
	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来防止默认。

使用动态ID在隐藏表单字段中插入值

3 个答案: