Form in two steps, Show real-time image between Fields needs and Contact fields and Submit

1

I am putting together a form, with details on preferences that determine a recommended product, that is already defined when completing the first form fields, and I would like it to be resolved when these fields are completed showing a picture of the recommended product, in real time , (according to the selections that have been made) without the need to press any button, and then more contact fields and the Submit / send form.

Thanks, Greetings

create a file here.
link

<form>
<div>
<p>Manten presionada la tecla Ctrl (windows) / Command (Mac) para seleccionar mas de una opcion.</p>
<select multiple>
<option value="Opcion1">Opcion1</option>
<option value="Opcion2">Opcion2</option>
<option value="Opcion3">Opcion3</option>
<option value="Opcion4">Opcion4</option>
<option value="Opcion5">Opcion5</option>
</select>
</div>

<div class="row"></div>

<fieldset>
<div>

<legend>Elige una Opcion</legend>

        <div>
        <input type="radio" id="Opcion1" name="Opcion1" checked /><label for="Opcion1">Opcion1</label>
        <input type="radio" id="Opcion2" name="Opcion2" /><label for="Opcion2">Opcion2</label>
        <input type="radio" id="OPcion3" name="OPcion3" /><label for="OPcion3">OPcion3</label>
    </div>
</div>
</fieldset>
<div class="row"></div>   
<fieldset>
<legend>Elige un caso</legend>

        <div>
        <input type="radio" id="Caso1" name="Caso1" checked />
        <label for="Caso1">Caso1</label>
        <input type="radio" id="Caso2" name="Caso2" />
        <label for="Caso2">Caso2</label>
        <input type="radio" id="Caso3" name="Caso3" />
        <label for="Caso3">Caso3</label>
    </div>

</fieldset>

<fieldset>
    <legend>Elige una Situacion</legend>

    <div>
        <input type="radio" id="Situacion1" name="Situacion1" checked />
        <label for="Situacion1">Situacion1</label>
        <input type="radio" id="Situacion2" name="Situacion2" />
        <label for="Situacion2">Situacion2</label>
        <input type="radio" id="Situacion3" name="Situacion3" />
        <label for="Situacion3">Situacion3</label>
    </div>

</fieldset>

<p>Nuestra recomendacion para usted es:  Aqui Quiero que aparezca una imagen del producto. Lo ideal seria que que fuera en tiempo real , sin necesidad de accionar un boton, como respuesta por completar los campos: </p><br>

Once you saw the product The form is completed with the contact information and other necessary and proceeds to send with the information

<div class="row">
  <p> Los siguientes datos son necesarios para cotizarle:</p>

<div class="col-lg-6 col-md-6 col-xs-12 text-center form-style-10">
<div class="row">
<div class="section"><span>2</span>Flota</div>
<div class="row">
<div class="row">
<li class="col-md-4 col-sm-4 col-xs-4" ><span>Coches<span><select/><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>
<li class="col-md-4 col-sm-4 col-xs-4" >
<span>barcos<span>
<select/>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>                
</select>
<div class="row">
<li class="col-md-4 col-sm-4 col-xs-4" ><span>Motos<span><select/><option value="1">1</option><option value="2">2</option><option value="3">3</option>    <option value="4">4</option><option value="5">5</option></select>

<fieldset>
<legend>Tipo de Factura</legend>

    <div>
<input type="radio" id="facturaA" name="facturaA" checked />
<label for="facturaA">facturaA</label>
    </div>

    <div>
<input type="radio" id="facturaB" name="facturaB" />
<label for="facturaB">facturaB</label>
    </div>

    <div>
        <input type="radio" id="facturaC" name="facturaC" />
        <label for="facturaC">facturaC</label>
    </div>

</fieldset>

<div class="row">
<div class="inner-wrap">
<div class="section"><span>2</span>datos de contacto</div>
<div class="inner-wrap">
    <label>Nombre<input type="text" name="nombre" /></label>
    <label>Telefono<input type="phone" name="telefono" /></label>
    <label>email<input type="email" name="email" /></label>
</div>


</div>


<div class="row ">
<div id="error" style="text-align:center"></div>

<div class="col-lg-12"><button class="btn btn-submit" name="submitform" style="background-color: rgba(100, 100, 100, 0.0);" type="submit">        <label>enviar</label></button></div>
</div>
</form>
    
asked by Hernan527 22.08.2018 в 19:18
source

0 answers