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:
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
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 + '">' + ' ' + '<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" />
<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