Hello everyone, I have a small problem..... I am trying to submit a form with checkboxes. what happens is when the page loads there is 16 cards that have 2 checkboxes each. then I have a submit button to submit the form to the controller...but when I click
the button the only thing that is submitted is the user id. below is the code in the page.
ok...if I place the submit button inside the form then the check boxes are submitted..but this means I will have a submit button in each card...but if one submit button is clicked then the form is submitted before all the check boxes are checked......how
do I submit the form with one submit button outside the form?
ok...that makes sense...the problem is there will be 16 submit button because I have the cards being generated inside a foreach loop. here is what I am trying to do.
I am trying to collect user picks for a football pool...so when the page loads it creates a card with the away team name and the home team name..each has a check box so the user can select which team they pick. once all the check boxes are selected the form
can be submitted with the (one) submit button which is outside the form right now....like I said earlier if I put the submit button inside the form it will generate 16 buttons which is no good. because as soon as I check the first checkbox and click the button
the form is submitted.......is there no other way besides javascript to do what I am trying to do? if not can you provide a sample of the javascript that will do what I need to do?
ahhh very cool...I took your suggestion and it worked...one other thing I did was change the button..I originally had the button in a "a" tag I changed it to an "input" tag
Member
1 Points
6 Posts
submitting a form
Sep 19, 2019 07:40 PM|suncoastsoftware|LINK
Hello everyone, I have a small problem..... I am trying to submit a form with checkboxes. what happens is when the page loads there is 16 cards that have 2 checkboxes each. then I have a submit button to submit the form to the controller...but when I click the button the only thing that is submitted is the user id. below is the code in the page.
@foreach (var item in Model) { <div class="col-md-6"> <div class="card bg-light mb-4 shadow-nohover"> <div class="card-header"> Matchup </div> <div class="card-body"> <h5 class="card-title">Week : @item.Week</h5> <p class="card-text">Choose one team by clicking the button for @ViewBag.player.Username</p> <div class="imput-group-text"> @using (Html.BeginForm("SavePicks", "Players", FormMethod.Post)) { <div class="form-group"> @Html.TextBox(@item.AwayTeam, null, new { @class = "form-control" }) <input id="awayPick" type="checkbox" name="@item.AwayTeam" value="@item.AwayTeam" /> <label class="ml-1 mr-4 text-secondary"><strong>@item.AwayTeam (@item.AwayRecord)</strong></label> <input id="homePick" type="checkbox" name="@item.HomeTeam" value="@item.HomeTeam" /> <label class="ml-1 text-secondary"><strong>@item.HomeTeam (@item.HomeRecord)</strong></label> </div> } </div> </div> </div> </div> }here is the code in the controller
public IActionResult SavePicks(string[] teams, int id) { return View(); }the string[] teams should have an array of team names. but nothing is submitted on the button click
thank you for any help
All-Star
52261 Points
23315 Posts
Re: submitting a form
Sep 19, 2019 07:51 PM|mgebhard|LINK
There are no input elements with the name "teams".
public IActionResult SavePicks(string[] teams, int id) { return View(); }The name attributes are set to a value which will not work well given the action input name is teams.
<input id="awayPick" type="checkbox" name="@item.AwayTeam" value="@item.AwayTeam" />I think you want
Member
1 Points
6 Posts
Re: submitting a form
Sep 19, 2019 07:52 PM|suncoastsoftware|LINK
ahhh ok...I will give that a try..thank you for your quick reply!
Member
1 Points
6 Posts
Re: submitting a form
Sep 19, 2019 07:55 PM|suncoastsoftware|LINK
I tried changing the name to "teams" for both but still not submitting the team names
All-Star
52261 Points
23315 Posts
Re: submitting a form
Sep 19, 2019 08:20 PM|mgebhard|LINK
I don't understand what you're trying to do exactly. I think you are after code similar to the following.
<form method="post"> <input id="awayPick" type="checkbox" name="away" value="Panthers" /> <input type="hidden" name="away" value="" /> <label class="ml-1 mr-4 text-secondary"><strong>Panthers 1 (0-1-1)</strong></label> <input id="homePick" type="checkbox" name="home" value="Cardinals" /> <input type="hidden" name="home" value="" /> <label class="ml-1 text-secondary"><strong>Cardinals (0-0-2)</strong></label> <input id="Submit1" type="submit" value="submit" /> </form>[HttpGet] public IActionResult Index() { return View(); } [HttpPost] public IActionResult Index(string away, string home) { return Json(new { away = away, home = home }); }There are 3 possible results. This is is one.
{ "away": null, "home": "Cardinals" }Member
1 Points
6 Posts
Re: submitting a form
Sep 19, 2019 08:59 PM|suncoastsoftware|LINK
ok...if I place the submit button inside the form then the check boxes are submitted..but this means I will have a submit button in each card...but if one submit button is clicked then the form is submitted before all the check boxes are checked......how do I submit the form with one submit button outside the form?
All-Star
52261 Points
23315 Posts
Re: submitting a form
Sep 19, 2019 09:36 PM|mgebhard|LINK
Member
1 Points
6 Posts
Re: submitting a form
Sep 19, 2019 09:51 PM|suncoastsoftware|LINK
ok...that makes sense...the problem is there will be 16 submit button because I have the cards being generated inside a foreach loop. here is what I am trying to do.
I am trying to collect user picks for a football pool...so when the page loads it creates a card with the away team name and the home team name..each has a check box so the user can select which team they pick. once all the check boxes are selected the form can be submitted with the (one) submit button which is outside the form right now....like I said earlier if I put the submit button inside the form it will generate 16 buttons which is no good. because as soon as I check the first checkbox and click the button the form is submitted.......is there no other way besides javascript to do what I am trying to do? if not can you provide a sample of the javascript that will do what I need to do?
thank you for you time!
All-Star
52261 Points
23315 Posts
Re: submitting a form
Sep 19, 2019 10:04 PM|mgebhard|LINK
Just craft a single form with 16 rows. Each row has a 2 radio buttons where the value is the team name and the name is the game number 1-16.
Member
1 Points
6 Posts
Re: submitting a form
Sep 19, 2019 11:14 PM|suncoastsoftware|LINK
ahhh very cool...I took your suggestion and it worked...one other thing I did was change the button..I originally had the button in a "a" tag I changed it to an "input" tag
both seemed to fix the problem
thank you very much for your help!