submitting a form

Question

User1496614124 posted

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

Answer 1

User475983607 posted

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 

<input id="awayPick" type="checkbox" name="teams" value="@item.AwayTeam" /> 

Answer 2

User1496614124 posted

ahhh ok...I will give that a try..thank you for your quick reply!

Answer 3

User1496614124 posted

I tried changing the name to "teams" for both but still not submitting the team names

Answer 4

User475983607 posted

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"
}

Answer 5

User1496614124 posted

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?

Answer 6

User475983607 posted
The submit button must be in the form with the other inputs. Otherwise, you must write JavaScript to submit the values.

Answer 7

User1496614124 posted

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!

Answer 8

User475983607 posted

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.

Answer 9

User1496614124 posted

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!