Show result html and php

0

Hello I have a problem with the following code because it shows me a result of zero I do not know why it does not read the function of the php, they would be so kind to tell me what I'm doing wrong, thank you very much.

<script src="jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
	

	$( document ).ready(function() 
	{
       
		$("#boton_calcular").click(function()
		{
			$.post("procesa_T3.php",
			{
				// Pedir que capture los valores
				N1: $("#N1C").val(),
				N2: $("#N2C").val(),
				E1: $("#E1C").val(),
				E2: $("#E2C").val(),

			},
			function(data, status){
				console.log("Datos recibidos: " + data + "\nStatus: " + status);
				if(status=='success')
				{
					$("#caja_resultado").html( data );
				}
			});
			
		});
	
    });
	
	
	
	
	
	</script>
<?php 

	//Capturo parametros procedentes de T3.html
	$N1C = $_POST['N1C'];
	$N2C = $_POST['N2C'];
	$E1C = $_POST['E1C'];
	$E2C = $_POST['E2C'];


	
	//Calculo la distancia entre los puntos
	function distance($x1, $x2, $e1, $e2)
{
		$resultado = ( (abs($x1)) + (abs($x2)) + (abs($e1)) + (abs($e2)));
     return $resultado;
}

	
	//Calculo las coordenadas de el punto
		$valor_devuelto = distance($N1C,$N2C,$E1C,$E2C);
	
	echo 'Coordenadas calculadas : <b>'. $valor_devuelto . '</b>';


?>
<body>


N1 <input type="text" id="N1C" value="45"> </input>
E1 <input type="text" id="E1C" value="4"> </input>


<br>
N2<input type="text" id="N2C" value="7"></input>
E2<input type="text" id="E2C" value="88"> </input>

<br><br>

<button id="boton_calcular"> Calcular Distancia Euclidiana</button> <br> <br>

<br><br>

<div id="caja_resultado"> </div>

  
</body>
</html>  
 <script src="jquery-1.12.3.min.js"></script>
    <script type="text/javascript">


    $( document ).ready(function() 
    {

        $("#boton_calcular").click(function()
        {
            $.post("procesa_T3.php",
            {
                // Pedir que capture los valores
                N1: $("#N1C").val(),
                N2: $("#N2C").val(),
                E1: $("#E1C").val(),
                E2: $("#E2C").val(),

            },
            function(data, status){
                console.log("Datos recibidos: " + data + "\nStatus: " + status);
                if(status=='success')
                {
                    $("#caja_resultado").html( data );
                }
            });

        });

    });





    </script>
<body>


N1 <input type="text" id="N1C" value="45"> </input>
E1 <input type="text" id="E1C" value="4"> </input>


<br>
N2<input type="text" id="N2C" value="7"></input>
E2<input type="text" id="E2C" value="88"> </input>

<br><br>

<button id="boton_calcular"> Calcular Distancia Euclidiana</button> <br> <br>

<br><br>

<div id="caja_resultado"> </div>


</body>
</html>     
    
asked by JS28 16.09.2016 в 17:54
source

2 answers

0

Friend, I see that there is an inconsistency in the php file.

So you have it:

...
$N1C = $_POST['N1C'];
$N2C = $_POST['N2C'];
$E1C = $_POST['E1C'];
$E2C = $_POST['E2C'];
...

And it should be like this:

...
$N1C = $_POST['N1'];
$N2C = $_POST['N2'];
$E1C = $_POST['E1'];
$E2C = $_POST['E2'];
...

If you notice, in the jquery you are sending the data with that variable name (N1, N2, E1, E2)

I hope you serve

    
answered by 16.09.2016 / 22:21
source
0

I think you can very well build on this to see what happens with your jQuery.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.post demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<form action="/" id="searchForm">
  <input type="text" name="s" placeholder="Search...">
  <input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>

<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {

  // Stop form from submitting normally
  event.preventDefault();

  // Get some values from elements on the page:
  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );

  // Send the data using post
  var posting = $.post( url, { s: term } );

  // Put the results in a div
  posting.done(function( data ) {
    var content = $( data ).find( "#content" );
    $( "#result" ).empty().append( content );
  });
});
</script>

</body>
</html>
    
answered by 16.09.2016 в 18:11