CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
user7793374
user7793374

Reputation:

Returning form results in a separate div tag

So I want to return a user's form results in a div so they can see what they have chosen underneath the form using JQuery but struggling to use the right code? Ive tried using the .html function and replaceWith. etc but nothing seems to be working?

Here's my html code:

<form id="myform">
    <h4>Enter your booking slot here:</h4><br>
    <select id="programmes">
        <option value="test1">Test 1</option>
        <option value="test2">Test 2</option>
        <option value="test3">Test 3</option>
        <option value="test4">Test 4</option>
        <option value="test5">Test 5</option>
    </select><br><br>
    <select id="time">
        <option value="one">01:00</option>
        <option value="two">02:00</option>
        <option value="three">03:00</option>
        <option value="four">04:00</option>
        <option value="five">05:00</option>
        <option value="six">06:00</option>
        <option value="seven">07:00</option>
        <option value="eight">08:00</option>
        <option value="nine">09:00</option>
        <option value="ten">10:00</option>
        <option value="eleven">11:00</option>
        <option value="twevle">12:00</option>
        <option value="one-pm">13:00</option>
        <option value="two-pm">14:00</option>
        <option value="three-pm">15:00</option>
        <option value="four-pm">16:00</option>
        <option value="five-pm">17:00</option>
        <option value="six-pm">18:00</option>
        <option value="seven-pm">19:00</option>
        <option value="eight-pm">20:00</option>
        <option value="nine-pm">21:00</option>
        <option value="ten-pm">22:00</option>
        <option value="eleven-pm">23:00</option>
        <option value="midnight">00:00</option>
    </select><br><br>
    <button type="submit" value="Submit Booking">
</form>
</div>

<div></div>

Upvotes: 0

Views: 41

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47667

$('#select').on('change', function() {
  $('#result').html( $(this).find('option:selected').text() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option value="test_1">Test 1</option>
  <option value="test_2">Test 2</option>
  <option value="test_3">Test 3</option>
  <option value="test_4">Test 4</option>
  <option value="test_5">Test 5</option>
</select>

<div id="result"></div>

Upvotes: 1

Related Questions