2014-11-26, 12:13
  #1
Medlem
Hej,

Jag har försökt använda mig av denna javascript i min asp.net mvc view:

http://jsfiddle.net/7nK9E/21/


Såhär ser min view ut:



Kod:
@model FindRecipeProject.Models.Recipe

@{
    ViewBag.Title = "Create";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        var counter = 2;

        $("#addbtn").click(function () {

            if (counter > 10) {
                alert("You can Select Only 10  Subjects \n In one Session ");
                return false;
            }

            var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
            newTextBoxDiv.after().html('<label>Field #' + counter + ' : </label>' +
                '<input type="text" name="TextBox A ' + counter +
                ' value="" id="subj' + counter + '">' + '&nbsp;' + '<input type="text" name="TextBox B ' + counter +
                ' value="" size="5"  id="fee' + counter + '">'



                                      );


            newTextBoxDiv.appendTo("#TextBoxesGroup");

            counter++;
        });

        $("#removeButton").click(function () {
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            counter--;

            $("#TextBoxDiv" + counter).remove();
        });

        $("#getButtonValue").click(function () {

            var msg = '';
            for (i = 1; i < counter; i++) {
                msg += "subj" + i + " : " + $('#subj' + i).val();
                msg += " ";
                msg += "fee" + i + " : " + $('#fee' + i).val();
                msg += ", ";
            }
            alert(msg);
        });

    });
</script>







<h2>Create</h2>





@using (Html.BeginForm("Create", "Recipe", FormMethod.Post, new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Recipe</legend>

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

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

        <div class="editor-label">
            @Html.LabelFor(model => model.UserId, "userProfile")
        </div>
        <div class="editor-field">
            @Html.DropDownList("UserId", String.Empty)
            @Html.ValidationMessageFor(model => model.UserId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Picture)
        </div>
        <div class="editor-field">
            <input name="ImageFile" type="file" />
            @Html.ValidationMessageFor(model => model.Picture)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

}

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


<input type='button' value='Add Subject' id='addbtn'>
<input type='button' value='Remove Subject' id='removeButton'>
<input type="button" id="getButtonValue" value="Get TextBox Value">
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>Subject 1 :</label>
        <input class="textbox" type='text' name="subj1" id="subj1" />&nbsp;
        <input class="textbox" type='text' size="5" name="fee1" id="fee1" />
    </div>
</div>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Här är koden i pastebin för den som vill ha större överblick:
http://pastebin.com/K4Ev8ypA



Det är inga problem att ta bort textboxarna eller hämta värdet från textboxarna.
Problemet här är att det inte går att lägga till ett nytt element av textboxar, vad beror detta på?

Jag är helt grön när det gäller javascript och all hjälp är jag väldigt tacksam över

Mvh
Citera
2014-12-01, 11:23
  #2
Medlem
Snälla kan någon snilleblixt därute hjälpa mig?
Citera

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in