Change input text value in before submitting form

Question

I'm trying to change the value of my input text field before submitting the form using jQuery like this:

<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>

when i alert the value of the input file, it's showing the new value, but when the form submitten, the paramether in url still showing the old value of the input, for example:

 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";

Is this your exact code? because your form doesn't have this ID '#form-customer-attr-new'. — Ofir Baruch, Nov 15 '17 at 13:15
Consult this link https://stackoverflow.com/questions/6912197/change-value-of-input-then-submit-form-in-javascript — josedacruz, Nov 15 '17 at 13:18

score 10 · Accepted Answer · answered Nov 15 '17 at 16:41

<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
    });

Ruud van de Ven · Answer 2 · 2017-11-15T13:45:07.373

Couple of things:

id of form was not set, add id="form-customer-attr-new" to form tag
isNan should be isNaN
!empty should be !!

Now it should work. full working example:

<!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>

first it alerts the value, then it alerts the Invalid Postcode, and after that it didnt submit the form at all — Shell Suite, Nov 15 '17 at 13:36
oops, e.preventDefault(); should be Out. zipcode used: 5555 AA — Ruud van de Ven, Nov 15 '17 at 13:43

score 1 · Answer 3 · answered Nov 15 '17 at 14:02

Here is a slightly different approach, but I believe that it should work. (1) Create a named function for your logic (I corrected/changed some syntax that was problematic)

<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) Change your form element to the following (note you had actions attribute instead of action and I added onsubmit="return prepSubmittal()")

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

Let me know how it goes.

score 0 · Answer 4 · answered Nov 15 '17 at 13:18

You submit the form before you change the value. You have to submit the form using jQuery, after you change the value.

Change the submit button to link to jquery function, change all you have to change and then submit form using:

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

score 0 · Answer 5 · answered Nov 15 '17 at 13:19

0

To accomplish that you need to:

Prevent form submission
Change input value
submit form with jquery $('#form').submit()

Prevent form submission with e.preventDefault() right inside your callback handler

answered Nov 15 '17 at 13:19

Mario Nikolaus

2,346
1
21
28

score 0 · Answer 6 · answered Nov 15 '17 at 13:27

Use your custom submit via ajax. i.e.,

<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>

score 0 · Answer 7 · answered Nov 15 '17 at 13:28

Submit API for jQuery

The handler will execute as a response to the $('#form-customer-attr-new').submit() (it's a callback function practically), so you will need to move the code from that function to before you do the actual submit.

So move the code right before the jQuery submit() call.

Also, i see that your id is not added to the HTML, please do that as the call will not work otherwise.

score 0 · Answer 8 · answered Nov 15 '17 at 13:32

Step 1: call a java script function while form submitted

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

Step 2: inside test function set value in your text field.

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

score 0 · Answer 9 · answered Nov 15 '17 at 13:32

<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>

Change input text value in before submitting form

9 Answers9