Member Avatar for chaitu11 
<form>
Select Project:*
<select name="project_id" id="project_id" >
<option value="0">Select Project</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>

Select Week*:
<select name="week" id="week_id">
<option value="0">Select Week</option>
<option value="1">This Week</option>
<option value="2">Last Week</option>
<option value="3">2 Weeks back</option>
</select>

</form>



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


<script>
  function showValues() {
    var str = $( "form" ).serialize();
    //$( "#mydiv" ).text( str );

  $.ajax({
      type :  'POST',
      url  :  'test.php',
      data :  str,
      dataType : "html",
      success: function(htmlResponse)
      {

      }
  });
  }

  $( "select" ).on( "change", showValues );
  showValues();
</script>




test.php

<?php
echo $_POST['project_id'];
echo $_POST['week'];
?>
  • 2 Contributors
  • 1 Reply
  • 368 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by pzuurveen

Dani AI

Generated

This thread already has the core pieces: serializes the form and posts it to the server, and demonstrates putting the returned HTML into the page. A few focused clarifications and small improvements make this pattern more robust, debuggable and safe.

  • PHP reads form fields by their name attributes, not element ids; ensure each <select> (or input) has a correct name that matches what the server expects.
  • Target the specific form when serializing (avoid $("form") if the page can contain multiple forms).
  • Bind change handlers after the DOM is ready (or place the script after the form). Calling the handler on load is fine if the markup precedes the script, but explicit DOM-ready binding removes that ambiguity.
  • As points out, the AJAX response is available in the success callback; prefer .text() for plain values to avoid accidental HTML injection, and use .html() only when returning trusted markup.

For a clearer, structured exchange consider returning JSON from PHP and telling jQuery to expect JSON. That makes the client-side parsing explicit and reduces fragile string concatenation. Example pattern (conceptual):

// server: return JSON and safe values
header('Content-Type: application/json; charset=utf-8');
$data = [
  'project_id' => isset($_POST['project_id']) ? (int) $_POST['project_id'] : 0,
  'week'       => isset($_POST['week']) ? (int) $_POST['week'] : 0
];
echo json_encode($data);
// client: request JSON and update a node safely
$.ajax({
  url: 'test.php',
  method: 'POST',
  data: $('form#myForm').serialize(),
  dataType: 'json',
  success: function(resp) {
    $('#returnValue').text('project: ' + resp.project_id + ', week: ' + resp.week);
  },
  error: function(xhr, status, err) { console.error(status, err); }
});

Quick troubleshooting checklist: inspect the Network tab to confirm the POST payload and server response; check the console for JS errors; inspect server error logs for PHP notices. Always validate and sanitize incoming POST values on the server (cast numeric fields, use filter_input or null-coalescing to avoid undefined-index notices) before echoing or using them.

Member Avatar for pzuurveen

works the result is in the htmlResponse var

<form>
Select Project:*
<select name="project_id" id="project_id" >
<option value="0">Select Project</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
Select Week*:
<select name="week" id="week_id">
<option value="0">Select Week</option>
<option value="1">This Week</option>
<option value="2">Last Week</option>
<option value="3">2 Weeks back</option>
</select>
</form>
<div>return:<span id="returnValue"></span></div>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script>
function showValues() {
    var str = $( "form" ).serialize();
    //$( "#mydiv" ).text( str );
    $.ajax({
    type : 'POST',  
    url : 'test.php',
    data : str,
    dataType : "html",
    success: function(htmlResponse)
        {
        $("#returnValue").html(htmlResponse);
        }
    });
}

$( "select" ).on( "change", showValues );
showValues();
</script>
Edited by pzuurveen
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.