Change text dynamically when sending a modal modal bootstrap

Question

Change text dynamically when sending a modal modal bootstrap

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Modal-Misspass

I have this modal which is where users reset passwords. And I would like that after putting your mail and pressing reset, the text changes dynamically and says "we have sent an email to your email". I guess it's with parent and javascript but the truth is I'm a bit lost. Can someone give me a hand?

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <h2 class="modal-title" style="display:block">Restablecer Contraseña</h2>
</div>
  <div class="modal-body">
    <div id="user_recovery" style='display:block'>
      <form action="misspass.php" method="POST">
              <?php if(!empty($errores)) {?>
              <div id="errores">
                <ul id="errorno">
                    <?php foreach ($errores as $error){?>
                      <li>
                      <?php echo $error;?>
                    </li>
                </ul>
                <?php  }}?>
            </div>
            <div>
                <p>Introduce tu correo electrónico y te enviaremos un enlace para restablecer tu contraseña.</p>
              <label for="inputEmail" class="sr-only">Email</label>
              <input type="text" name="mail" id="mail" class="form-control" placeholder="Email" autofocus="">
                  <button type="submit" id='botonregistrarse'class="btn btn-lg btn-primary btn-block">Restablecer contraseña</button>
            </div>
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#user_login">Volver</button>
      <button type="submit" name="submit" class="btn btn-default" data-dismiss="modal">Cerrar</button>
    </div>

javascript html modal

asked by Infraganti 24.10.2016 в 03:44

source

3 answers

reports c # and postrgres How to create a custom header with TCPDF?

score 1 · Answer 1

You have to make use of the onsubmit event as follows:

<form action="misspass.php" method="POST" onsubmit="cambiarTexto()">

And then, you make the script (using Jquery) with this function, as you do not clarify the text of what element you want to change, I write down the three that I imagine:

<script>
     function cambiarTexto() {
         $('#mail').val("le hemos enviado un mail a su correo"); // Si es que querés cambiar el valor del input
         $('#botonregistrarse').html("le hemos enviado un mail a su correo"); // Si es que querés informar a través del button
         $('p').html("le hemos enviado un mail a su correo"); // Si es que querés informar a través del <p>, CUIDADO, modificaría todos los <p>
     }
</script>

Edit:

With the onchange event you will not notice the change because it will modify the text and will immediately submit, so it will change the page. To notice the changes you could make an AJAX that sends the things, in this way the text is edited and the submit is done without the need to refresh the page. Or you could do a submit to the same page and use PHP to analyze if the message was sent then execute the script.

I hope it was clearer. Greetings!

score 0 · Answer 2

0

You could use jquery the change event because of time issues I can not exactly specify the method

Greetings

answered by 24.10.2016 в 17:37

score 0 · Answer 3

Depends on the speed of the program, I explain:

1) If your program is fast, what I would do is an onclick to check if it has an internet connection, then you run your php program and finally you launch an alert saying whatever you want: if (navigator.onLine == true) {program.php; alert ('aaa')} else {alert ('Check your Internet connection')} 2) Your program is not fast, that is, it takes 10 seconds to execute. The reality I do not know php but what I do in the language that I usually program is to launch a return from the program on the server side (php in your case) with the message you want and you collect it from javascript. It would be something like that for what I program, which I imagine you can extrapolate to php: function CambioContrasena () { .... return 'Password changed' } And in javascript I pick up that return in an alert.