1

Estoy intentando mostrar este sweetalert en cuanto se pulsa un botón, pero no sé por qué, haciéndolo desde un echo no funciona pero sí en un archivo javascript.

Me gustaría que mostrase dentro del sweetalert una cadena PHP pero es que en javascript no puedo hacerlo, es por eso que necesito hacerlo si o si con php, pero el echo no me funciona, por favor si alguien sabe que me ayude.

<?php
        if ($_POST['input2'])
            echo '
            <script type="text/javascript">
            Swal.fire({
                html:
                  "<form id="app-cover">" +
                  "<div id="select-box">" +
                  "<input type="checkbox" id="options-view-button">" +
                  "<div id="select-button" class="brd">" +
                  "<div id="selected-value">" +
                  "<span> $lang </span>" +
                  "</div>" +
                  "<div id="chevrons">" +
                  "<i class="fa fa-chevron-up"></i>" +
                  "<i class="fa fa-chevron-down"></i>" +
                  "</div>" +
                  "</div>" +
                  "<div id="options">" +
                  "<div class="option">" +
                  "<input class="s-c top" type="radio" name="platform" value="Spanish">" +
                  "<input class="s-c bottom" type="radio" name="platform" value="Spanish">" +
                  "<span class="label"><img style="margin-right: 3px;position: relative;left: -100px;" src="landing/assets/images/icons/spanish.png" width="20" alt="Spanish"><span style="position:relative;left:-93px;top:1.2px;">Español</span></span>" +
                  "<span class="opt-val"><img style="margin-right: 3px;position: relative;left: -70px;" src="landing/assets/images/icons/spanish.png" width="20" alt="Spanish"><span style="position:relative;left:-63px;top:1.4px;">Español</span></span>" +
                  "</div>" +
                  "<div class="option">" +
                  "<input class="s-c top" type="radio" name="platform" value="English">" +
                  "<input class="s-c bottom" type="radio" name="platform" value="English">" +
                  "<a href="https://en.worksible.com"><span class="label"><img style="margin-right: 3px;position: relative;left: -100px;" src="landing/assets/images/icons/english.png" width="20" alt="English"><span style="position:relative;left:-93px;top:1.2px;">English</span></span></a>" +
                  "<span class="opt-val"><img style="margin-right: 3px;position: relative;left: -70px;" src="landing/assets/images/icons/english.png" width="20" alt="English"><span style="position:relative;left:-63px;top:1.4px;">English</span></span>" +
                  "</div>" +
                  "<div id="option-bg"></div>" +
                  "</div>" +
                  "</div>" +
                  "</form>" ,
                showCloseButton: true,
                focusConfirm: false,
                showCancelButton: false,
                customClass: "swal-height",
                showConfirmButton: false
              })
              
       </script>';
        ?>

Gracias.

1
  • 1
    Hola, bienvenido a la comunidad. Te invito a hacer el recorrido y leer ¿cómo preguntar? para que tu pregunta sea bien recibida por parte de la comunidad. Además, para poder reproducir tu problema y encontrar una solución fácilmente nos sería de gran ayuda un ejemplo mínimo, completo y verificable. Dicho esto, ese código se va a ejecutar una única vez cuando el intérprete de PHP pase por él, no más. Commented el 19 jun. 2020 a las 12:32

2 respuestas 2

0

Te aconsejo que no concatenes de esa manera cadenas ni uses echo para enviar HTML al navegador. Simplemente sal de PHP con ?>, escribes el HTML, y luego vuelves a abrir PHP con <?php:

<?php if (empty($_POST['input2']) === false): ?>
    <script LANGUAGE="javascript">
        Swal.fire({
            html: `<form id="app-cover">
              <div id="select-box">
              <input type="checkbox" id="options-view-button">
              <div id="select-button" class="brd">
              <div id="selected-value">
              <span><?= htmlspecialchars($lang) ?></span>
              </div>
              <div id="chevrons">
              <i class="fa fa-chevron-up"></i>
              <i class="fa fa-chevron-down"></i>
              </div>
              </div>
              <div id="options">
              <div class="option">
              <input class="s-c top" type="radio" name="platform" value="Spanish">
              <input class="s-c bottom" type="radio" name="platform" value="Spanish">
              <span class="label"><img style="margin-right: 3px;position: relative;left: -100px;" src="landing/assets/images/icons/spanish.png" width="20" alt="Spanish"><span style="position:relative;left:-93px;top:1.2px;">Español</span></span>
              <span class="opt-val"><img style="margin-right: 3px;position: relative;left: -70px;" src="landing/assets/images/icons/spanish.png" width="20" alt="Spanish"><span style="position:relative;left:-63px;top:1.4px;">Español</span></span>
              </div>
              <div class="option">
              <input class="s-c top" type="radio" name="platform" value="English">
              <input class="s-c bottom" type="radio" name="platform" value="English">
              <a href="https://en.worksible.com"><span class="label"><img style="margin-right: 3px;position: relative;left: -100px;" src="landing/assets/images/icons/english.png" width="20" alt="English"><span style="position:relative;left:-93px;top:1.2px;">English</span></span></a>
              <span class="opt-val"><img style="margin-right: 3px;position: relative;left: -70px;" src="landing/assets/images/icons/english.png" width="20" alt="English"><span style="position:relative;left:-63px;top:1.4px;">English</span></span>
              </div>
              <div id="option-bg"></div>
              </div>
              </div>
              </form>
              `,
            showCloseButton: true,
            focusConfirm: false,
            showCancelButton: false,
            customClass: 'swal-height',
            showConfirmButton: false
          })
   </script>
