How do i change my HTML page with a form?

Question

I will explain my problem, I have an HTML page "index" with many buttons (all Href linked to other sites), I would like to create a form which writes alone the basic code.

I think an example would explain better, this form is for non-developer, 3 input (name, href, picture) and when you use the form, it updates the index page with a new button who is already linked to the other website.

I was thinking about creating many buttons with display: none, and update these buttons. Or having a script already written who could be filled.

I want these new buttons to stay even if you refresh the page.

My index looks like this:

@{
ViewData["Title"] = "Index";
}

<div style="background-image: url('img/LOGOFIVES.jpg');">
    <div class="text-center">
        <h5 class="my-4">Bienvenue sur le portail Fives.</h5>
        <div class="row m-4">
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
                <a asp-controller="Order" asp-action="Index" class="btn btn-lg btn-primary btn-block">Ordres</a>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
                <a asp-controller="Article" asp-action="Index" class="btn btn-lg btn-primary btn-block">Articles</a>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
                <a href="http://eclqualios/" class="btn btn-lg btn-primary btn-block">Portail Qualios</a>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
                <a href="https://fioriprd.global.fivesgroup.com:44300/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html" class="btn btn-lg btn-primary btn-block">Saphir</a>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
                <a href="http://eclnet/md/" class="btn btn-lg btn-primary btn-block">Base Qualité</a>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2" onclick="alert([message?: veuillez utiliser Internet Explorer pour utiliser Chronogestor sans problème])">
                <a href="http://chronogestor/salaries/" class="btn btn-lg btn-primary btn-block">Chronogestor</a>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
                <a href="http://eclnet/" class="btn btn-lg btn-primary btn-block">Intranet Fives ECL</a>
            </div>
            <div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
                <a href="https://portal.fivesgroup.com/" class="btn btn-lg btn-primary btn-block">Portail Fives</a>
            </div>
        </div>
    </div>
</div>

Answer 1

If you want other people to see these newly added links/buttons, you have to use some back end language (PHP for example) and a database to store these links. To my knowledge, you can't update the HTML code without any back-end language or server-side apps but if you can, it's neither practical nor commonly used.

What you want is not too complicated so some basic knowledge of a back-end language should be enough.

Good luck!

PS If what you mean is to just update those buttons for the current user until they refresh the page, that's a whole different story and you can just accomplish that with JavaScript.

Answer 2

if you want too change the view just for the user you can do this with java script using this function

function add_button(text, href){
    let b = document.createElement("a");
    let t = document.createTextNode(text);
    b.appendChild(t);
    b.setAttribute("href", href)
    let element = document.getElementById("div");
    element.appendChild(b);
}

and just call it from the submit button in the form