Having issues with MVC

Question

I currently have a form that when submit is clicked the selected value should be shown in the textarea/box and initial page should remain open.

But the problem I'm currently having is when I click the submit button, I'm being taken from the initial page and the value is being displayed on a blank page.

So basically I have two issues. How do I prevent being taken to another page once submit is clicked? And how can I get the value to be displayed in the textarea? I'm new to MVC, so any help would be greatly appreciated.

View:

  <script language="JavaScript">
    function showInput() {
        document.getElementById('display').innerHTML =
            document.getElementById("Envs").value;
    }
</script>

<form asp-controller="CyberArk" asp-action="CyberArk" method="post" role="form" onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">
            <div id="accordion" role="tablist" aria-multiselectable="true">

            @* Form 1 *@

            <div class="card">
                <div class="card-header" role="tab" id="headingTwo">
                    <h5 class="mb-0">
                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                            Vault Status
                        </a>
                    </h5>
                </div>
                <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="card-block">
                        <div class="form-group">
                            <div class="form-group">

                                <p>  This script returns status of vault servers for the chosen environment. It is used to determine if any servers overlap in order to detect a split brain.</p>
                            </div>
                            @model PAM_Dashboard_Project.Models.Vaults
                            @Html.DropDownList("Envs", new SelectList(Enum.GetValues(typeof(Envs))), "Select Enivronment", new { @class = "form-control" })
                            <br>
                            <div>
                                <button type="submit"  onclick="showInput();">Submit</button>
                                &nbsp;
                            </div>
                            <br />
                            <textarea class="form-control" cols="20" id="ouput1" name="output1" rows="2"></textarea>
                        </div>                            
                        &nbsp;
                    </div>
                </div>
            </div>
            </div>
        </form>

Model:

    public class Vaults
    {    
        public string Envs { get; set; }
    }    

    public enum Envs
    {
        RTPprod,
        OMA,
        BG1,
        BG2,
        Cloud,
        Workstation,
        QA   
    }

Controller:

    public class CyberArkController : Controller
    {
        public IActionResult CyberArk()
        {
            return View();
        }

        [HttpPost]   
        public string CyberArk(Vaults newVault)
        {
            string SelectedValue = newVault.Envs; 
            return (SelectedValue);    
        }    
    }

This doesn't seem like an ASP.NET MVC issue. It sounds like you're having a Javascript issue, and that code wasn't provided. It sounds like you want `showInput` to prevent the form from being submitted (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) and then show some data in a textarea before submitting the page. — Justin Helgerson, Jul 24 '18 at 17:09
@JustinHelgerson I just added the javascript. But it's a mvc issue because everything I hit submit I'm being taken away from the page and the value is being displayed on a blank page. — BB956, Jul 24 '18 at 17:15
Possible duplicate of [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Heretic Monkey, Jul 24 '18 at 17:22

score 1 · Answer 1 · answered Jul 24 '18 at 17:18

Update your event attribute to:

onclick="showInput(event);"

Update your showInput method to:

function showInput(e) {
   e.preventDefault();
   document.getElementById('display').innerHTML = document.getElementById("Envs").value;
}

Note: You don't have an element with the id display, so you need to fix that.

Having issues with MVC

1 Answers1