How to use outputField in a query string

Question

I am trying to take the value of an outputfield in a query string but not sure how. What I have works for an inputField but not outputField. Any ideas?

VisualForce Page

<apex:page standardController="Account" extensions="Items">    
<apex:outputPanel layout="block" style="overflow:auto;width:500;height:180px">
    <apex:form onsubmit="openWindowPopup(); return false;" styleClass="formId">
        <apex:pageblock id="table">
            <script>
            var openWindowPopup = function(){
                var number = document.getElementsByClassName("number")[0].value; 

                window.open('https://www.form.com?numId='+number);
                }
                </script>
            <apex:pageblocktable id="pageBlockId" value="{!AssetLines}" var="lines">
            <apex:column >
                <apex:commandbutton value="Generate" reRender="table" />
            </apex:column>



            <apex:column headerValue="Numbers" >
                <apex:outputField var="Num" value="{!lines.Number__c}"   styleClass="number"/>

            </apex:column>


            </apex:pageblocktable>

        </apex:pageblock>
    </apex:form>
</apex:outputPanel>

Answer 1

You have to specify an id in outputField rather than styleclass.

/*****page*****/
<apex:outputField var="Num" value="{!lines.Number__c}"   id="numberId"/>

/*****javascript*****/
<script>
    var openWindowPopup = function(){
        var allSpanTags = document.getElementsByTagName('span');
        var number;

        for(var i=0;i<allSpanTags.length;i++){
            if(allSpanTags[i].id.indexOf('numberId') > -1){
                number = allSpanTags[i].innerHTML;
                break;
            }
        }

    window.open('https://www.form.com?numId='+number);
    }
</script>

I hope this will work for you.

Answer 2

Instead of trying to use javascript you could simply use apex param to get the value of the outputfield and re-use it however you want. apex param example