提交前使用 jquery 更改隐藏字段值

Question

I am working on a form where there is a hidden input field for button clicked, originally, the value is this field is an empty string. I want to be able to pass in a value to the hidden field as soon as a button is clicked(so I can know the button that was clicked) before the ajax call starts. Right now, this is what I've tried but the userType field still comes back empty after the ajax call is completed. Here's my HTML code.

<form role="form"
  id="UserReg"
  name="UserReg"
  >
  
  
<input type="hidden"
       name="user_type_id"
       id="input_userType"
       value="">
       
    <button id="user1" name="user1"> User 1 </button>
    
    <button id="user2" name="user2"> User 2 </button>
               
       

Here's my jQuery code

$("#user1").on('click', function (e)
{   

    //I'm trying to assign 3 to the value of the hidden field before the AJAX call

    $("#input_userType").val("3")

    
    e.preventDefault();

    let Form         =  $('#UserReg');
    



        $.ajax({

            url         :   window.location.protocol + "//" + window.location.host + '/secure/register',
            type        :   'POST',
            contentType :   "application/x-www-form-urlencoded; charset=utf-8",
            cache       :   false,
            processData :   true,
            data        :   Form.serialize()
            success     :   function (returnedData)
            {
                consoleLog('returnedData');
                             
                if(jsonData.status === false)
                {
                    // Display Error Message

                }
                else
                {
                   //Do something
                }
            },
            error       :   function (returnedData)
            {
                  //Do something
            }
        });
    }
});

After the AJAX call, the value of the hidden field still returns an empty string.

Answer 1

When modifying the value, you should use the val method.

memberTypeId.val("3");

Answer 2

$("#input_userType").val("3");

or

let memberTypeId = $("#input_userType");
memberTypeId.val("3");

https://api.jquery.com/val/

Answer 3

$("#input_userType").val("3")

Answer 4

i dont know if this could be the cause of the error though,but this is what i Observed from the code you posted

$("#user1").on('click', function (e)

{   

//I'm trying to assign 3 to the value of the hidden field before the AJAX call

$("#input_userType").val("3")


e.preventDefault();

let Form  =  $('#UserReg');


    $.ajax({

        url         :   window.location.protocol + "//" + window.location.host + '/secure/register',
        type        :   'POST',
        contentType :   "application/x-www-form-urlencoded; charset=utf-8",
        cache       :   false,
        processData :   true,
        data        :   Form.serialize() // there should be a comma here also
        success     :   function (returnedData)
        {
            consoleLog('returnedData');
                         
            if(jsonData.status === false)
            {
                // Display Error Message

            }
            else
            {
               //Do something
            }
        },
        error       :   function (returnedData)
        {
              //Do something
        }
    });
// this "}" is an excess  one, as i cant locate the beginning. so it either you remove this 
}
});// or this one

So i would suggest you look through your code and adjust appropriately. then we can pick it up from there.