I am trying to fill a textbox when a value is selected from a dropdown list.
I am able to do that, but in the process of doing so, I am unable to pick the value appearing in the textbox in my python script.
Now in my database I am getting a none value for the UserID. And the actual user ID is appearing in the Name column, as you can see in the screenshot.
This is the HTML:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="margin:0px 0px 0px 50px"><label for="form_lastname" class="control-label">Name</label>
<select name="username" id="username" required class="form-control">
<option value=""></option>
<option value="maahir10">Dadlani, Maahir</option>
</select>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="width:145px
<label for="form_lastname" class="control-label">User ID</label>
<textarea type="text" id="userid" style="height:35px;width:120px;font-family:Raleway" disabled="yes" required></textarea>
</div>
The JS:
<script type="text/javascript">
var mytextbox = document.getElementById('userid');
var mydropdown = document.getElementById('username');
mydropdown.onchange = function(){
mytextbox.innerHTML = this.value;
}
</script>
So, how do i fix this error and get both the values in my DB. Please advise. Thank you.
You should use .value option for input field not .innerHTML
<script type="text/javascript">
var mytextbox = document.getElementById('userid');
var mydropdown = document.getElementById('username');
mydropdown.onchange = function(){
mytextbox.value = this.value;
}
</script>
also you used disabled on your textarea, and that prevents the value to be sent via POST, use readonly instead.
Related
The thing that I'd like to happen is that when the value of the status field is Paid the input field fines should be read-only.
How to achieve this?
This is my form:
This is my code:
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Status</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="status" value = "Paid" name="status" readonly>
</div>
</div>
<div class="form-group">
<label for="fines" class="col-sm-3 control-label">Fines</label>
<div class="col-sm-9">
<input type="text"
class="form-control" id="fines" name="fines" required>
</div>
</div>
Javascript line of code:
<script type = "text/javascript">
$(document).ready (function(){
$('input[type=text][name=status]').change(function() {
if (this.value == "Paid") {
$("#fines").prop("readonly",true);
}
else{
$("#fines").prop("readonly",false);
}
});
});
</script>
Seeing as you're status field is set to readonly on load, I'd imagine you want to trigger a change event instantly.
$(document).ready (function(){
// setup a variable for multi-use
var $statusField = $('input[type=text][name=status]');
// watch for changes to the statusField
$statusField.change(function() {
// simpler check for paid status
$('#fines').prop('readonly', this.value === 'Paid');
});
// trigger a change on ready
$statusField.change();
});
This way you have access to trigger the change programatically but also have the ability to watch the status field. I've also cleaned up your code a little bit!
try like this
if ($(this).val() == "Paid") {
$("#fines").attr("readonly",true);
}
else{
$("#fines").attr("readonly",false);
}
I have a simple input params that are required. I want to disable my submit button until all the required fields are satisfied. Granted I am new to django, and the particular code I am working on is very old. As a result, post like this or this are not helping.
Current code that I am trying from one of the posts linked and including my own template
<script type="text/javascript">
$(document).ready(function() {
validate();
$('input').on('keyup', validate);
});
function validate() {
var inputsWithValues = 0;
// get all input fields except for type='submit'
var myInputs = $("input:not([type='submit'])");
myInputs.each(function(e) {
// if it has a value, increment the counter
if ($(this).val()) {
inputsWithValues += 1;
}
});
if (inputsWithValues == myInputs.length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
$('#submit').on('click', function() {
var zip = $('#zip').val();
var email = $('#email').val();
var name = $('#name').val();
//if inputs are valid, take inputs and do something
});
<form class="form-horizontal" action="" method="get" id="dataform">
<div class="form-group">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-3">
<input class="col-md-12" id="zip" type="text" placeholder="Enter zip code" aria-required="true">
</div>
<div class="col-md-3">
<input class="col-md-12" id="name" type="text" placeholder="Enter last name" aria-required="true">
</div>
<div class="col-md-3">
<input class="col-md-12" id="email" type="email" placeholder="Enter email address" aria-required="true">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="btn btn-primary" id="submit" type="submit">Submit</div>
</div>
</div>
</form>
any help on disabling my submit button until input fields are not validated/filled is much appreciated. Again, new to django and I am unable to use existing threads on said topic
From your current code, looks like your selector for the submit input is not actually getting the submit "button". Currently, your template defines the submit as a div and not an input, thus your selectors should be $("div[type=submit]") not $("input[type=submit]")
Better yet, just select by div id $('#submit')
Instead of targeting attributes, I was targeting props. Below is the fix for my particular issue.
if (inputsWithValues === 3) {
$("div[type=submit]").attr("disabled", false);
} else {
$("div[type=submit]").attr("disabled", 'disabled');
}
I have a javascript function that takes a value from a select and append its to the end of a textarea field (mask) whenever a new selection is made from the select
function addToEditMask(select, mask)
{
var selectedValue = document.getElementById(select).value;
document.getElementById(mask).append(" + "+selectedValue);
}
This function is used by two different elements on the same page as follows:
<div class="form-group">
<label for="edit_filename_mask_mask" id="edit_filename_mask_masklabel">
Mask
</label>
<textarea type="text" id="edit_filename_mask_mask" name="edit_filename_mask_mask"
aria-describedby="edit_filename_mask_masklabel" class="form-control" rows="10" cols="80"></textarea>
</div>
<div class="form-group">
<label for="editMaskVarList" id="editMaskVarListlabel">
Mask Fields
</label>
<select class="mb-2 form-control custom-select" id="editMaskVarList" onchange="addToEditMask('editMaskVarList', 'edit_filename_mask_mask');">
<option>
acoustic (Acoustic)
</option>
.....
and
<div class="form-group">
<label for="add_filename_mask_mask" id="add_filename_mask_masklabel">
Mask
</label>
<textarea type="text" id="add_filename_mask_mask" name="add_filename_mask_mask"
aria-describedby="add_filename_mask_masklabel" class="form-control" rows="10" cols="80"></textarea>
</div>
<div class="form-group">
<label for="addMaskVarList" id="addMaskVarListlabel">
Mask Fields
</label>
<select class="mb-2 form-control custom-select" id="addMaskVarList" onchange="addToEditMask('addMaskVarList', 'add_filename_mask_mask');">
<option>
acoustic (Acoustic)
</option>
......
In each case the select and the mask are both within a Bootstrap modal dialog. But it only works for the second case (add_filename_mask_mask) not the first case (edit_filename_mask_mask)
I added some debugging to ensure
function addToEditMask(select, mask)
{
var selectedValue = document.getElementById(select).value;
document.getElementById(mask).append(" + "+selectedValue);
alert('Adding to mask:'+mask+':'+scriptvar+':'+document.getElementById(mask).value);
}
that the function was actually being called in both cases and all the variables a renamed correctly. Yet although there are no webconsole errors and the append() method doesnt report any error the value of mask doesnt change for edit_filename_mask_mask
I cannot create a SSCE since there seems to be no difference between the working and non working version. The only difference of note is that when modal dialog is first displayed edit_filename_mask_mask has a value but add_filename_mask_mask does not. However edit_filename_mask_mask continues to fail if I blank out edit_filename_mask_mask , and add_filename_mask_mask when has value.
What happens if you try some safety checks ?
function addToEditMask(select, mask)
{
var selectedValue = document.getElementById(select).value || "";
var textarea = document.getElementById(mask);
textarea.value = (textarea.value || "") + " + " + selectedValue;
}
Variable name is "selectedValue" and you call to "selectValue"
I have a Bootstrap form and I am basically trying to loop through all input fields, check if they have a required class and their value is null, if so add some CSS as an error indicator. For some reason the if statement is not working.
My code is:
$("#orderForm").on("submit", function(e) {
var formInputFields = $(".form-control")
formInputFields.each(function(i) {
if (formInputFields[i].hasClass("required") && formInputFields[i].val() === "null") {
e.preventDefault();
formInputFields.css("border", "2px solid #741e4f");
}
});
});
HTML is along these lines, but longer, same structure though, the form-group div is repeated:
<form class="form-horizontal" id="orderForm">
<div class="form-group">
<label for="" class="col-sm-4 control-label">Lorem</label>
<div class="col-sm-6">
<select name="" id="" class="form-control required">
<option value=""></option>
<option value="lorem">lorem</option>
<option value="ipsun">ipsun</option>
</select>
</div>
</div>
Your code threw error when you say formInputFields[i].hasClass because formInputFields was a jquery object but not formInputFields[i]. Since you were using $.each, the 2nd parameter would have given you current element and instead of formInputFields[i], you could just use that 2nd parameter. Also, when you say cur.val()==="null" it will be strong comparison between left and right i.e. both should match by value and type which always failed here. So just check the length of val and if it is 0 that will be invalid element. Below are the changes I've made. Check and it and let me know if you face any issues.
$("#orderForm").on("submit", function(e) {
var formInputFields = $(".form-control")
formInputFields.each(function(i, v) {
var cur = $(v);
if (cur.hasClass("required") && !(cur.val().length)) {
e.preventDefault();
cur.css("border", "2px solid #741e4f");
}
else
cur.css("border", "");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" id="orderForm">
<div class="form-group">
<label for="" class="col-sm-4 control-label">Lorem</label>
<div class="col-sm-6">
<select name="" id="" class="form-control required">
<option value=""></option>
<option value="lorem">lorem</option>
<option value="ipsun">ipsun</option>
</select>
</div>
</div>
<input class="btn btn-info" type="submit" value="Submit" />
</form>
Firstly, when an input is required add required as an attribute rather than a class.
<input type="text" id="foo" placeholder="bar" value="" required>
Then you will be able to get any required inputs currently missing values using:
var list_of_invalid_inputs = document.querySelectorAll('*:invalid');
or if you must use jquery like so.
The same selector works in css too:
input:invalid { border: 2px solid #741e4f; }
you can use $(this) instead of formInputFields[i].hasClass... as you need the object to verify if it has the "required" class or not and if it has value or not, for example:
$(document).ready(function(){
$("#orderForm").on("submit", function(e){
var formInputFields = $(".form-control");
formInputFields.each(function(i) {
if($(this).hasClass("required") && $.trim($(this).val()) === ""){
e.preventDefault();
$(this).css("border", "2px solid #741e4f");
}
});
return false;
});
});
JSFiddle
Alright so I have a form. In the form I have a lot of check boxes. If a person clicks on the checkbox. It shows the field below the box. If they click on the checkbox again it makes the field below the checkbox disappear and makes the field have no value.
here is the code. I have JS running the show and hide. and Html calling it.
function ShowCutSewDescription() {
var select = $('#send_item_to_cutsew');
console.log(select)
//select = parseInt(select);
if (select.attr('checked', true)) {
$('#cutsew-checked').show();
}else {
$('#cutsew-checked').hide();
}
}
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>
Changes made
► select.attr('checked', true) to select.is(":checked")
► $('#send_item_to_cutsew') to $('[name="send_item_to_cutsew"]') since there is no element with that Id.
Working Demo
function ShowCutSewDescription() {
var select = $('[name="send_item_to_cutsew"]');
if (select.is(":checked")) {
$('#cutsew-checked').show();
} else {
$('#cutsew-checked').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>
<div id="cutsew-checked">
Sample box
</div>
I assume this is using jQuery. If so, the selector that you have input is looking for something with an id of send_item_to_cutsew.
jQuery uses css selectors as a base, as referenced by this page: https://api.jquery.com/category/selectors/
The proper way to get the input that you want based on the name is as follows:
var select = $('[name="send_item_to_cutsew]');
or you can set the id to the above like so:
<input type="checkbox" id="send_item_to_cutsew" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">