Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fsales_123

pré visualização

Por , em Javascript

Recommended Posts

fsales_123    1

fsales_123
Postado

bom eu tenho um site de cadastro, eu queria fazer do lado do cadastro ou um botão de pré visualização para a pessoa ver melhor como está ficando o cadastro dela... algum norte?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Okay, qual a dúvida ?

 

Esse botão pode abrir um modal ou uma outra página. Vc pega as infos do formulário e renderiza nesse outro html.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

<style>
label { display: block; }
</style>
</head>
<body>

<form action="">
  <label>Name: <input type="text" name="name" value="Bruno" /></label>
  <label>Age: <input type="text" name="age" value="26" /></label>
  <label>Language: <input type="text" name="language" value="JavaScript" /></label>
</form>
<div id="preview"></div>

<script type="text/template" id="tpl-preview">
<h1>Form Preview</h1>
<strong>Name:</strong> {name}<br/>
<strong>Age:</strong> {age}<br/>
<strong>Language:</strong> {language}<br/>
</script>

<script>
String.prototype.supplant = function (o) {
  return this.replace(
    /\{([^{}]*)\}/g,
    function (a, b) {
      var r = o[b];
      return typeof r === 'string' || typeof r === 'number' ? r : a;
    }
  );
};
(function(){
  'use strict';
  var $btn = document.getElementById('btn-preview'),
      $preview = document.getElementById('preview'),
      tpl = document.getElementById('tpl-preview').innerHTML,
      $name = document.querySelector('input[name="name"]'),
      $age = document.querySelector('input[name="age"]'),
      $language = document.querySelector('input[name="language"]');

  function render() {
    $preview.innerHTML = tpl.supplant({ name: $name.value, age: $age.value, language: $language.value });
  }

  render();
  $name.addEventListener('keyup', render);
  $age.addEventListener('keyup', render);
  $language.addEventListener('keyup', render);
}());
</script>
</body>
</html>
Funcionando:

http://wbruno.github.io/examples/form-preview/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito