0

Estoy tratando de hacer una vista previa de formulario.

La idea es crear una capa que muestre la información del usuario impresa en un div por defecto, pero con la posibilidad de modificar sus datos en tiempo real y mostrarlos en el recuadro.

Mi código funciona, pero no sé cómo simplificarlo.

Aquí está mi código:

$(document).ready(function() {
    $('#previewName').html($('#Name').val());
    $('#Name').keyup(function () {
        $('#previewName').html($(this).val());
    });
    $('#previewDirection').html($('#Direction').val());
    $('#Direction').keyup(function () {
        $('#previewDirection').html($(this).val());
    });
    $('#previewPostal').html($('#Postal').val());
    $('#Postal').keyup(function () {
        $('#previewPostal').html($(this).val());
    });
    $('#previewCountry').html($('#Country option:selected').text());
    $('#Country option:selected').change(function () {
        $('#previewCountry').text($(this).text());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
    <div>
        <div>
            <label>Name</label>
            <input type="text" id="Name" name="Name" value="">
        </div>

        <div>
            <label>Direction</label>
            <input type="text" id="Direction" name="Direction">
        </div>

        <div>
            <label>Postal</label>
            <input type="text" id="Postal" name="Postal">
        </div>

        <div>
            <label>Country</label>
            <div>
                <select name="Country" id="Country">
                    <option value="">Country</option>
                </select>
            </div>
        </div>
    </div>
    <div>
        <div class="box">
            <p class="strong" id="previewName"></p>
            <p class="mb0" id="previewDirection"></p>
            <p id="previewPostal"></p>
            <p id="previewCountry"></p>
        </div>
    </div>
</form>

Alguna idea?

2 respuestas 2

1

Puedes optimizar el código javascript para hacerlo reutilizable, es decir, si modificas tu código html no necesariamente tendrás que modificar tu código javascript.

Aqui te dejo un ejemplo de cómo hacerlo:

$(document).ready(function() {
 var $el = $('input, select');
 $el.each(function(){ preview($(this)); });
 $el.on('keyup change', function(){ preview($(this)); });
});
function preview($el) {
 $('#preview'+$el.attr('name')).html(
  $el.is('select') ? $el.find(':selected').text() : $el.val()
 );
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
    <div>
        <div>
            <label>Name</label>
            <input type="text" id="Name" name="Name" value="Name">
        </div>

        <div>
            <label>Direction</label>
            <input type="text" id="Direction" name="Direction">
        </div>

        <div>
            <label>Postal</label>
            <input type="text" id="Postal" name="Postal">
        </div>

        <div>
            <label>Country</label>
            <div>
                <select name="Country" id="Country">
                    <option value="">Country</option>
                    <option value="">Country 2</option>
                </select>
            </div>
        </div>
    </div>
    <div>
        <div class="box">
            <p class="strong" id="previewName"></p>
            <p class="mb0" id="previewDirection"></p>
            <p id="previewPostal"></p>
            <p id="previewCountry"></p>
        </div>
    </div>
</form>

Espero te sirva ;))...

0

una opción:

(si le pones value a los option cambiar el .text() a .val())

$(document).ready(function() {
  var setPreview = function(el) {
    var t = el.is('SELECT') ? el.find(":selected").text() : el.val();
    $('#preview' + el.attr("name")).html(t);
  };
  $('INPUT, SELECT').each(function() {
    setPreview($(this))
  });

  $('INPUT').keyup(function() {
    setPreview($(this))
  });
  
  $('SELECT').on("change", function() {
    setPreview($(this))
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <div>
    <div>
      <label>Name</label>
      <input type="text" id="Name" name="Name" value="asd">
    </div>

    <div>
      <label>Direction</label>
      <input type="text" id="Direction" name="Direction">
    </div>

    <div>
      <label>Postal</label>
      <input type="text" id="Postal" name="Postal">
    </div>

    <div>
      <label>Country</label>
      <div>
        <select name="Country" id="Country">
          <option value="">Country</option>
          <option value="">Otro Country</option>
        </select>
      </div>
    </div>
  </div>
  <div>
    <div class="box">
      <p class="strong" id="previewName"></p>
      <p class="mb0" id="previewDirection"></p>
      <p id="previewPostal"></p>
      <p id="previewCountry"></p>
    </div>
  </div>
</form>


Otra versión sin jQuery y un poco de ES6

(si le pones value a los option cambiar el .text a .value)

document.addEventListener('DOMContentLoaded', function() {
  var setPreview = el => {
    var t = (el.tagName.toLowerCase() == 'select') ? 
        el.options[el.selectedIndex].text : el.value;
    document.getElementById('preview' + el.id).innerHTML = t;
  };

  var form = document.getElementById('form');
  var inputs = form.getElementsByTagName('INPUT');
  var selects = form.getElementsByTagName('SELECT');
  [...inputs].forEach(x => {
    setPreview(x);
    x.oninput = () => setPreview(x)
  });
  [...selects].forEach(x => {
    setPreview(x);
    x.onchange = () => setPreview(x)
  });
});
<form id="form">
  <div>
    <div>
      <label>Name</label>
      <input type="text" id="Name" name="Name" value="asd">
    </div>
    <div>
      <label>Direction</label>
      <input type="text" id="Direction" name="Direction">
    </div>
    <div>
      <label>Postal</label>
      <input type="text" id="Postal" name="Postal">
    </div>
    <div>
      <label>Country</label>
      <div>
        <select name="Country" id="Country">
          <option value="">Country</option>
          <option value="">Otro Country</option>
        </select>
      </div>
    </div>
  </div>
  <div>
    <div class="box">
      <p class="strong" id="previewName"></p>
      <p class="mb0" id="previewDirection"></p>
      <p id="previewPostal"></p>
      <p id="previewCountry"></p>
    </div>
  </div>
</form>

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.