CODEWITHSUNDEEP
phpjqueryajax
Jayson
Jayson

Reputation: 19

how to Get the value of input type hidden in modal using ajax

Good day..
i have modal and inside the modal i have div class

<div id="user-details-content" class="modal-body">
   ...
</div>

i supply the content inside that modal using ajax.
this is the supplied content:

<div id="hidden" class="hidden">
   <input type="hidden" name="id" class="id" id="id" value="1">
   <input type="hidden" value="[email protected]" class="email">
</div>

Now i try to get that input type="hidden" using this ajax

var id = $(this).parents('#user-details-content').find('.id').val();

but it returns undefined in my console.log

any suggestions ? on how to get that input type="hidden" and the value ?

EDIT - This is my ajax function

function inquiryId(){
    var id = $(this).parents('#user-details-content').find('.id').val();
    console.log(id);
    $.ajax({
        url: 'php_file.php',
        type: 'POST',
        data: { id: id,
        },
        dataType: 'json',
        success: function(result){
            console.log(result);
        }

    });
}

Upvotes: 1

Views: 2964

Answers (3)

user3451822
user3451822

Reputation:

From the line of code:

var id = $(this).parents('#user-details-content').find('.id').val();

If you know the exact id and the class attributes of the input[type="hidden"], may I suggest using $("#id").val() and $(".email").val(). Below is a snippet to demonstrate my suggestion, hope it helps.

$(function(){
  $("button").click(function(event) {
    buttonSubmit_OnClick();
  });
});


function buttonSubmit_OnClick() {
  var message;
  message = "Hello " + $("#id").val() + "! ";
  message += $(".email").val();
  
  $("p").html($("p").html() + "<br>" + message);

  /* $.ajax() code-block goes here */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hidden" class="hidden">
  <input type="hidden" name="id" class="id" id="id" value="1">
  <input type="hidden" value="[email protected]" class="email">
  <button>Click me!</button><!-- this is for demo! -->
</div>
<p></p><!-- this is for demo! -->

As a side note:

For better client-side code optimization:

  1. $(this) is powerful, but also a wild-card. jQuery is always updating the this, so, this may not always be what you expect it to be. Best be used only when you really have to, when you do, store its reference in a variable. Remember, with great power, comes great responsibility.

  2. ID-Based Selectors are much faster because they handled by using document.getElementById() which is native to the browser instead of going through jQuery's sizzle selection engine.

  3. Being specific if possible. Avoid universal selectors such as .children() or .parents().

Here is a more eloquent read on optimizing jQuery selectors.

Upvotes: 0

Alps1992
Alps1992

Reputation: 97

Just want to get the input type=hidden value?

JQuery can get the value no matter it's hidden or show.

$('#id').val();
$('.email').val();

this is ok.

Upvotes: 0

segfault
segfault

Reputation: 95

the problem may occurs because you loaded the html after the DOM loaded. i guess you have kind of event listener right ?

A workaround could be doing something like :

$(document).on('some_event', '#your_css_selector', function(e){
    // do your stuff here
});

Upvotes: 0

Related Questions