html hidden element not updated onclick ajax call

Question

In my web page I have main div mainarea. Inside this I have 2 hidden elements. ajaxarea content is loaded dynamically. Inside this I have the call me click event. This is triggered by below script. But the hidden element value is not updated.

In the below code, the event triggered successfully. But the value is not updated to #var1

$(document).on('click', '.icon-phone', function(e) {
  console.log('IC CLICK ');
  $("#var1").val($(this).attr("data-var1"));
  $("#var2").val($(this).attr("data-var2"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainarea">
  <input type="hidden" name="var1" value="" id="var1">
  <input type="hidden" name="var2" value="" id="var2">

  <div id="ajaxarea">
    <a href="" class="icon icon-phone" data-var1="test Page" data-var2="test var2 content">Callme1</a>
    <a href="" class="icon icon-phone" data-var1="test Page 22" data-var2="test var2 content 22">Callme2</a> .....

  </div>

</div>

You need to stop the slinks: `$(document).on('click', '.icon-phone', function(e) { e.preventDefault();` — mplungjan, Jun 12 '18 at 05:10
**OR** remove the `href` empty attr... And decorate the anchor using CSS. If needed at this point. lol — Louys Patrice Bessette, Jun 12 '18 at 05:15
How do you know that "var1" is not being assigned the value? You cannot see it through Chrome's developer tools. Try writing the value after assigning console.log("var1 after: " + $('#var1').val()); — TejSoft, Jun 12 '18 at 05:21

score 2 · Accepted Answer · answered Jun 12 '18 at 05:12

2

Here is the solution https://codepen.io/creativedev/pen/JZNoZL

$(document).on('click', '.icon-phone', function(e) {
  e.preventDefault();
  console.log('IC CLICK ');
  $("#var1").val($(this).attr("data-var1"));
  $("#var2").val($(this).attr("data-var2"));
});

answered Jun 12 '18 at 05:12

Bhumi Shah

9,323
7
63
104

I am using ajax pagination. While clicking 2nd page the `ajaxarea` content is loaded dynamically. At that time the hidden element is not updated. Because the hidden element is available outside the ajax area. – Sam Hanson Jun 12 '18 at 05:24
can you create fiddle of your code? so i can help you in specific issue – Bhumi Shah Jun 12 '18 at 05:25

Louys Patrice Bessette · Answer 2 · 2018-06-12T17:32:03.540

The empty href="" makes the page try to open a target href... Which is missing.

It may not be the best solution to completely remove that attribute, but I think it's a solution to consider as a possible walk-around.

$(document).on('click', '.icon-phone', function() {
  console.log('IC CLICK ');
  $("#var1").val($(this).attr("data-var1"));
  $("#var2").val($(this).attr("data-var2"));
  
  console.log( $("#var1").val() +" | "+$("#var2").val() );
});

.fake-link{
  text-decoration:underline;
  color:blue;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainarea">
  <input type="hidden" name="var1" value="" id="var1">
  <input type="hidden" name="var2" value="" id="var2">

  <div id="ajaxarea">
    <a role="link" class="icon icon-phone fake-link" data-var1="test Page" data-var2="test var2 content">Callme1</a>
    <a role="link" class="icon icon-phone fake-link" data-var1="test Page 22" data-var2="test var2 content 22">Callme2</a> .....
  </div>
</div>

So the anchor is "decorated" with CSS to look like a regular link and it doesn't have its "normal behavior" to open the target href.

As mplungjian mentionned, an attention should be made to visually impaired users. The aria attribute role="link" will be useful to those who use screenreaders.

AND a cursor:pointer. However that ALSO needs ARIA attributes for visually impaired users who no longer can hear it is a clickable something — mplungjan, Jun 12 '18 at 16:54
Good point @mplungjan. I have some more reading to do about aria attributes. — Louys Patrice Bessette, Jun 12 '18 at 17:27

html hidden element not updated onclick ajax call

2 Answers2