web-dev-qa-db-ja.com

フォームを送信する前に、入力テキストの値を変更してください

次のように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";
javascriptphpjqueryformstextinput
7
Shell Suite
<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
    });
3
Mehmet Emre Vural

これは少し異なるアプローチですが、うまくいくはずだと思います。 （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要素を次のように変更します（actionの代わりにactions属性があり、onsubmit = " prepSubmittal（） "）を返します

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

どうなるか教えてください。

1
user8217724

いくつかのこと：

  • フォームのIDが設定されていません。フォームタグにid = "form-customer-attr-new"を追加してください
  • isNanはisNaNである必要があります
  • ！空にする必要があります!!

これで動作するはずです。完全な実例：

<!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>
1
Ruud van de Ven

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>
0
M Shoaib Qureshi

jQueryのAPIを送信

ハンドラーは$('#form-customer-attr-new').submit()への応答として実行されるため（実際にはコールバック関数です）、実際の送信を行う前に、コードをその関数からに移動する必要があります。

したがって、jQuery submit()呼び出しの直前にコードを移動します。

また、idがHTMLに追加されていないようです。それ以外の場合は呼び出しが機能しないため、追加してください。

0
Uifalean Sergiu Mihai

値を変更する前にフォームを送信します。値を変更した後、jQueryを使用してフォームを送信する必要があります。

送信ボタンを変更してjquery関数にリンクし、変更する必要があるすべてを変更してから、次を使用してフォームを送信します。

$("#formId").submit();
0
Tomasz Tracz

それを達成するには、次のことを行う必要があります。

  1. フォームの送信を防ぐ
  2. 入力値を変更する
  3. jqueryでフォームを送信する$('#form').submit()

コールバックハンドラー内でe.preventDefault（）を使用してフォームの送信を防止します

0
Mario Nikolaus

ステップ1：フォームの送信中にJavaスクリプト関数を呼び出す

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

ステップ2：テキストフィールドのテスト関数セット値の内部。

<script>
function test()
{
   document.getElementById("myTextFieldId").value = "12345";
   return true;
}
</script>
0
Jitender Raghav
<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>
0
Subhankar Mitra