0

Estoy haciendo un formulario de pedidos, en el que incluyo un botón que dice: "Añadir Adicionales", que despliega un "Modal", al rellenarse estos campos, un botón que dice, añadir al pedido.

Lo que intento, es que al añadir al pedido los datos establecidos, eliminar el DIV con el botón, y añadir otro DIV con los datos rellenados en forma de tabla.

No consigo hacer funcionar esta parte, agradecería ayuda. Este es mi jquery:

  $('#addAdicionales').click(function(){
var prismaOD = $('#prismaOD').val()
var posicion_prismaOD = $('#posicion_prismaOD').val()
var prismaOI = $('#prismaOI').val()
var posicion_prismaOI = $('#posicion_prismaOI').val()

var angulo_facial = $('#angulo_facial').val()
var angulo_panto = $('#angulo_panto').val()
var vertice = $('#vertice').val()
var lifestyle_select = $('#lifestyle_select').val()

$.ajax({
  type: 'POST',
  url: 'php/cargar_adicionales.php',
  data: {'prismaOD': prismaOD,
         'posicion_prismaOD': posicion_prismaOD,
         'prismaOI': prismaOI
         'posicion_prismaOI': posicion_prismaOI,
         'angulo_facial': angulo_facial,
         'angulo_panto': angulo_panto,
         'vertice': vertice,
         'lifestyle_select': lifestyle_select}
})
.done(function(listas_rep){
  $('#parametros_add_section').addClass("hide");
  $('#parametros_set_section').removeClass("hide");
  $('#parametros_set_section').html(listas_rep)

})
.fail(function(){
  alert('Hubo un errror al cargar los adicionales')
})

})

Añadir, que las var, hacen referencia a los campos.

Este es el PHP:

function setAdicionales(){

  $prismaOD = $_POST['prismaOD'];
  $posicion_prismaOD = $_POST['posicion_prismaOD'];
  $prismaOI = $_POST['prismaOI'];
  $posicion_prismaOI = $_POST['posicion_prismaOI'];
  $angulo_facial = $_POST['angulo_facial'];
  $angulo_panto = $_POST['angulo_panto'];
  $vertice = $_POST['vertice'];
  $lifestyle_select = $_POST['lifestyle_select'];

  return $prismaOD;
}

echo setAdicionales();

En el return, he probado $prismaOD, por ver si devuelve algo, el problema, que al añadir este código, me rompe casi todo el resto de código de jQuery.

Creo que me he explicado lo mejor posible, cualquier duda podéis preguntar en los comentarios, agradecería mucho una ayuda.

Gracias.

4
  • Coloca un div con display:none; y dentro los datos (sin rellenar) una vez se rellenen los datos cambia display a block y cambia los value de los datos (muy fácil con jquery) el 20 ago. 2018 a las 15:56
  • Entonces, ni si quiera haría falta utilizar PHP, no? el 20 ago. 2018 a las 16:42
  • $('#prismaOI').val($variable) el 20 ago. 2018 a las 16:44
  • No me funciona así el 20 ago. 2018 a las 16:57

1 respuesta 1

1

$("#enviar").on("click", function(){
  var nombre = $("#fname").val();
  var apellido = $("#lname").val();
  $("#modal").hide();
  $("#nombre").val(nombre);
  $("#apellido").val(apellido);
  $("#datos").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="modal">
  <input type="text" id="fname" value="nombre">
  <input type="text" id="lname" value="apellido">
  <input type="button" id="enviar" value="Enviar">
</div>

<p>Div display none:</p>
<div id="datos" style="display: none;">
  Nombre: <input type="text" id="nombre" value="" disabled>
  Apellido: <input type="text" id="apellido" value="" disabled>
</div>

Espero esto sea lo que buscabas, cualquier cosa puedes comentar

5
  • Está genial, esto si me funciona, pero como es posible, que si los meto en una tabla asi: el 20 ago. 2018 a las 17:41
  • <table style="width:100%"> <tr> <th>Potencia OD</th> <th>Posición OD</th> <th>Potencia OI</th> <th>Posición OI</th> </tr> <tr> <td><input type="text" id="priOD" value=""></td> <td><input type="text" id="posPriOD" value=""></td> <td><input type="text" id="priOI" value=""></td> <td><input type="text" id="posPriOI" value=""></td> </tr> </table> el 20 ago. 2018 a las 17:41
  • No me funcionen el 20 ago. 2018 a las 17:41
  • Okey, si me FUNCIONAN! Era problema de CSS, Mil gracias Andy! el 20 ago. 2018 a las 17:42
  • Un gusto que te haya servido :) el 20 ago. 2018 a las 17:47

Tu Respuesta

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

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