c# - Button to clear textareatextboxes of content - Stack Overflow

admin管理员组

文章数量:1026654

would someone be able to help me with a button to clear /delete the content of all textareas on a form please?

I've already tried this approach:

<input type="reset" value="restart" />

but because the textareas are populated with data from the database upon load then it doesn't actually do anything (unless I want to re-set the form back to it's original state).

Can I do this with some code on the view? Or will I need to add some bits to the controller as well?

I'm using ASP.Net MVC Razor C# Microsoft Visual Web Developer 2010 Express.

Code for the View page is below:

@model DFAccountancy.Models.Data

@{
    ViewBag.Title = "Update";
}



<h2>Update</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"     type="text/javascript"></script>

<script type="text/javascript">
    $(function () { $("test").click(function () { $("textArea").val(""); }); });
</script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Data</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.para1)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para1, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para1)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.para2)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para2, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para2)
    </div>

    <p>
        <input type="submit" value="Update" />
    </p>
    <p>
        <input type="reset" value="Re-Start" />
    </p>
    <p>
        <input id="test" type="button" />
    </p>

</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

would someone be able to help me with a button to clear /delete the content of all textareas on a form please?

I've already tried this approach:

<input type="reset" value="restart" />

but because the textareas are populated with data from the database upon load then it doesn't actually do anything (unless I want to re-set the form back to it's original state).

Can I do this with some code on the view? Or will I need to add some bits to the controller as well?

I'm using ASP.Net MVC Razor C# Microsoft Visual Web Developer 2010 Express.

Code for the View page is below:

@model DFAccountancy.Models.Data

@{
    ViewBag.Title = "Update";
}



<h2>Update</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"     type="text/javascript"></script>

<script type="text/javascript">
    $(function () { $("test").click(function () { $("textArea").val(""); }); });
</script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Data</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.para1)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para1, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para1)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.para2)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para2, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para2)
    </div>

    <p>
        <input type="submit" value="Update" />
    </p>
    <p>
        <input type="reset" value="Re-Start" />
    </p>
    <p>
        <input id="test" type="button" />
    </p>

</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

• c#
• javascript
• jquery
• asp-mvc

Share Improve this question Follow edited May 29, 2012 at 11:29 Darren 70.9k2424 gold badges141141 silver badges145145 bronze badges asked Mar 23, 2012 at 15:41 HarryHarry 74555 gold badges1616 silver badges2727 bronze badges 1

• have you considered a javascript approach? – Daniel A. White Commented Mar 23, 2012 at 15:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Since you're using JQuery you could assign all text areas a class and then do:

$(function () {
   $(".textArea").text('');
}

This would clear all text areas once the document has loaded.

You can use jQuery's .click event on your button:

 $(function () {
   $("#YourButtonID").click(function(){
      $("textArea").val("");
   });
 });

would someone be able to help me with a button to clear /delete the content of all textareas on a form please?

I've already tried this approach:

<input type="reset" value="restart" />

but because the textareas are populated with data from the database upon load then it doesn't actually do anything (unless I want to re-set the form back to it's original state).

Can I do this with some code on the view? Or will I need to add some bits to the controller as well?

I'm using ASP.Net MVC Razor C# Microsoft Visual Web Developer 2010 Express.

Code for the View page is below:

@model DFAccountancy.Models.Data

@{
    ViewBag.Title = "Update";
}



<h2>Update</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"     type="text/javascript"></script>

<script type="text/javascript">
    $(function () { $("test").click(function () { $("textArea").val(""); }); });
</script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Data</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.para1)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para1, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para1)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.para2)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para2, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para2)
    </div>

    <p>
        <input type="submit" value="Update" />
    </p>
    <p>
        <input type="reset" value="Re-Start" />
    </p>
    <p>
        <input id="test" type="button" />
    </p>

</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

would someone be able to help me with a button to clear /delete the content of all textareas on a form please?

I've already tried this approach:

<input type="reset" value="restart" />

but because the textareas are populated with data from the database upon load then it doesn't actually do anything (unless I want to re-set the form back to it's original state).

Can I do this with some code on the view? Or will I need to add some bits to the controller as well?

I'm using ASP.Net MVC Razor C# Microsoft Visual Web Developer 2010 Express.

Code for the View page is below:

@model DFAccountancy.Models.Data

@{
    ViewBag.Title = "Update";
}



<h2>Update</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"     type="text/javascript"></script>

<script type="text/javascript">
    $(function () { $("test").click(function () { $("textArea").val(""); }); });
</script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Data</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.para1)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para1, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para1)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.para2)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para2, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para2)
    </div>

    <p>
        <input type="submit" value="Update" />
    </p>
    <p>
        <input type="reset" value="Re-Start" />
    </p>
    <p>
        <input id="test" type="button" />
    </p>

</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

• c#
• javascript
• jquery
• asp-mvc

Share Improve this question Follow edited May 29, 2012 at 11:29 Darren 70.9k2424 gold badges141141 silver badges145145 bronze badges asked Mar 23, 2012 at 15:41 HarryHarry 74555 gold badges1616 silver badges2727 bronze badges 1

• have you considered a javascript approach? – Daniel A. White Commented Mar 23, 2012 at 15:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Since you're using JQuery you could assign all text areas a class and then do:

$(function () {
   $(".textArea").text('');
}

This would clear all text areas once the document has loaded.

You can use jQuery's .click event on your button:

 $(function () {
   $("#YourButtonID").click(function(){
      $("textArea").val("");
   });
 });

本文标签： cButton to clear textareatextboxes of contentStack Overflow