[ACCEPTED]-How to update div when on select change in jquery-forms

Accepted answer

Score: 24

Try something like that :

<select id="choose">
    <option value="test1">Test1</option>
    <option value="test2">Test2</option>
    <option value="test3">Test3</option>
</select>
<div id="update"></div>

<script type="text/javascript">
    $('#choose').change(function(event) {
        $('#update').html('This is ' + $('#choose').val() + ' and other info');
    }); 
</script>

If you want to 3 make it with AJAX, change the javascript 2 function to something like that:

<script type="text/javascript">
    $('#choose').change(function(event) {
        $.post('info.php', { selected: $('#choose').val() },
            function(data) {
                $('#update').html(data);
            }
        );            
    });
</script>

And in your 1 info.php, you'll have something like:

<?php

    $selected = isset($_POST['selected']) ? $_POST['selected'] : 'nothing';
    echo("This is $selected and other info");

Score: 3

The general idea:

$(function() {
   $("#msel").change(function(){
      $("#myresult").html("This is " + $("#msel").val() + " and other info");
   });
});

With more specifics I can 1 do better. ;-)

Score: 2

This is the simplest way I've found do it 1 (from this handy forum)

<!-- the select -->
<select id="thechoices">
    <option value="box1">Box 1</option>
    <option value="box2">Box 2</option>
    <option value="box3">Box 3</option>
</select>

<!-- the DIVs -->
<div id="boxes">
    <div id="box1"><p>Box 1 stuff...</p></div>
    <div id="box2"><p>Box 2 stuff...</p></div>
    <div id="box3"><p>Box 3 stuff...</p></div>
</div>

<!-- the jQuery -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">

$("#thechoices").change(function(){
    $("#" + this.value).show().siblings().hide();
});

$("#thechoices").change();

</script>

Score: 1

on document ready

<script type="text/javascript">
    $(document).ready(function(){
        $('#choose').change(function(event) {    
          $.post(
           'info.php',
            $(this).serialize(),
            function(data){
              $("#update").html(data)
            }
          );
          return false;   
        });   
    });

on ajaxComplete

<script type="text/javascript">
    $(document).ajaxComplete(function(){
        $('#choose').change(function(event) {    
          $.post(
           'info.php',
            $(this).serialize(),
            function(data){
              $("#update").html(data)
            }
          );
          return false;   
        });   
    });

Source: stackoverflow.com

Is there a way to clone form field values in jQuery or javascript?

Add blank option to top of select and make it the selected option in IE

How to bind an event for all inputs of form?

Disable submit button if checkbox is not checked in jquery

jQuery Submitting form Twice

How to disable "window.onbeforeunload" when submit form?

Ruby on Rails - Simple Form autocomplete association search

checking each required input for empty value with jQuery

How can I add the 'required' attribute to input on change of textarea?

How can I get jQuery .val() AFTER keypress event?

Cookie Warning

We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.