PROBLEM Jquery and Ajax, send data to the same FORM

0

I am making an order form, in which I include a button that says: "Add Additional", that displays a "Modal", when filling in these fields, a button that says, add to the order.

What I try, is that when adding to the order the established data, delete the DIV with the button, and add another DIV with the data filled in a table.

I can not make this part work, I would appreciate help. This is my 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')
})

})

Add, that the var, refer to the fields.

This is the 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();

In the return, I have tried $ prismaOD, to see if it returns something, the problem, that when adding this code, it breaks almost all the rest of the jQuery code.

I think I've explained my best, any questions you can ask in the comments, I would appreciate a help.

Thank you.

    
asked by Javier Avila Fernandez 20.08.2018 в 17:33
source

1 answer

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>

I hope this is what you were looking for, anything you can comment on

    
answered by 20.08.2018 / 19:10
source