<?php endif; ?>

De esta manera no tendrás problemas con las comillas sencillas ('...'), dobles ("...") o invertidas (``).


Además, como puedes ver, el formato alternativo de if (sin llaves) facilita integrar el código condicional dentro del HTML.

Formato habitual de if:

if (condicion) {
  verdadero;
} else {
  falso;
}

Formato alternativo de if:

if (conficion):
  verdadero;
else:
  falso;
endif;

Puedes ver más información acerca de los formatos alternativos de las estructuras de control en la documentación de PHP:


Además, he agregado el siguiente código para enviar la cadena de PHP:

<?= htmlspecialchars($lang) ?>

Es importante que todo dato del que no tengas control (almacenado en una base de datos, enviado por un formulario, etc) sea escapado su contenido HTML antes de ser enviado al navegador para evitar problemas de seguridad (XSS).

4
  • 1
    Muchas gracias, me ha servido y funciona perfectamente, además es mas claro y seguro que lo que había hecho yo. Commented el 19 jun. 2020 a las 13:00
  • Me alegra haber sido de ayuda. Commented el 19 jun. 2020 a las 13:02
  • Y te entiendo, yo también tuve una época en la que hacía este tipo de cosas (poner cadenas entre comillas dobles y usar en su interior solo comillas sencillas, etc), pero una vez que aprendes la manera correcta todo es más sencillo ;) Commented el 19 jun. 2020 a las 13:03
  • 1
    Muchas gracias Oscar, empezaré a hacerlo de esta manera que me parece mucho mejor. Te lo agradezco de veras! Commented el 19 jun. 2020 a las 13:56
0

Vale, he conseguido hacerlo, el problema es que dentro del html del Sweetalert tenía que poner ` en vez de ', además de quitar las '' que tenía cada línea, espero que esto pueda ayudar a alguien, porque llevo sin saber como se hacía 2 días.


        <?php
        if ($_POST['input2'])
            echo " <script LANGUAGE='javascript'>
            Swal.fire({
                html: `<form id='app-cover'>
                  <div id='select-box'>
                  <input type='checkbox' id='options-view-button'>
                  <div id='select-button' class='brd'>
                  <div id='selected-value'>
                  <span> $lang </span>
                  </div>
                  <div id='chevrons'>
                  <i class='fa fa-chevron-up'></i>
                  <i class='fa fa-chevron-down'></i>
                  </div>
                  </div>
                  <div id='options'>
                  <div class='option'>
                  <input class='s-c top' type='radio' name='platform' value='Spanish'>
                  <input class='s-c bottom' type='radio' name='platform' value='Spanish'>
                  <span class='label'><img style='margin-right: 3px;position: relative;left: -100px;' src='landing/assets/images/icons/spanish.png' width='20' alt='Spanish'><span style='position:relative;left:-93px;top:1.2px;'>Español</span></span>
                  <span class='opt-val'><img style='margin-right: 3px;position: relative;left: -70px;' src='landing/assets/images/icons/spanish.png' width='20' alt='Spanish'><span style='position:relative;left:-63px;top:1.4px;'>Español</span></span>
                  </div>
                  <div class='option'>
                  <input class='s-c top' type='radio' name='platform' value='English'>
                  <input class='s-c bottom' type='radio' name='platform' value='English'>
                  <a href='https://en.worksible.com'><span class='label'><img style='margin-right: 3px;position: relative;left: -100px;' src='landing/assets/images/icons/english.png' width='20' alt='English'><span style='position:relative;left:-93px;top:1.2px;'>English</span></span></a>
                  <span class='opt-val'><img style='margin-right: 3px;position: relative;left: -70px;' src='landing/assets/images/icons/english.png' width='20' alt='English'><span style='position:relative;left:-63px;top:1.4px;'>English</span></span>
                  </div>
                  <div id='option-bg'></div>
                  </div>
                  </div>
                  </form>
                  `,
                showCloseButton: true,
                focusConfirm: false,
                showCancelButton: false,
                customClass: 'swal-height',
                showConfirmButton: false
              })
       </script>";
        ?> 

´´´
1
  • Ya he terminado la respuesta, espero que te ayude a hacerlo de una manera mucho más sencilla y fácil de mantener. Commented el 19 jun. 2020 a las 12:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.