function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
jungleeejungleee 

getting input value from jQuery

Hi,

 

I have created a input box and a link. When I click on the link, an alert will show the value of the input box. But this is not happening as of now, Please suggest the code changes. Thanks!

 

<apex:page id="pa">
 <apex:includeScript value="{!$Resource.jQuery}"/>
 <script type="text/javascript">
         var j$ = jQuery.noConflict();
         
         j$(document).ready(function(){
             j$("a").click(function(){
            var xyz = j$("#pa:f1:userInput").val();
            //var xyz = document.getElementById('{!$Component.pa.f1.userInput}').value;
             alert(xyz);
             });
        });         
  </script>

  <a herf="#" id="clickHere">click here</a>
  <apex:form id="f1">
      enter something <apex:inputText id="userInput"/>  
  </apex:form>
</apex:page>

 Thanks

Sam

 

 

Best Answer chosen by Admin (Salesforce Developers) 
bpl3792bpl3792

Sorry, I read your code wrong. It looks like you are using an apex input field which is a little different in targeting elements...here's how your code should look

<apex:page id="pa">
 <apex:includeScript value="{!$Resource.jQuery}"/>
 <script type="text/javascript">
         var j$ = jQuery.noConflict();
         
         j$(document).ready(function(){
             j$('#clickHere').click(function(){
				 var xyz = j$('id$=userInput]').val();
				 alert(xyz);
            });
        });         
  </script>

  <a herf="#" id="clickHere">click here</a>
  <apex:form id="f1">
      enter something <apex:inputText id="userInput"/>  
  </apex:form>
</apex:page>

 
I'd recommend staying away from apex elements since you really don't need them with jQuery, especially in the example you gave. A better option would be...

<apex:page id="pa">
 <apex:includeScript value="{!$Resource.jQuery}"/>
 <script type="text/javascript">
         var j$ = jQuery.noConflict();
         
         j$(document).ready(function(){
             j$('#clickHere').click(function(){
				 var xyz = j$('#userInput').val();
				 alert(xyz);
            });
        });         
  </script>

  <a herf="#" id="clickHere">click here</a>
  <apex:form id="f1">
      enter something <input type="text" id="userInput"/>  
  </apex:form>
</apex:page>

 
You should also leverage DIVs to organize your elements. It will make your life so much easier with jQuery.

All Answers

bpl3792bpl3792

You need to replace double quotes with single quotes since this is visualforce...is a an element? you should have

j$('#a').click(function(){

and 

var xyz = j$('#pa:f1:userInput').val();

Hope this helps!
jungleeejungleee

Hi ,

 

Thanks for the reply.

 

I tried replacing the double qoutes with single, but that didn't work out. But the below code works. When I click on the link, I get a hello alert.

 

j$(document).ready(function(){
    j$("a").click(function(){
		alert('hello');
    });
});

 

 I think there's somthing wrong with getting the value of the input and storing it in the xyz variable. i.e., with the below line:

 

var xyz = j$("#pa:f1:userInput").val();

 

Any help here, please?

 

-Sameer
bpl3792bpl3792

Why don't you just use the input's element name?

var xyz=j$('#userinput').val();
jungleeejungleee

Hi,

 

I tried that as well, but when I clicked on the link, i get the pop-up but with undefined on it..

 

 

 

Not sure how to resolve this..

 

-Sam

 
bpl3792bpl3792

Could you post the code of the elements you are trying to refrence? Including the divs they are in
jungleeejungleee

Hi

 

This is the below code:

 

<apex:page id="pa">
 <apex:includeScript value="{!$Resource.jQuery}"/>
 <script type="text/javascript">
         var j$ = jQuery.noConflict();
         
         j$(document).ready(function(){
             j$("a").click(function(){
				 var xyz = j$("#userInput").val();
				 alert(xyz);
            });
        });         
  </script>

  <a herf="#" id="clickHere">click here</a>
  <apex:form id="f1">
      enter something <apex:inputText id="userInput"/>  
  </apex:form>
</apex:page>

 

I used both single and double quotes, but it didn't work.

 

If I use the below javascript line everything works fine:

var xyz = document.getElementById('pa:f1:userInput').value;

 

I guess something's wrong with the jQuery code.

 

-Sam

 

 
bpl3792bpl3792

Sorry, I read your code wrong. It looks like you are using an apex input field which is a little different in targeting elements...here's how your code should look

<apex:page id="pa">
 <apex:includeScript value="{!$Resource.jQuery}"/>
 <script type="text/javascript">
         var j$ = jQuery.noConflict();
         
         j$(document).ready(function(){
             j$('#clickHere').click(function(){
				 var xyz = j$('id$=userInput]').val();
				 alert(xyz);
            });
        });         
  </script>

  <a herf="#" id="clickHere">click here</a>
  <apex:form id="f1">
      enter something <apex:inputText id="userInput"/>  
  </apex:form>
</apex:page>

 
I'd recommend staying away from apex elements since you really don't need them with jQuery, especially in the example you gave. A better option would be...

<apex:page id="pa">
 <apex:includeScript value="{!$Resource.jQuery}"/>
 <script type="text/javascript">
         var j$ = jQuery.noConflict();
         
         j$(document).ready(function(){
             j$('#clickHere').click(function(){
				 var xyz = j$('#userInput').val();
				 alert(xyz);
            });
        });         
  </script>

  <a herf="#" id="clickHere">click here</a>
  <apex:form id="f1">
      enter something <input type="text" id="userInput"/>  
  </apex:form>
</apex:page>

 
You should also leverage DIVs to organize your elements. It will make your life so much easier with jQuery.

This was selected as the best answer
jungleeejungleee

Thanks mate, that worked!!!

 

I will surely use the div's going ahead..

 

Thanks again

-Sam
SK R.ax1448SK R.ax1448

Hi,

 

I have similar issue, <apex:inputText> is not working in my case too, i have used <input> instead and its working as expected. My question is how to send the value into to the controller to save the record.  Could you please help on this ?

here is my code:

 

<apex:page >
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    
    <script type="text/javascript">
        $(function () {
            $("#datepicker").datepicker({ beforeShowDay: allowedDates });
        });

    var currentYear = new Date().getFullYear();

        var _allowedDates = [
    new Date(currentYear, 2, 31).getTime(),
    new Date(currentYear, 5, 30).getTime(),
    new Date(currentYear, 8, 30).getTime(),
    new Date(currentYear, 11, 31).getTime(),
];

function allowedDates(date) {
    date = date.getTime();

    for (i in _allowedDates)
        if (date == _allowedDates[i])
            return [true, ""];

    return [false, ""];
}
    </script>
<apex:form >
          <!   <apex:inputText value="{!d_date_str}" id="datepicker" /> -->

         <input type="text" id="datepicker" />
   </apex:form>
</apex:page>

 

 

Any help is highly appreacited.

 

 

Thanks inadvance!

SK

 

 

 
rotfilrotfil
Spelling mistake in orginal answer:
  
<apex:inputText id="userInput"/> 

j$('#clickHere').click(function(){
     var xyz = j$('[id$=userInput]').val();
     alert(xyz);
});

This works.