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
Juan Miguel FranciaJuan Miguel Francia 

Javascript in Visualforce, Using <apex:inputfield>

So basically I need to create a javascript

<apex:page Controller="editLineItemSPRCOMM" cache="false" tabstyle="Opportunity" action="{!initAfter}">
    
    <script type="text/javascript">
        
        
        function buttonValidate(){
         
        return confirm("Do you want to save this");
        
        
    </script>
    
    <apex:form id="form1" >
        <apex:pageBlock title="Line Item Calculator" id="aa">
            <apex:pageMessages id="pmsg"/>
            <apex:pageBlockButtons >
            
                <apex:commandButton styleClass="butt1" value="Save and Return" action="{!saveLineItems}" onclick="buttonValidate()"/>
                <!-- <apex:commandButton value="Refresh" action="{!refreshLineItems}"/> -->

            </apex:pageBlockButtons>
            
            <!-- Line Calculator for EMEA users -->
                <!--apex:column headerValue="Recommended End User Discount %"-->
                <apex:column headerValue="Rec. End User Disc %" id="ac">
                    <apex:inputField value="{!myVar.item.Rec_EndUser_Disc__c}" id="myNumber">
                        <apex:actionSupport event="onchange" action="{!calculateRecEndUserPrice}" status="counterStatus"  rerender="table2,panel1,counterStatus,pmsg" id="aaa"/>
                    </apex:inputField>
                
            </apex:pageBlockTable>
            
        </apex:pageBlock>
     
    </apex:form>
</apex:page>
 

validation where in It will check my <apex:inputfield>. If it has the value of 0 it will throw a confirm with the field that is 0 and  will ask the user if he wants to continue to save. Can someone help me please, been stuck with this one for days. 

This is my VF Page It might be short because I tend to just put the important part.

 

 

 

 

ZeyadZeyad
So you will could do a couple of basic things to get you going. 

First, an Action Function which will connect your javascript function to your Apex function (!saveLineItems)
  
<apex:form>
        <apex:actionFunction name="saveLineItems" action="{!saveLineItems}" rerender=""/>
</apex:form>
You may have to adjust the rerender based on your needs.
 
Second you will need a javascript function
  
var buttonValidate = function(){
        var textValue = document.getElementById('myNumber');
        
        if(textValue.value == 0)
              if (confirm("Do you want to save this?"))
                       saveLineItems();
}


From there you could change your command button to a normal HTML button and have it call buttonValidate() on click. 
 
I hope this helps,
Zeyad Jabra
Juan Miguel FranciaJuan Miguel Francia

Hi Zeyad. I actually tried this one just to check if my javascript is getting the input field value but it is throwing null

 

function buttonValidate(){
         
          var textValue = document.getElementById('TestingQuantity'); 
          alert(textValue.value);
          
         }

and then the id of my apex:inputfield is TestingQuantity. 
ZeyadZeyad
So what I would suggest is changing the <apex:input> to a standard HTML5 <input> field.

Check out this code, and throw it in a test VF page to try it out. 
<apex:page standardController="Opportunity" docType="HTML-5.0">
    <script>
    var btnValidate = function(){
     	var textValue = document.getElementById('tester');
        alert(textValue.value);
    }
    </script>
    <input type="number" label="Test" id="tester" value="{!Opportunity.FiscalYear}"/>
</apex:page>

Try it out, and let me know if you need further assistance. 

The issue with <apex:inputfield> and rendering is the value is not associated to the input tag, it is to a span inside of the input tag. I prefer the HTML 5.0 input tag as I find it easier to handle.

I would then move your action support out to an action function at the top, as I explained in my previous post, and just call that from the onchange in the input field, as such: 
  
<apex:form>
        <apex:actionFunction name="calculateRecEndUserPrice" action="{!calculateRecEndUserPrice}" rerender="table2,panel1,counterStatus,pmsg"/>
</apex:form>

//AND

<input type="number"  id="myNumber" onchange="calculateRecEndUserPrice" value="{!myVar.item.Rec_EndUser_Disc__c}"/>
 
Please mark as resolved if this answered your question. If not please reply and I will be glad to follow up with you. 

Best,
Zeyad Jabra