Member Avatar for braveheart_sb

I would like to know how to create a query that will grab the first two results of the combobox and display on the Third comboBox without refreshing the page just the form i mean all to be done on the same page not a secundary page.

Thank you!

<table width="486" height="120" border="0">
		  <form id="form2" name="form1" method="post" action="Self??">
		    <tr>
		      <td height="28" colspan="2"><table cellspacing="0" cellpadding="0">
		        <tr>
		          
	            </tr>
		        </table></td>
	        </tr>
		    <tr>
		      <td height="22"></td>
		      <td width="242">&nbsp;</td>
	       <label>
		        <select name="select" id="select">
		          <option selected="selected">choose one org</option>
		          <option value="google">Ungoogle</option>
		          <option value="yahpp">yahoo</option>
		          <option value="micro">micro</option>
	            </select>
		      </label></td>
		      <td><select name="select2" id="select2">
		        <option value="morning">morning</option>
		        <option value="day">day</option>
		       </select></td>
	        </tr>
		    <tr>
		      <td colspan="2"><img src="images/template_26.gif" width="412" height="5" alt="" /></td>
	        </tr>
		    <tr>
		      <td width="234">result of query here</td>
		      <td><select name="select3" id="select3">
	          </select></td>
	        </tr>
	      </form>
</table>
  • 2 Contributors
  • 1 Reply
  • 109 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Daiva

Dani AI

Generated

As 's markup shows three selects (IDs select, select2, select3) and suggested jQuery, two practical ways to populate the third combo without a page refresh are shown: (1) client-side mapping when the possible results are small and known, and (2) AJAX lookup when results come from a database or are large. Both approaches listen for changes on the first two selects and replace the options in the third.

Client-side mapping (fast, no server round-trip):

<script>
$(function(){
  var map = {
    'google|morning': ['G-AM','G-Report'],
    'google|day': ['G-PM'],
    'yahpp|morning': ['Y-AM']
  };

  $('#select, #select2').on('change', function(){
    var key = $('#select').val() + '|' + $('#select2').val();
    var opts = map[key] || [];
    var $s3 = $('#select3').empty();
    $s3.append($('<option>').text('choose result'));
    opts.forEach(function(o){ $s3.append($('<option>').val(o).text(o)); });
  });
});
</script>

AJAX/server approach (recommended when data is dynamic):

<script>
$('#select, #select2').on('change', function(){
  var a = $('#select').val(), b = $('#select2').val();
  var $s3 = $('#select3').empty().append($('<option>').text('Loading...'));
  $.getJSON('get_options.php', {org: a, when: b})
    .done(function(items){
      $s3.empty();
      if (!items.length) { $s3.append($('<option>').text('No results')); return; }
      items.forEach(function(it){ $s3.append($('<option>').val(it.value).text(it.label)); });
    })
    .fail(function(){ $s3.empty().append($('<option>').text('Error')); });
});
</script>

Server-side (short PHP/PDO sketch that returns JSON):

<?php
header('Content-Type: application/json; charset=utf-8');
$org = $_GET['org'] ?? ''; $when = $_GET['when'] ?? '';
$pdo = new PDO('mysql:host=...;dbname=...;charset=utf8mb4','user','pass');
$stmt = $pdo->prepare('SELECT id AS value, name AS label FROM table WHERE org=:org AND period=:when LIMIT 50');
$stmt->execute([':org'=>$org, ':when'=>$when]);
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

Notes and cautions: ensure unique IDs (avoid generic names like select in larger projects), decide whether the needed value is option .val() or display .text(), sanitize/validate server inputs and use prepared statements to prevent SQL injection, show a default option while loading, and handle empty or error responses by disabling or showing a "No results" entry in select3. If the intent was to copy the first two OPTION elements (not the selected values), use DOM methods to read .options and slice the first two before inserting them into the third select.

Member Avatar for Daiva

Try JQuery to get and set values dynamically.
Take a look at this article.

Hope it helps...

Edited by Daiva because: n/a
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.