CODEWITHSUNDEEP
javascriptasp.net-mvcasp.net-mvc-4
RikSaunderson
RikSaunderson

Reputation: 3765

MVC 4 - Get value of editor-field div before submit

I have a piece of CSHTML as below:

<fieldset>
    <legend>VisualisationConfigItem</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.DataTable)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.DataTable)
        @Html.ValidationMessageFor(model => model.DataTable)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Visualisation)
    </div>
    <div id="visualisationField" class="editor-field">
        @Html.EditorFor(model => model.Visualisation)
        @Html.ValidationMessageFor(model => model.Visualisation)
    </div>
    <div id="reportDiv"></div>
    <p>
        <input type="button" id="selectFilteringColumnsButton" onclick="selectFilteringColumns();" value="Select Filtering Columns" />
    </p>
    <p>
        <input type="submit" value="Create" disabled="disabled" />
    </p>
</fieldset>

In my JavaScript function selectFilteringColumns() I'm trying to get the value typed into the visualisationField div so that I can set other variables before allowing the user to click the submit button.

My problem is that I can't get the text that the user has typed into the textbox using JavaScript. I've tried all of the following:

var detailedDiv = document.getElementById('visualisationField');
var all = detailedDiv.all;
var className = detailedDiv.className;
var innerText = detailedDiv.innerText;
var localName = detailedDiv.localName;
var nodeName = detailedDiv.nodeName;
var nodeValue = detailedDiv.nodeValue;
var outerHTML = detailedDiv.outerHTML;
var outerText = detailedDiv.outerText;
var tagName = detailedDiv.tagName;
var TEXT_NODE = detailedDiv.TEXT_NODE;
var textContent = detailedDiv.textContent;
var title = detailedDiv.title;

I've tried all of these and more, and none of them seem to be able to get the content of the text that the user types into the text field.

Does anyone know how to get this text?

Upvotes: 0

Views: 1234

Answers (1)

Matt Bodily
Matt Bodily

Reputation: 6423

I don't know why you need to grab the div first. you can just grab the field

$('#Visualisation').val();

if you want to grab the div then you need to "find" the editor inside

$('#visualisationField').find('#Visualisation').val();

Upvotes: 2

Related Questions