Populate hidden form inputs onClick

assign value to hidden field in javascript
hidden field value change event javascript
how to set value in hidden field using javascript in jsp
how to store multiple values in hidden field using javascript
input type=hidden
input type=hidden value
fill hidden field with javascript
input visibility:hidden

I have a list of addresses and other values that I've generated, and I have included a link next to each row (see image below):

I need to be able to click the "schedule this cleaning" link next to a row, and have it send that specific information to some hidden input fields further down the page, all without reloading the page. I'll need to populate multiple inputs with various data, using a single onClick event.

I'm already using jQuery, so any jQuery-specific solutions are also welcome.

Any help would be greatly appreciated. Thanks!

its straight forward even without JQuery:

<input ... onclick="return myFunction();"> 

function myFunction(){
  document.getElementById("myHiddenInput").value = "some value that i want to have";
 return true; //if you want to proceed with the submission or whatever your button does, otherwise return false
}

Changing value of hidden input onclick -- - JavaScript, To test it, I am trying to click each and then check the page source to find if the element was changed. Unfortunately, it's not populated at all. The <input type="hidden"> defines a hidden input field. A hidden field let web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores what database record that needs to be updated when the form is submitted.

From what I got from your question, you just query document.getElementById("target-input").value="desired value";, or are you looking for something else?

JavaScript Examples, Hide the submit button on your form until certain fields are filled in. Here's a basic example for populating an HTML field with field values: form: Specifies a form to which the input field belongs. autofocus: Specifies that the input field should be in focus immediately upon page load. accesskey: Defines a keyboard shortcut for the element. autocomplete: Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields. border

Assuming the following

ID for Schedule this cleaning = scheduleCleaning
ID for Regular Cleaning Address = regCleaning
ID for Vacancy Cleaning Address = vacCleaning
ID for Deep Cleaning Address = deepCleaning
ID for hidden will be same as above with _hid

You can use the following

$('#scheduleCleaning').click(function() {
    $('#regCleaning_hid').val($('#regCleaning').val());
    $('#vacCleaning_hid').val($('#vacCleaning').val());
    $('#deepCleaning_hid').val($('#deepCleaning').val());
}

Hidden HTML Field: Using Correctly In Your Code �, 2 Why Hide a Field? 3 Browser Support for hidden; 4 All values of type; 5 All attributes of input. Code Example. I am trying to populate a text box on a form by clicking on form buttons. Below is code I have so far - modified this code from a select box example - &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head

Suppose "Schedule this cleaning" is

<a class="cleaning" data-cleaning-type="regular">Schedule this cleaning</a>
<a class="cleaning" data-cleaning-type="vacancy">Schedule this cleaning</a>
...

and further down in the page you have

<input type="hidden" class="cleaning-schedule current" />

<input type="hidden" class="cleaning-schedule regular" />
<input type="hidden" class="cleaning-schedule vacancy" />
...

<input type="hidden" class="cleaning-schedule-other regular" />
<input type="hidden" class="cleaning-schedule-other vacancy" />
...

Then the following code will work

$("a.cleaning").click(function() {
    var $this = $(this);

    //the current cleaning type
    var cleaningType = $this.data("cleaningType");

    //set the cleaning schedule
    $("input.cleaning-schedule.current").val(cleaningType);

    //set other type specific information
    $("input.cleaning-schedule." + cleaningType)).val([whatever data you want]);
    $("input.cleaning-schedule-other." + cleaningType).val([whatever data you want]);
    return false; // edited
});

I would probably put the extra specific data in the data attributes in the link.


I edited this to reflect a broader set of cases. Also, refer to jQuery's data function.

HTML DOM Input Hidden value Property, The value attribute defines the default value of the hidden input field. Browser Support. Property. value, Yes, Yes, Yes, Yes, Yes� The form should be in the center of the window. The form is modal. In other words, no interaction with the rest of the page is possible until the user closes it. When the form is shown, the focus should be inside the <input> for the user. Keys Tab/Shift + Tab should shift the focus between form fields, don’t allow it to leave for other page

HTML DOM Input Hidden Object, Access an Input Hidden Object. You can access an <input> element with type=" hidden" by using getElementById():. Example. var x� After input text and click: Using jquery val() method: The val() method is used to return or set the value attribute of the selected elements.In default mode this method returns the value of the value attribute of the FIRST matched element & sets the value of the value attribute for ALL matched elements.

Using JavaScript to reset or clear a form, Using an HTML 'Reset' button is an easy way to reset all form fields to their < input type="button" value="Reset Form" onClick="this.form.reset()" /> <textarea > and <hidden> elements, it's value can be cleared by simply setting it to an empty� Login Form Signup Form Checkout Form Contact Form Social Login Form Register Form Form with Icons Newsletter Stacked Form Responsive Form Popup Form Inline Form Clear Input Field Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Fullscreen Search Input Field in Navbar Login Form in Navbar Custom Checkbox/Radio Custom

<input type="hidden">, input elements of type "hidden" let web developers include data that cannot be seen or modified by users when a form is submitted. Now, when you generate a form element, like a text input, the model's value matching the field's name will automatically be set as the field value. So, for example, for a text input named email , the user model's email attribute would be set as the value.

Comments
  • How can I use this to populate multiple hidden inputs, each with different data, using just the one click event?
  • I figured it out, and ended up using the following: function ElementContent(id,content) { document.getElementById(id).value = content; } For some reason, setValue() didn't work for me, so I just used value=
  • you are correct setValue is from a different API :) Also just an FYI the JS naming standards call for functionNames to be a camel case starting with a lowercase letter.