I am dynamically creating input elements using jquery, but when I try to access the dynamically created element values, I'm getting either empty or undefined or . I tried many ways to get the values, but It is failing.  Could someone help me getting this done.  Here is the code     $(document).ready(function() {   var count = 0;   var jsondata = [];   var selectedField;   $('.add').click(function() {     count = count + 1;     jQuery('&lt;div/&gt;', {       id: 'form-wrapper' + count,       class: 'form-wrapper' + count,       title: 'now this div has a title!'     }).appendTo('.wrapper0');     $('.form-wrapper' + count).append("&lt;label&gt;FieldName&lt;/label&gt; &lt;input type='text' placeholder='label' id='label" + count + "'&gt;&lt;/input&gt; &lt;select class='select" + count + "'&gt;&lt;option&gt;Select&lt;/option&gt;&lt;option value='textbox'&gt;Textbox&lt;/option&gt;&lt;option value='textarea'&gt;TextArea&lt;/option&gt;&lt;option value='checkbox'&gt;Checkbox&lt;/option&gt;&lt;option value='radio'&gt;Radio&lt;/option&gt;&lt;option value='date'&gt;Date&lt;/option&gt; &lt;/select&gt;&lt;input type='text' id='commavalues" + count + "' disabled placeholder='Enter comma(,) seperated values'&gt;&lt;/input&gt;&lt;input type='checkbox' id='required" + count + "'&gt;Required&lt;/input&gt;&lt;button class='delete'&gt;Delete&lt;/button&gt; &lt;br&gt;&lt;br&gt;");      $('.delete').click(function(e) {       ($(this).parent().remove());     });      $('.select' + count).change(function() {       selectedField = $(this).children('option:selected').val();       if (selectedField == 'checkbox' || selectedField == 'radio') {         $('#commavalues' + count).prop('disabled', false);         flag = 1;       } else {         flag = 0;         $('#commavalues' + count).prop('disabled', true);       }     });     item = {};      var label = $('#label' + count).val();     var required = $('#required' + count).is(":checked");     var label_type = selectedField;     var options = $('#commavalues' + count).val();      console.log(label);     console.log(required);     console.log(label_type);     console.log(options);      item["label"] = label;     item["label_type"] = label_type;     item["options"] = options;     item["required"] = required;     jsondata.push(item);   });    $('.save').click(function() {     console.log(jsondata);   }); }); body {   background-color: #ECEFF1;   margin: 50px 0;   padding: 0;   text-align: center; }  button {   position: relative;   margin-left: 0px; } &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div class="wrapper0"&gt;   &lt;div class="form-wrapper"&gt;     &lt;label&gt;FieldName&lt;/label&gt;     &lt;input type="text" placeholder="label" class="label0"&gt;&lt;/input&gt;     &lt;select class="select0"&gt;       &lt;option&gt;Select&lt;/option&gt;       &lt;option value="textbox"&gt;Textbox&lt;/option&gt;       &lt;option value="textarea"&gt;TextArea&lt;/option&gt;       &lt;option value="checkbox"&gt;Checkbox&lt;/option&gt;       &lt;option value="radio"&gt;Radio&lt;/option&gt;       &lt;option value="date"&gt;Date&lt;/option&gt;     &lt;/select&gt;     &lt;input type="text" class="commavalues0" disabled placeholder="Enter comma(,) seperated values"&gt;&lt;/input&gt;     &lt;input type="checkbox" class="required0"&gt;Required&lt;/input&gt;     &lt;br&gt;&lt;br&gt;   &lt;/div&gt; &lt;/div&gt; &lt;button class="add"&gt;Add&lt;/button&gt; &lt;button class="save"&gt;Save&lt;/button&gt;     I am trying to display in JSON format when I click save button, and If i click the delete button the data associated to that input fields are to be deleted also.
112
I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off.  This happens on page ready and works just fine.  The problem I have is that any select boxes I add via Ajax or DOM after the initial loop won't have the event bound.  I have found this plugin (), but before I add another 5k to my pages with a plugin, I want to see if anyone knows a way to do this, either with jQuery directly or by another option.
104045
I have a request that returns a JSON object with a single property which is an array.  How can I test if the array is empty?  With jQuery code like:   $.getJSON(             jsonUrl,             function(data) {                 if (data.RoleOwners == [ ]) {                     $('&lt;tr&gt;&lt;td&gt;' + noRoleOwnersText + '&lt;/td&gt;&lt;/tr&gt;').appendTo("#roleOwnersTable tbody");                     return;                 }                 $.each(data.RoleOwners, function(i, roleOwner) {                     var tblRow =                     "&lt;tr&gt;"                     + "&lt;td&gt;" + roleOwner.FirstName + "&lt;/td&gt;"                     + "&lt;td&gt;" + roleOwner.LastName + "&lt;/td&gt;"                     + "&lt;/tr&gt;"                     $(tblRow).appendTo("#roleOwnersTable tbody");                 });   what can I put instead of if(data.RoleOwners == [ ]) to test if the RoleOwners is an empty array?  Thanks, Matt
8401
I have a drop-down list with known values. What I'm trying to do is set the drop down list to a particular value that I know exists using jQuery.  Using regular JavaScript, I would do something like:  ddl = document.getElementById("ID of element goes here"); ddl.value = 2; // 2 being the value I want to set it too.   However, I need to do this with jQuery, because I'm using a CSS class for my selector (stupid  client ids...).  Here are a few things I've tried:  $("._statusDDL").val(2); // Doesn't find 2 as a value. $("._statusDDL").children("option").val(2) // Also failed.      How can I do it with jQuery?     Update  So as it turns out, I had it right the first time with:  $("._statusDDL").val(2);   When I put an alert just above it works fine, but when I remove the alert and let it run at full speed, I get the error     Could not set the selected property. Invalid Index   I'm not sure if it's a bug with jQuery or Internet Explorer 6 (I'm guessing Internet Explorer 6), but it's terribly annoying.
27417
Using jQuery, how do you check if there is an option selected in a select menu, and if not, assign one of the options as selected.  (The select is generated with a maze of PHP functions in an app I just inherited, so this is a quick fix while I get my head around those :)
74715
I have several input and option elements on my page, each (well almost) have an event attached to update some text on the page once they change. I use jQuery which is really really cool :)   I also use Microsofts  framework, utilizing the UpdatePanel. The reason why I do that is that certain elements are created on the page based on some server-side logic. I don't really want to explain why I use the UpdatePanel - even if it could (it can with quite some effort) be rewritten to use only  I still want that UpdatePanel.  You probably guessed it - once I have a postback on the UpdatePanel the jQuery events stops working. I actually was expecting this, since the "postback" is not really a new postback so my code in document.ready that binds the events won't be fired again. I also confirmed my suspicion by reading up on it in the jQuery help libraries.  Anyway I'm left with the problem of rebinding my controls after the UpdatePanel is done updating the . I preferably need a solution that does not require adding more .js files (jQuery plug-ins) to the page but something as simple as being able to catch the UpdatePanel's 'afterupdating' where I can just call my method to rebind all the form elements.
119645
Component  &lt;aura:component implements="force:lightningQuickAction"&gt;     &lt;ui:inputNumber aura:id="num1"/&gt; +     &lt;ui:inputNumber aura:id="num2"/&gt;     &lt;br/&gt;     &lt;ui:button label="Add" press="{!c.showToast}"/&gt; &lt;/aura:component&gt;   Controller    ({         showToast : function(component, event, helper) {         var n1 = component.find("num1").get("v.value");         var n2 = component.find("num2").get("v.value");          // Display the total in a "toast" status message          var resultsToast = $A.get("e.force:showToast");         resultsToast.setParams({             "title": "Quick Add: " + n1 + " + " + n2,             "message": "The total is: " + (n1 + n2) + "."         });         resultsToast.fire();          // Close the action panel          var dismissActionPanel = $A.get("e.force:closeQuickAction");         dismissActionPanel.fire();         }     })   ERROR MESSAGE     This page has an error. You might just need to refresh it. Action   failed: c$TestCheck1$controller$showToast [Cannot read property   'setParams' of undefined] Failing descriptor:   {c$TestCheck1$controller$showToast}
77477
I am trying to dynamically create a data table with two arrays (SObject array and a String array which has field API name).  The two arrays are Contact[] and String[], where String[] consists of ["Id", "Name"].  What I've tried dot notation and square bracket notation but neither worked.  &lt;!-- row --&gt; &lt;aura:iteration item="{!v.contacts} var="contact"&gt;     &lt;!-- column --&gt;     &lt;aura:iteration item="{!v.fieldNames} var="fieldName"&gt;         {!contact.fieldName}          {!contact[fieldName]}     &lt;/aura:iteration&gt; &lt;/aura:iteration&gt;   Not quite sure what is the correct approach to do this.
52808
I have a form with some checkboxes and inputboxes selectboxes and it shows what the user wants via an ajax call. The problem is that when the user click on the item and the detail page is shown and then decide to go back to the previous page he needs to click and select his previous choice again.  I would like to make WP to store all the options in the session when the button to the detail page is clicked and save actual info in the session and then when he visits the page again the  values will be chcecked in sessions and set if any are found.  Could that be done in WP?  If yes, how?  Let's oversimplify that and say that we have something like this in our form:  &lt;input class="car_color" type="checkbox" name="car_color" value="1" /&gt; &lt;input class="car_color" type="checkbox" name="car_color" value="2" /&gt; &lt;input class="car_color" type="checkbox" name="car_color" value="8" /&gt; &lt;input class="car_color" type="checkbox" name="car_color" value="4" /&gt; &lt;input class="car_color" type="checkbox" name="car_color" value="6" /&gt;   I don't use submit button in my form, it's handled via AJAX on input change.  And in my results get via ajax I have a link to the detail page:  &lt;a class="detail-info-link" href="&lt;?php echo $url ?&gt;"&gt;   Any idea how can I store my values in Session and call them when revisiting/reloading/back button in the browser?  I need to be able to read the session stored stuff and use it via ?Javascript? and trigger my search fuction via ajax which is already working well.  I just need to store (probably before going to $link in href of by detail button and read and send session variables (if they exist).
92276
I have a form that is dynamically generated, and has dynamically generated id's (and potentially classes). The forms are the same but they have the related id tacked on to the end.  How can I select each set of inputs and apply code to each one?  I was experimenting with $('input[id^=@id_airline_for_]') but could not get it to fly. I suspect I am missing some fundamental jQuery knowledge that is holding me back since I am sure this is a common problem with dynamic forms.   &lt;form method='POST'&gt;     &lt;label for="id_airline_for_8"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="airline_for_8"/&gt;     &lt;label for="id_flight_number_for_8"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="flight_number_for_8"/&gt;      &lt;label for="id_airline_for_17"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="airline_for_17"/&gt;     &lt;label for="id_flight_number_for_17"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="flight_number_for_17"/&gt;      -- snip --  &lt;/form&gt;   EDIT: I should update that i want to be able to perform some action when the input is clicked but only for classes with a matching id at the end.  To make it easy, lets say I want all inputs with a matching id at the end of the #id to disappear when one is clicked (just for arguments sake).
43780
I want to pass the java-script value to controller.I am using repeat on VF page.  VF page      &lt;apex:repeat value="{!listAdj}" var="Adj" id="hrs"&gt;       &lt;td&gt;&lt;div class="requiredInput"&gt;&lt;div class="requiredBlock"&gt;&lt;/div&gt;     &lt;apex:inputField id="decimal" value="{!Adj.Hours_Decimal__c}" onchange="setHidden5(this);" &gt;       &lt;/apex:inputField&gt;     &lt;/div&gt;&lt;/td&gt;             &lt;apex:inputField id="hours" value="{!Adj.Hours__c}" /&gt; &lt;apex:inputField id="decimal" value="{!Adj.Hours_Decimal__c}" onchange="setHidden5(this);"/&gt;              &lt;/apex:repeat&gt;   Javascript code  function setHidden5(element){     //split the id of the inputField by ':' and then use the 5th index in the array to exact position of the inputField in the apex:repeat.   var idArray = element.id.split(':');     var hiddenRep1 =document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":decimal");          var hiddenRep2 = document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":hours");       if(element.value.length &gt;=1){        document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":hours").disabled = true; **hiddenRep2.value=hidden1.value;**                }                             }     }   I want to pass the hiddenRep2.value to controller.How to pass that. Hidden2.value is same as hidden1.value + some addition subtraction.i dont know how to pass that value. Can someone me sort out this.  Thanks
70640
I have two pages of jQuery, Page1 and Page2, and I'm able to get input in Page1.  The somval=1000$.  The page 1 user enters the somevalue. I have stored the value:  var val = somval;   Now in the second page, I need to get the result of somvalue in page 1. Of course two pages using My1.js My2.js respectively.  How do I share the values from one jQuery file to other JavaScript or how do I get the value from page1 value, to page2?  How do I tackle this?
4059
The situation is somewhat like-  var someVar = some_other_function(); someObj.addEventListener("click", function(){     some_function(someVar); }, false);   The problem is that the value of someVar is not visible inside the listener function of the addEventListener, where it is probably being treated as a new variable.
92994
I have an HTML form - with PHP, I am sending the data of the form into a MySQL database. Some of the answers to the questions on the form have checkboxes. Obviously, the user does not have to tick all checkboxes for one question. I also want to make the other questions (including radio groups) optional.  However, if I submit the form with empty boxes, radio-groups etc, I received a long list of 'Undefined index' error messages for each of them.  How can I get around this? Thanks.
61491
What is the best method for adding options to a &lt;select&gt; from a JavaScript object using jQuery?  I'm looking for something that I don't need a plugin to do, but I would also be interested in the plugins that are out there.  This is what I did:  selectValues = { "1": "test 1", "2": "test 2" };  for (key in selectValues) {   if (typeof (selectValues[key] == 'string') {     $('#mySelect').append('&lt;option value="' + key + '"&gt;' + selectValues[key] + '&lt;/option&gt;');   } }   A clean/simple solution:  This is a cleaned up and simplified :  $.each(selectValues, function(key, value) {      $('#mySelect')           .append($('&lt;option&gt;', { value : key })           .text(value)); });   Changes from matdumsa's: (1) removed the close tag for the option inside append() and (2) moved the properties/attributes into an map as the second parameter of append().
104708
I'm working on a web page where I'm making an AJAX call that returns a chunk of HTML like:   &lt;div&gt;   &lt;!-- some html --&gt;   &lt;script type="text/javascript"&gt;     /** some javascript */   &lt;/script&gt; &lt;/div&gt;   I'm inserting the whole thing into the DOM, but the JavaScript isn't being run.  Is there a way to run it?    Some details: I can't control what's in the script block (so I can't change it to a function that could be called), I just need the whole block to be executed.  I can't call eval on the response because the JavaScript is within a larger block of HTML.  I could do some kind of regex to separate out the JavaScript and then call eval on it, but that's pretty yucky.  Anyone know a better way?
30976
It looks like if I load dynamic content using $.get(), the result is cached in browser.  Adding some random string in QueryString seems to solve this issue (I use new Date().toString()), but this feels like a hack.   Is there any other way to achieve this? Or, if unique string is the only way to achieve this, any suggestions other than new Date()?
31438
Can anyone please help me to understand the below code. I am not able to understand how we are  extracting value from map on visualforce page.  Actually i am trying to get the size of value list which is associated with respective key in map.              &lt;apex:outputPanel &gt;                 &lt;apex:repeat value="{!attributeWrapper.mapAllAttributesLabel}" var="M"&gt;                     &lt;div&gt;                         &lt;div&gt;{!attributeWrapper.mapLabels[M].Name} &lt;/div&gt;                         &lt;div&gt;                             &lt;ul&gt;                                 &lt;apex:repeat value="{!attributeWrapper.mapAllAttributesLabel[M]}" var="attribute"&gt;                                     &lt;li&gt;                                     &lt;p&gt;                                         &lt;apex:outputLink onclick="selectAttribute('{!attribute.attributeLabel.Label__c}','{!attribute.attributeLabel.Attribute__c}');return false;"&gt;                                            &lt;apex:outputLabel value="{!attribute.attributeLabel.Attribute__r.Name}"/&gt;                                         &lt;/apex:outputLink&gt;                                     &lt;/p&gt;                                     &lt;/li&gt;                                 &lt;/apex:repeat&gt;                             &lt;/ul&gt;                         &lt;/div&gt;                     &lt;/div&gt;                 &lt;/apex:repeat&gt;             &lt;/apex:outputPanel&gt;    public with sharing class AttributeWrapper {      public Map&lt;String, List&lt;AttributesLabelWrapper&gt;&gt; mapAllAttributesLabel{       // some code to populate this map     } }   If i do:  {!attributeWrapper.mapAllAttributesLabel[M].size}   I get an error so how do i get the size of value list on VF page?