Populate hidden form inputs onClick

Question

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!

Answer 1

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
}

Answer 2

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

Answer 3

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

Answer 4

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 .