Javascript提交不包括提交按钮值

xghobddn  于 2023-01-04  发布在  Java
关注(0)|答案(9)|浏览(98)

好吧,这不是一个问题,只是为了我的信息(因为我可以想到大约4个不同的工作方法,将使它工作。但我有一个表单(没有什么太特殊),但提交按钮有一个特定的值与之相关联。

<input type='submit' name='submitDocUpdate' value='Save'/>

当表单被提交时,我检查这个名字。

if(isset($_POST['submitDocUpdate'])){ //do stuff

但是,有一次我试图通过Javascript而不是提交按钮提交表单。

document.getElementById("myForm").submit();

这是工作正常,除了一个问题。当我看$_POST值通过javascript方法提交,它不包括submitDocUpdate。我得到了表单的所有其他值,但没有提交按钮的值。
就像我说的,我可以想出一些方法来解决这个问题(使用隐藏变量,检查另一个表单变量的设置,等等),但我只是想知道这是否是submit()的正确行为,因为我觉得它不太直观。

kcwpcxri

kcwpcxri1#

是的,这是HTMLFormElement.submit()的正确行为
不发送提交按钮值的原因是因为HTML表单的设计使其发送单击(或激活)的提交按钮值。这允许每个表单有多个提交按钮,例如您希望同时执行“预览”和“保存”操作的情况。
由于您是以编程方式提交表单的,因此在单个提交按钮上没有显式的用户操作,因此不会发送任何内容。

enyaitl3

enyaitl32#

使用jQuery 1.0或更高版本:
第一个月
当我偶然发现这篇文章的时候,我实际上也在解决同样的问题。没有任何参数的click()会在你选择的任何元素上触发一个click事件:http://api.jquery.com/click/

hmtdttj4

hmtdttj43#

为什么不使用下面的代码呢?

<input type="hidden" name="submitDocUpdate" value="Save" />
px9o7tmv

px9o7tmv4#

理解这个行为是很好的,但是这里有一些代码解决了我在jquery和php中的问题,其他人可以适应,实际上这是从一个更复杂的系统中剥离出来的,当点击删除按钮时,它会显示一个引导模式确认。

    • TL; DR**有一个像按钮一样的输入。点击后将其更改为hidden input
    • 超文本标记语言**
<input
    id="delete" 
    name="delete" 
    type="button" 
    class="btn btn-danger"
    data-confirm="Are you sure you want to delete?"
    value="Delete"></input>
    • jquery**
$('#delete').click(function(ev) {
        button.attr('type', 'hidden');
        $('#form1').submit();
    return false;
});
    • php**
if(isset($_POST["delete"])){
    $result = $foo->Delete();    
}
zmeyuzjn

zmeyuzjn5#

submit按钮值在用户单击该按钮时提交。调用form.submit()不是单击该按钮。您可能有多个submit按钮,form.submit()函数无法知道您要将哪个按钮发送到服务器。

q35jwt9p

q35jwt9p6#

这里是另一个解决方案,与swal确认.我使用data-* 属性来控制表单应该发送后,按钮点击:

<button type="submit" id="someActionBtn" name="formAction" data-confirmed="false" value="formActionValue">Some label</button>

$("#someActionBtn").on('click', function(e){
    if($("#someActionBtn").data("confirmed") == false){
        e.preventDefault();
        swal({
            title: "Some title",
            html: "Wanna do this?",
            type: "info",
            showCancelButton: true            
        }).then(function (isConfirm) {
            if (isConfirm.value) {
                $("#someActionBtn").data("confirmed", true);
                $("#someActionBtn").click();            
            }
        });     
    }
});
tpxzln5u

tpxzln5u7#

我知道这个问题是老问题,但我想我有一些东西要补充...我经历了同样的问题,我想我找到了一个简单,轻和快速的解决方案,我想与大家分享

<form onsubmit='realSubmit(this);return false;'>
  <input name='newName'/>
  <button value='newFile'/>
  <button value='newDir'/>
</form>

<script>
  function getResponse(msg){
    alert(msg);
  }

  function realSubmit(myForm){
    var data = new FormData(myForm);
    data.append('fsCmd', document.activeElement.value);
    var xhr = new XMLHttpRequest();
    xhr.onload=function(){getResponse(this.responseText);};
    xhr.open('POST', 'create.php');
    // maybe send() detects urlencoded strings and setRequestHeader() could be omitted
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send(new URLSearchParams(data));
    // will send some post like "newName=myFile&fsCmd=newFile"
  }
</script>

总结...

  • onsubmit表单事件中的函数在实际表单提交之前被触发,因此如果您的函数提前提交了表单,那么接下来您必须返回false以避免表单在返回时再次提交
  • 在一个表单中,您可以有许多<input><button>类型= "submit",它们具有不同的名称/值对(甚至是相同的名称)......用于提交表单(即单击)的名称将包含在提交中
  • 由于通过 AJAX 提交的表单实际上是在函数之后发送的,而不是在直接单击提交按钮之后发送的,所以它们不包含在表单中,因为我认为如果您有许多按钮,表单不知道要包含哪些按钮,并且包含未按下的按钮没有意义...所以对于Ajax,您必须以另一种方式包含单击的提交按钮
  • 通过post方法,send()可以将一个主体作为urlencoded字符串、键/值数组、FormData或其他“BodyInit”示例对象,您可以使用new FormData(myForm)复制实际的表单数据
  • FormData对象是可操作的,我用它来包含用于发送表单的“submit”按钮(即最后一个焦点元素)
  • send()将FormData对象编码为“multipart/form-data”(分块),无法转换为urlencode格式......我发现的唯一方法是不用编写函数来迭代formdata并填充字符串,而是使用new URLSearchParams(myFormData)再次转换为URLSearchParams,它们也是“BodyInit”对象,但返回编码为“application/x-www-form-urlencoded”

参考文献:

wlsrxk51

wlsrxk518#

虽然公认的答案在技术上是正确的。有一种方法来携带你想要分配的值。事实上,当from被提交到服务器时,submit按钮的值与你给submit按钮的名称相关联。这就是Marcin技巧的工作原理,根据你使用的方法,你可以有多种方法来实现这一点。例如,在jQuery中,你可以传递

data: { 
    submitDocUpdate = "MyValue" 
}

在MVC中,我将用途:

@using (Html.BeginForm("ExternalLogin", "Account", new { submitDocUpdate = "MyValue" }))

这实际上是我如何遵守蒸汽要求使用自己的图像作为登录链接使用oAuth:

@using (Html.BeginForm("ExternalLogin", "Account", new { provider = "Steam" }, FormMethod.Post, new { id = "steamLogin" }))
{
     <a id="loginLink" class="steam-login-button" href="javascript:document.getElementById('steamLogin').submit()"><img alt="Sign in through Steam" src="https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_01.png"/></a>
}
vi4fp9gy

vi4fp9gy9#

这里有一个想法,在没有任何外部库的情况下,在所有浏览器中工作良好。

    • HTML代码**
<form id="form1" method="post" >
    ...........Form elements...............
    <input type='button' value='Save' onclick="manualSubmission('form1', 'name_of_button', 'value_of_button')" />
</form>
    • Java脚本**

将此代码放在body标记结束之前

<script type="text/javascript">
    function manualSubmission(f1, n1, v1){
    var form_f = document.getElementById(f1);
    var fld_n = document.createElement("input");
    fld_n.setAttribute("type", "hidden");
    fld_n.setAttribute("name", n1);
    fld_n.setAttribute("value", v1);
    form_f.appendChild(fld_n);
    form_f.submit();
}
</script>
    • PHP代码**
<?php if(isset($_POST['name_of_button'])){

       // Do what you want to do.
}
?>
    • 注意:**请勿将按钮命名为"submit",因为这可能导致浏览器不兼容。

相关问题