Jquery call input id

Question

<input id="IsCaseReviewsAddCarForm:stateNumber4" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" type="text" title="Улсын дугаар" name="IsCaseReviewsAddCarForm:stateNumber4" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"></input>

jQuery(function ($) {
$("#stateNumber4").mask("9999aaa");;

How i call input id for this Jquery.

Thanx all. But still not working. My XHML inputText is here:

<p:inputText id="stateNumber4" type="text" value="#{isCaseReviewsController.current.isReviewsItemsAPK.stateNumber}" title="Улсын дугаар" required="true" requiredMessage="Улсын дугаар оруулна уу"/>

Compile after Inspect element it is:

<input id="IsCaseReviewsAddCarForm:stateNumber4" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" type="text" title="Улсын дугаар" name="IsCaseReviewsAddCarForm:stateNumber4" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false"></input>

Input mask is working another page, but that page haven't form or dialog. My own this page has dialog->form->input. I think main problem is jquery function couldn't call my input id.

#IsCaseReviewsAddCarForm:stateNumer4 doesn't work. – Baagii Sukhbaatar Nov 28 '14 at 07:22 — Baagii Sukhbaatar, Nov 28 '14 at 07:22

score 2 · Answer 1 · answered Nov 28 '14 at 07:31

You are using : in id so you need to escape it.

Use

$("#IsCaseReviewsAddCarForm\\:stateNumber4").mask("9999aaa");

Docs

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.

OR

Use Attribute Equals Selector [name="value"]

$("[id='IsCaseReviewsAddCarForm:stateNumber4']").mask("9999aaa");

However, I would recommend you to remove : from the ID

score 0 · Answer 2 · answered Nov 28 '14 at 07:25

0

Remove colon ":" from id. Let it be <input id="IsCaseReviewsAddCarForm_stateNumber4" ...>. $("#IsCaseReviewsAddCarForm_stateNumber4") should work.

answered Nov 28 '14 at 07:25

Slava Dolgov

79
1
5

Ehsan Sajjad · Answer 3 · 2014-11-28T07:38:08.143

You need to escape it, currently is understood as filter selector:

$("#IsCaseReviewsAddCarForm\\:stateNumber4").mask("9999aaa");;

See this article for more information

Also consider following example:

<input id="ehsan.sajjad" type="text"/>

Now if i write it to change its value using:

$("#ehsan.sajjad").val("SOmeValue"); // will not work as . will understood it that element with id ehsan and class sajjad

But escaping the . using \\ will make it work correctly:

$("#ehsan\\.sajjad").val("SOmeValue"); // now will work now it understands its id whose value is ehsan.sajjad

DEMO EXAMPLE:

$(function(){


$("#ehsan\\.sajjad").val("Ehsan Sajjad");

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ehsan.sajjad"/>

While this will not work:

$(function(){


$("#ehsan.sajjad").val("Ehsan Sajjad");

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ehsan.sajjad"/>

$("#IsCaseReviewsAddCarDlg\\.IsCaseReviewsAddCarForm\\.stateNumber4").mask("9999aaa"); not working. — Baagii Sukhbaatar, Nov 28 '14 at 07:55

score 0 · Answer 4 · edited May 23 '17 at 10:30

This should work.

jQuery(function($) {
  $("##IsCaseReviewsAddCarForm\\:stateNumber4").mask("9999aaa");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="IsCaseReviewsAddCarForm:stateNumber4" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" type="text" title="Улсын дугаар" name="IsCaseReviewsAddCarForm:stateNumber4" role="textbox" aria-disabled="false" aria-readonly="false"
aria-multiline="false"></input>

Also refer this question for valid id - What are valid values for the id attribute in HTML?

Jquery call input id

4 Answers4

DEMO EXAMPLE: