Dynamicaly display selected option from Django form using jQuery

Question

I have Django html form like this:

 <form class="form-horizontal" method="POST" action="." enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2">Task</label>
        <div class="col-sm-3">
            <select class="form-control" name="task_name" id="task_name" onchange="show()">
                <option value="" hidden>Select</option>
                {% for item in tasks %}
                    <option>{{item.task_name}}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-5 submit">
                <button type="submit" class="btn btn-primary" value="Add" name="save">Save</button>
        </div>
    </div>
 </form>

where items contains dictionary data.

I need to dynamically create few lines of html code that contain data for selected item.

For now I can only get selected text value [I'm new in jQuery]. But it is not displayed dynamically after selection.

My jQuery:

<script type="text/javascript">
    $(function show(){
        var txt = $("#task_name").val();
        $('#txt_name').val(txt);
    });
</script>

destination:

<p id="txt_name"/>

Thank you for your time.

You need to add a event listener for onChange of your select input. — Vaibhav Vishal
– Vaibhav Vishal, Commented Aug 27, 2019 at 11:06
@VaibhavVishal i have try this but is not working. I get selected text only after submitting form. — Zaraki Kenpachi
– Zaraki Kenpachi, Commented Aug 27, 2019 at 11:11
How is this a Python/Django question actually ??? (tags removed). — bruno desthuilliers
– bruno desthuilliers, Commented Aug 27, 2019 at 11:56

Louys Patrice Bessette · Accepted Answer · 2019-08-27 11:13:01Z

2

You need an event handler.

Try:

$(function(){
    $("#task_name").on("change",function(){
      $('#txt_name').val($(this).val());
    });
 });

answered Aug 27, 2019 at 11:13

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zaraki Kenpachi Over a year ago

Thank You :). Do you know how to get data from selected item?

Louys Patrice Bessette Over a year ago

You could store additional data for each option in some data- attributes and access it with .data().

Vaibhav Vishal · Accepted Answer · 2019-08-27 11:14:16Z

1

You need to register an event handler for onChange event of your select input. Also to set text of a <p> tag you need to call the method text.
Here is a working example:

// Define an event handler, don't call it yet
function show(){
  var txt = $("#task_name").val();
  console.log(txt);  // just to see when method runs, can remove on production
  $('#txt_name').text(txt);  // you need to call text to set text of <p>
}

$("#task_name").on("change", show);  // register an event handler for onChange of your select input

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="task_name" id="task_name">
  <option value="" hidden>Select</option>
  <option value="task1">task1</option>
  <option value="task2">task2</option>
  <option value="task3">task3</option>
</select>
<p id="txt_name"/>

answered Aug 27, 2019 at 11:14

Vaibhav Vishal

7,2487 gold badges32 silver badges51 bronze badges

4 Comments

Zaraki Kenpachi Over a year ago

Thank You :). Do you know how to get data from selected item?

Vaibhav Vishal Over a year ago

what data. You already have the value of selected option in var txt = $("#task_name").val();

Zaraki Kenpachi Over a year ago

but this is only selected value. I need in next step to get data from selected dictionary item.

Vaibhav Vishal Over a year ago

too complicated to do in django template. Switch to Django API + seperate js frontend (React, Angular, etc.) if you have that complex requirements. If you use Django templates you will have to dump the tasks list as json, and save it as js array in your template. Then you will create options using js instead of using for loop in Django template. Also may open your website for security vulnerabilities depending on where tasks is coming from.

Collectives™ on Stack Overflow

Dynamicaly display selected option from Django form using jQuery

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related