Dynamicaly display selected option from Django form using jQuery - javascript

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 an event handler.
Try:
$(function(){
$("#task_name").on("change",function(){
$('#txt_name').val($(this).val());
});
});

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"/>

Related

Add and remove input texts on button click

I have a form that allows a user to create custom questions.
The user needs to insert the title for the question and then choose the type of the question.
If the type of question is radio button, checkbox or a select menu it should appear a div "availableOptions" that shows by default two input texts so the user can insert some option values.
Doubt:
When this "availableOptions" div appears there is also a button "add new option" that when is clicked it should appear another input text so the user can insert a new option value. Each option should also have always a remove button associated that when is clicked the user can remove that input text, but it should be always a minimum of one input text.
Do you know how to do this properly? I have the working example below but it's working neither the append nor the remove.
Example: https://jsfiddle.net/udx6pp8u/15/
HTML:
<form id="" method="post" class="clearfix" action="">
<div class="form-group">
<label for="inputName">Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Type of Field</label>
<select class="form-control" id="customQuestionType">
<option>Text</option>
<option>Long text</option>
<option id="optionQuestion">Checkboxes</option>
<option id="optionQuestion">Radiobuttons</option>
<option id="optionQuestion">Select Menu </option>
</select>
</div>
<div class="form-group" id="availableOptions">
<label for="inputName">Available Options </label>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-outline-primary mt-3" id="addNewOption">Add new Option</button>
</div>
</div>
<input type="submit" class="btn btn-primary float-right mt-3" value="Store"/>
</form>
CSS:
#availableOptions{display:none;}
jQuery:
var selected_option = $('#customQuestionType option:selected').attr('id');
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
if ($('#addNewOption').click(function() {
$('#availableOptions')
.append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
}));
if ($('#removeOption').click(function() {
$('#availableOptions') // how to remove the clicked otpion?
}));
}
Try this:
Note: Don't use id. Use class instead. One document should only have one unique id. Using multiple id="removeOption" will coz your script to behave incorrectly and also choose the first found and ignore the rest having the same id
$('#customQuestionType').change(function(){
var selected_option = $('option:selected', this).val();
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
$('#addNewOption').click(function() {
$('#availableOptions').append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
});
}
});
$(document).on('click', '.removeOption', function(e) {
e.preventDefault();
$(this).closest('.option').remove();
})
DEMO:
https://jsfiddle.net/dL7opvak/21/
EDITED

setting only the input field as empty string without the selection tag

