在提交表单之前更改输入文本值答案

【问题标题】：Change input text value in before submitting form在提交表单之前更改输入文本值
【发布时间】：2018-04-28 17:32:33
【问题描述】：

我正在尝试在使用 jQuery 提交表单之前更改输入文本字段的值，如下所示：

<form actions="http://test.com/" method="GET">
 <input name="test" id="autocompleteform" type="text"/>
</form>
<script>
$('#form-customer-attr-new').submit(function(e) {
    var value = $("#autocompleteform").val();
    value = value.substr(0, value.indexOf(' '));
    if (!isNan(value) && !empty(value)) {
        $("#autocompleteform").val(value);
        alert($("#autocompleteform").val());
        return true;
    } else {
        alert("Invalid Postcode");
        return false;
    }
});
</script>

当我提醒输入文件的值时，它显示的是新值，但是当表单提交时，url中的参数仍然显示输入的旧值，例如：

 old_input_value = "1234 justice spoiler message";
 new_input_value = "1234";
 the_url_after_form_submit_now = "http://test.com?test=1234+justice+spoiler+message";
 the_url_after_form_submit_should_be ="http://test.com?test=1234";

【问题讨论】：

扰流板的标志？
这是您的确切代码吗？因为您的表单没有此 ID '#form-customer-attr-new'。
@OfirBaruch 我刚刚编辑了我的问题
@BadMiscuit 删除了剧透 :)
咨询此链接stackoverflow.com/questions/6912197/…

标签： javascript php jquery forms textinput

【解决方案1】：

<form action="" id="form_id">
    <input type="text" name="change_value" id="change_value">
    <input type="text" name="d" id="d">
    <input type="submit" name="">

</form>    

$("#form_id").on("submit", function (e) {
        e.preventDefault();//stop submit event
        var self = $(this);//this form
        $("#change_value").val("deneme");//change input
        $("#form_id").off("submit");//need form submit event off.
        self.submit();//submit form
    });

【讨论】：

【解决方案2】：

几件事：

表单id没有设置，添加id="form-customer-attr-new"到表单标签
isNan 应该是 isNaN
!empty 应该是 !!

现在应该可以了。完整的工作示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
</head>
<body>
<form actions="http://test.com/" method="GET" id="form-customer-attr-new">
<input name="test" id="autocompleteform" type="text"/>
<input type="submit" />
</form>

<script>
    $('#form-customer-attr-new').submit(function(e) {
    var value = $("#autocompleteform").val();
    value = value.substr(0, value.indexOf(' '));


    if (!isNaN(value) && !!(value)) {
        $("#autocompleteform").val(value);
        alert($("#autocompleteform").val());
        return true;
    } else {
        alert("Invalid Postcode");
        return false;
    }
});

</script>
</body>

【讨论】：

首先它会提醒值，然后它会提醒 Invalid Postcode，然后它根本没有提交表单
哎呀，e.preventDefault();应该出。使用的邮政编码：5555 AA

【解决方案3】：

这是一种略有不同的方法，但我相信它应该有效。 (1) 为您的逻辑创建一个命名函数（我更正/更改了一些有问题的语法）

<script type="text/javascript" language="javascript">
function prepSubmittal()
{
    var result = false;
    var value = null;

    try
    {
        value = $("#autocompleteform").val();

        if(value.indexOf(" ")>-1) value = value.substring(0, value.indexOf(" "));

        if (!isNaN(value) && value.trim().length>0) 
        {
        $("#autocompleteform").val(value);
        result = true;
        } 
            else 
            {
        alert("Invalid Postcode");
        result = false;
        }
    }
    catch(e)
    {
        result = false;
        alert("prepSubmittal Error:  " + e.Message);
    }
    finally
    {

    }

    return result;
}


</script>

(2) 将您的 form 元素更改为以下内容（注意您有 actions 属性而不是 action 并且我添加了 onsubmit ="return prepSubmittal()")

<form action="http://test.com" method="GET" onsubmit="return prepSubmittal()">

告诉我进展如何。

【讨论】：

【解决方案4】：

在更改值之前提交表单。更改值后，您必须使用 jQuery 提交表单。

将提交按钮更改为链接到 jquery 函数，更改所有您需要更改的内容，然后使用以下方法提交表单：

$("#formId").submit();

【讨论】：

【解决方案5】：

要做到这一点，您需要：

阻止表单提交
更改输入值
用jquery$('#form').submit()提交表单

在回调处理程序中使用 e.preventDefault() 防止表单提交

【讨论】：

【解决方案6】：

通过 ajax 使用您的自定义提交。即，

<form id="form-customer-attr-new" actions="http://test.com/" method="GET">
 <input name="test" id="autocompleteform" type="text"/>
</form>
<script>
    $('#form-customer-attr-new').submit(function(e) {
        var value = $("#autocompleteform").val();
        value = value.substr(0, value.indexOf(' '));
        var urlPost = 'http://test.com/'
        if (!isNan(value) && !empty(value)) {
            $("#autocompleteform").val(value);
            alert($("#autocompleteform").val());
            $.ajax({
                   type: "GET",
                   url: urlPost+'?test='+value  ,
                   data: '',
                   dataType: "text",
                   success: function(resultData){
                            alert("Save Complete");
                   }
        } else {
            alert("Invalid Postcode");
            //return false;
        }
    });
</script>

【讨论】：

【解决方案7】：

Submit API for jQuery

处理程序将作为对$('#form-customer-attr-new').submit() 的响应执行（实际上它是一个回调函数），因此您需要在实际提交之前将代码从该函数移动到。

所以在 jQuery submit() 调用之前移动代码。

另外，我看到您的id 没有添加到 HTML 中，请这样做，否则调用将无法正常工作。

【讨论】：

【解决方案8】：

第一步：提交表单时调用java脚本函数

<form onsubmit="return test();">

第 2 步：在您的文本字段中设置测试函数内部值。

<script>
function test()
{
   document.getElementById("myTextFieldId").value = "12345";
   return true;
}
</script>

【讨论】：

【解决方案9】：

<form id="form-customer-attr-new" action="" method="get">
 <input name="test" id="autocompleteform" type="text" value=""/>
</form>

<script>
$('#form-customer-attr-new').submit(function(e) {
    var value = $("#autocompleteform").val();
    value = value.substr(0, value.indexOf(' '));

    if (!isNaN(value) && value!='') {
        $("#autocompleteform").val(value);
        alert($("#autocompleteform").val());
        return true;
    } else {
        alert("Invalid Postcode");
        return false;
    }
});
</script>

【讨论】：