Debería comenzar diciendo que soy muy nuevo en la programación del lado del servidor. Estoy tratando de obtener un valor en su cambio usando AJAX.
Mi código AJAX (ajaxCode.php)
$(document).ready(function() { $('select[name="selectBox"]').change(function(){ var value = $(this).val(); $.ajax({ type: 'POST', url: 'calculator.php', data: {valueChange: value }, dataType: 'html' }); alert(value ); }); });Mi código HTML con el cuadro de selección (calculator.php)
<select name ="selectBox"> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> <?php $status = $_POST['changeStatus']; echo $status; ?>Esto no parece funcionar. El estado alertará pero no se repetirá. ¿Qué estoy haciendo mal? ¿Gracias por adelantado?
Probablemente desee enviar el valor del cuadro seleccionado a través de ajax y luego cambiar el estado que obtiene de ajax.
Sitio del servidor: calculadora.php
Lado del cliente:
<script> $(document).ready(function() { $('select[name="selectBox"]').change(function(){ var value = $(this).val(); $.ajax({ type: 'POST', url: 'calculator.php', data: {valueChange: value }, dataType: 'html' }).done(function(response){ $('.response-holder').html(response); }); }); }); </script> <select name ="selectBox"> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> <div class="response-holder"></div>Esto funciona bien:
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(document).on("change", ".selectBox", function(){ var v = $(this).val(); $.post( "ajax.php", { changeStatus: v , time: "123" }, function( data ) { alert("From file: " +data); }); }); }); </script> </head> <body> <select name ="selectBox" class="selectBox"> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> </body> </html>y ajax.php
<?php $status = $_POST['changeStatus']; echo $status; ?>El código que recibe la llamada ajax debe estar en su propio archivo y mostrar solo lo que necesita recuperar, no todo el contenido con el que comenzó. Por ejemplo, simplemente haga eco del estado.
Digamos que este es tu HTML
<select name ="selectBox"> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> <script> $(document).ready(function() { $('select[name="selectBox"]').change(function(){ var value = $(this).val(); $.ajax({ type: 'POST', url: 'calculator.php', data: {valueChange: value }, dataType: 'html' }); alert(value ); }); }); <script>Entonces esta podría ser tu calculadora.php
<?php $status = $_POST['changeStatus']; echo $status; ?>Pero, de nuevo, estás haciendo una llamada ajax y no estás haciendo nada con su respuesta. Para recibir que la calculadora.php está respondiendo, podrías hacer
<select name ="selectBox"> <option value="1">Value 1</option> <option value="2">Value 2</option> <option value="3">Value 3</option> </select> <div id="response"></div> <script> $(document).ready(function() { $('select[name="selectBox"]').change(function(){ var value = $(this).val(); $.ajax({ type: 'POST', url: 'calculator.php', data: {valueChange: value }, dataType: 'html' }).then(function(response) { jQuery('#response').html('Ajax answered: '+response); }); alert(value ); }); }); <script>