Home/ Questions/Q 7612599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T01:57:16+00:00

Im trying to work out how to take form field values and selected drop

  • 0

Im trying to work out how to take form field values and selected drop down menu options using a single loop and display them into individual divs on the same page.

At the moment ive managed to only achieve this using repetitive code rather than using a single loop. The form will eventually be very long with many fields and drop down menus (select options), therefore a loop would be a better option.

I would appreciate any help. Thanks in advance.

My code 

    <html>
        <head>
          <script src="jquery.js"></script>

    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){

    $("#name").keypress(event) {
        var stt = $(this).val();
        $("#d_name").text(stt);
    });

    $("#email").keypress(event) {
        var stt = $(this).val();
        $("#d_email").text(stt);
    });

        $("#telephone").keypress(event) {
        var stt = $(this).val();
        $("#d_telephone").text(stt);
    });

    $("#car").change(function(event) {
        var stt = $(this).val();
        $("#d_type").text(stt);
    });

  $("#type").change(function(event) {
        var stt = $(this).val();
        $("#d_type").text(stt);
    });

    });//]]> 
    </script>  

        </head>
        <body>

    Name:      
    <input type="text" value="" id="name"/>
    Email:
    <input type="text" value="" id="email"/>
    Telephone:
    <input type="text" value="" id="telephone"/>
    Car:
    <select id="car" >
      <option value="volvo">Volvo</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select> 
    Type:
    <select id="type">
      <option value="automatic">automatic</option>
      <option value="manual">manual</option>
    </select> 

    Your Data
    Name: <div id="d_name" ></div>
    Email: <div id="d_email" ></div>
    Telephone: <div id="d_telephone" ></div>
    Car: <div id="d_car" ></div>
    Type: <div id="d_type" ></div>

        </body>
        </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Do you mean:

    $('input, select').change(function() {
    $('#d_' + this.id).text($(this).val());
});

    To your edit:

    var updateText = function() {
    $('#d_' + this.id).text($(this).val());
}

$('input').keypress(updateText);
$('select').change(updateText);

    Example:
    http://jsfiddle.net/kBGZ6/

    • 0