0

Good afternoon programmers! Excuse me I’m trying to change the color and the text of a button of my problem is as follows:

In a view several courses are displayed, when you click on the preregister button of some of them shows me a modal and inside this a form that is in a partial view, when you click OK you must change the color to blue and the text to "Cancel" of the General view. How could I do this?

Here is my foreach button found in the overview:

<button type="button" class="boton botonUno btnPreinscribir"id="myButtonChangeF" value="Preinscribirse" title="Preinscribirse" data-url="@Url.Action("PreinscripcionNumCurso","Inicio")" data-id="@ingles.Num" data-toggle="modal" data-backdrop="static">Preinscribir</button>

This is my form that’s in the partial view:

@model MultipleViewModel
@{
    Layout = null;
}
@Html.ValidationSummary(true)
<link rel="stylesheet" href="~/css/VentanasParciales.css">
<link rel="stylesheet" href="~/css/FormStyle.css">

<!-- Modal Preinscripción-->

<form class="formulario" asp-controller="Inicio" asp-action="Editar"  id="Editarform">
    <fieldset>
        <legend>Preinscripción</legend>
        <p class="estilo">_____________________________</p>

        <P class="estilo">
            ¿Esta seguro de preincribirte al curso de @Model.Curso.NombreCurso? @Model.Curso.Num 
        </P>
        <p class="estilo">_____________________________</p>
        <br />
    </fieldset>

    <div class="modal-footer">
        <button type="button" class="btn btn-secondary text-white" data-bs-dismiss="modal">Cancelar</button>
        <button  type="submit" class="btn btnBgColor text-white">Aceptar</button>

    </div>
 
</form>

And these are the functions I use in Javascript to make color and text changes.

function myFunction2() {

    var btn = document.getElementById("myButtonChangeF");

    if (btn.value == "Preinscribirse") {
        btn.value = "Anular";
        btn.innerHTML = "Anular";
        btn.setAttribute("style", "background: linear-gradient(135deg, #24309d, #96989A);");


    }
    else {
        btn.value = "Preinscribirse";
        btn.innerHTML = "Preinscribirse";
        btn.setAttribute("style", "background: linear-gradient(135deg, #9d2449, #96989A);");
    }
}

I’d appreciate your support!

1 Answers1

0

Struggling to find what you are stuck on here... In order to store which courses the user has enrolled in you are going to need local storage in your javascript.

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30