I have a container that consists of a couple of inputs tag and one select tag. All of them have className, let's call it "contact". In jquery , I am accessing all of them through "contact". Also, there is checkbox that disables when you check it and when toy uncheck it, it empties the input fields and remove disable . The thing i want to do I want when i uncheck the checkbox, I want to set the the input fields as empty string, which i did, but what i did include the selection tag which i do not set as empty string
$("#showCheckoutHistory").change(function(event){
if (this.checked){
$(".contact").attr("disabled","disabled");
}
else {
$(".contact").removeAttr("disabled");
/* here is the problem, how can you empty the value of the input ONlY. Without chnaging the className Javascript and Adding Another name in the HTML
*/
$(".contact").val("");
}
});
<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label>
<div class="container">
<input type="text" value="oo" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="xx" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="yy" class="form-control col-xs-10 contact"><br><br>
<select class="form-control col-xs-10 contact">
<option>A</option>
<option>B</option>
<option selected>C</option>
</select>
</div>
There is error but i dont know what is it
Include the $ reference in your code. That means add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
in your html
$("#showCheckoutHistory").change(function(event){
if (this.checked){
$(".contact").attr("disabled","disabled");
}
else {
$(".contact").removeAttr("disabled");
/* here is the problem, how can you empty the value of the input ONlY. Without chnaging the className Javascript and Adding Another name in the HTML
*/
$(".contact").each(function(i, el){
if($(el)[0].nodeName != "SELECT"){
$(el).val("");
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label>
<div class="container">
<input type="text" value="oo" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="xx" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="yy" class="form-control col-xs-10 contact"><br><br>
<select class="form-control col-xs-10 contact">
<option>A</option>
<option>B</option>
<option selected>C</option>
</select>
</div>
</div>
Sorry, I don't have enough reputation to comment.
I tested your code and that works well as you want.
You missed selecting jquery in stackoverflow code snippet.
please check follow code.
If it's not working even after you added jquery script, then please let me know jquery version you used. (don't forget to add jquery cdn or picking jquery library in code snippet editor)
if you want to keep selection of select element please remove the contact class in there like below.
$("#showCheckoutHistory").change(function(event){
if (this.checked){
$(".contact").attr("disabled","disabled");
}
else {
$(".contact").removeAttr("disabled");
/* here is the problem, how can you empty the value of the input ONlY. Without chnaging the className Javascript and Adding Another name in the HTML
*/
$(".contact").val("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label>
<div class="container">
<input type="text" value="oo" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="xx" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="yy" class="form-control col-xs-10 contact"><br><br>
<select class="form-control col-xs-10"> <!-- I removed contact class in here to keep selection -->
<option>A</option>
<option>B</option>
<option selected>C</option>
</select>
</div>

remove specific field javascript

I have an form with some inputs. When i click on the + button, javascript create an input field. This is my form code:
<div class="row">
<div class="col-md-3">
<div id="container">
<div id="new" class="">
<input type="number" name="number" id="number">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</div>
<button onClick="addNumber(); New();" class="btn btn-warning btn-md" type="button">+</button>
The + button create an new option and number field. This is the Javascript code for create new fields:
function New()
{
var node = document.createElement("div");
node.setAttribute("id", "new");
node.setAttribute("class", addNumber());
node.innerHTML = $("#new").html();
document.getElementById("container").appendChild(node);
$('#container').append(node);
}
This works good, but i want delete an specific field. When the new field create's, i want also when the delete button clicked, the field deleted. How can i do this?
now add delete icon with every div and on click pass id of that div to dlete function

Load bootstrap forms from select page

I have a register form. I just need to load bootstrap form in same page behind the select menu when someone click something from select menu. Should I hide form until someone click that item in select menu right?
This is my code.
<div class="form-group">
<select class="form-control menu">
<option>Select category*</option>
<option>Apartment</option>
<option>Lands</option>
</select>
</div>
I need to load this form someone click Apartment in the menu.
<form>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="Size(sqft)">
/div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bedrooms">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bathrooms">
</div>
</div>
</div>
</div>
</form>
I tried play with this code. But it redirect to another pages.
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
What method do I need to follow?
Have a look at this jsfiddle:
I gave your wrapper of your apartment an id <div class="col-md-12" id="apartment">.
So I added following jQuery to toggle your html of your apartment:
$('select.menu').change(function(){
// this function runs when a user selects an option from a <select> element
switch($(this).find("option:selected").prop('value')) {
case '1': $('#apartment').show(); break;
default: $('#apartment').hide(); break;
}
});
And don't forget to hide your #apartment:
#apartment {
display: none;
}
window.location.href will redirect you to the new page. You can just hide your form before user make a select change or get it dynamically with jQuery.load() function.
Let's say your HTML,
<div class="form-group">
<select class="form-control menu">
<option>Select category*</option>
<option>Apartment</option>
<option>Lands</option>
</select>
</div>
by default let the form is in display:none.
Jquery,
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
if($(this).val == "Apartment"){
$('form').show();
}else{
$('form').hide();
}
});
</script>

Getting dynamic form values

Is there a way to check which like option is selected for which text box when submitted.
As shown below user may select like only for some text values. The html tags are dynamically generated based on the object parameters
for(int i = 0 ; i < object ; i++)
{
if(obj.textbox)
<input type="tex" id="obj.id"/> <input type="checkbox" id="obj.id"+"#"/>
else
<select> ... </select>
}
Right now what I do is assign a text "#" as shown above to the check box and after the form is submitted iterate all the checkbox items and get the selected value and split it and get the text value and append both value and like if selected, with | symbol and send the request.
Is there a better way to get the entered text values and check if the like option is selected for that.
This is my View Code.
<div ng-repeat="filter in filters">
<div class="content-pad">
<fieldset>
<label for="textinputID1"><p class="lead">
{{filter.dsply_name}} :
</p>
</label>
<div class="field-group" nowrap>
<input ng-if="!filter.listFlag" type="text" id='filter.atrbt_name' class="span3">
<button type="button" class="reset-field hide-text">Reset field</button>
<label class="checkbox" ng-if="!filter.listFlag">
<input id='filter.atrbt_name' type="checkbox">
<i class="skin"></i> <span>Like</span>
</label>
</div>
<div class="form-row">
<div class="row-fluid-nowrap">
<div class="span12">
<select ng-if="filter.listFlag" class="mod-select span12" ng-model="filterSelectOption" ng-options="value.displayValue as value.displayValue for value in filter.listValues">
<option value="" selected="selected">Select an Option</option>
</select>
</div>
</div>
</div>
</fieldset>
</div>
Bind the click event to submit button, in js callback function, get values & do check.

Categories

Resources