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);    
        }    
    }

Answer 1

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.