How do I get the value of a SharePoint:FormField with javascript?

Question

I have a form field:

<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Number_x0020_1" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Number_x0020_1')}"/>

I'd like to get the value of it in my javascript function. I was able to find it at the time of rending in html, but I know there's a better way to do this, but try as I might in the search I can't find it. Here's my solution right now.

var my_input1 = document.getElementById('ctl00_m_g_bb2353f3_193b_4566_86ff_0c4dd6671dfc_ff21_ctl00_ctl00_TextField').value;

I'm just using SharePoint Designer for this, and I don't want to adjust the web.config file to allow for server scripting if I can avoid it.

Answer 1

I guess the easiest way is to use jquery. You just have to refer jquery in your form from designer and then you can fetch the field from title or name attribute whichever is applicable.

I guess this is the input text field so your jquery will be like

$("input[title='title_of_the_field']").val()

You can see the title in developer toolbar from where you get the id.

Hope this helps. For more info refer http://jquery.com/

Answer 2

$("select[title*='Time Period'] option:selected").text();

Answer 3

You could wrap the FormField in a span tag with an Id that you know and then you use querySelector to get the value (assuming you don't need to support below IE8).

<span id='myid'>
    <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Number_x0020_1" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Number_x0020_1')}"/>
</span>

var my_input1 = document.querySelector("span#myid input").value;

At least this way you wouldn't be relying on the .NET generated ID.

Answer 4

Similar question to yours has already been answered on StackOverflow: Javascript to get sharepoint form field value to a variable.

You have to append "Field" to the field name; e.g. for Title (using jQuery):

var $titleField = $('input[id*=TitleField]');

Answer 5

I don't know if you are trying to alter an existing lists' Form page or having your own, but you can get ClientID in the aspx page by using the example below. However I'm not sure how asp.net handles IDs using special characters.

var my_input1 = document.getElementById("<%= ff2{$Pos}.ClientID%>");