Place values to hidden field using JQuery/Javascript

Question

I'm trying to place a data to a hidden field using JQuery, I want to place a text to the field "fieldName" with custom values, but I don't know how to pass the text to the field using jQuery.

The code that I used is:

$('span.open-apply-modal').click(function(){
    $('#apply-modal, #modal-backdrop').fadeIn(150);

});

The field is inside the div apply-modal.

I want to place the value "Accountant" to the hidden field after the FadeIn(150) is called. How do I do that?

Answer 1

Try:

$('span.open-apply-modal').click(function(){
    $('#apply-modal, #modal-backdrop').fadeIn(150);
    $("#hidden_field_id").val('Accountant');
});

To put the value after the fade is executed try this:

$('#apply-modal, #modal-backdrop').fadeIn(150, function(){
    $("#hidden_field_id").val('Accountant');
});

Answer 2

assume that your hidden field like

<input type="hidden" name="account_field" id="account_field">

now in js

$('span.open-apply-modal').click(function(){
    $('#apply-modal, #modal-backdrop').fadeIn(150);
    $("#account_field").val("Accountant");
});

please let me know if you face any problem.

Answer 3

Use .val() for adding text

$('#fieldName').val('Accountant');

Assuming "fieldName" is an id.

Your code will be

$('span.open-apply-modal').click(function(){
    $('#apply-modal, #modal-backdrop').fadeIn(150);
    $('#fieldName').val('Accountant');


});

Answer 4

You can use jquery function val(). documentation for val function. Try this:

$('span.open-apply-modal').click(function(){
    $('#apply-modal, #modal-backdrop').fadeIn(150, function() {
        $('#fieldName').val('Accountant');
    });
});

Answer 5

To do so AFTER the fadeIn is complete, use the callback

$('span.open-apply-modal').on("click",function(){
  $('#apply-modal, #modal-backdrop').fadeIn(150,function() {
    $("#account_field").val("Accountant");
  });
});

Answer 6

You can use the above suggested method of using the callback function for the fadeIn or you can use setTimeout function:-

$('span.open-apply-modal').on("click",function(){
 $('#apply-modal, #modal-backdrop').fadeIn(150);
   setTimeout(function(){
     $("#account_field").val("Accountant");
   }, 150);
});