I am having difficulty getting this to work, everything works except the dependent dropdown, am I doing something wrong?
I am trying to add this to a google sheet script working with a sheet, it all seems to work except the dependent dropdown.
This is the error I'm getting:
Uncaught ReferenceError: nameCheck is not defined
if I test this code on an HTML tester it seems to work correctly, however, it does not seem to work in google sheets.
<html lang="en">
<body>
<h4>Add a Customer</h4>
Select a Date: <input type="date" id="date" name="start" class="mb-3">
<div>
Sales Rep:
<select id="rep">
<option>select option</option>
<option>Neil</option>
<option>Dave</option>
<option>Bob</option>
<option>Trick</option>
</select>
</div>
<div class="add-customer-form">
<div class="form-group">
<label for="first-name">Company name : </label>
<input type="text" class="form-control" id="first-name">
</div>
<div>
Product type:
<select id="input" onchange="nameCheck()">
<option>select option</option>
<option>CASH</option>
<option>Training</option>
<option>Optional Modules</option>
<option>Annual Additional Modules</option>
<option>Hosting Existing user moving Licence</option>
<option>Rentals</option>
<option>Existing Customer - Rentals</option>
<option>Existing Customer - CASH</option>
<option>other</option>
google.script.run.nameCheck();
console.log(input);
</select>
<div>
Product:
<select id="output" onchange="nameCheck()">
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="first-name">Quantity : </label>
<input type="number" class="form-control" id="last-name">
</div>
<div class="form-group mt-3">
<label for="phone-number">Previous CAD : </label>
<input type="text" class="form-control" id="phone-number">
<div class="form-group">
<label for="sales-price">Sales Price : </label>
<input type="number" class="form-control" id="salesP">
</div>
<div class="form-group">
<label for="deposit">Deposit : </label>
<input type="number" class="form-control" id="deposit">
</div>
<div class="form-group">
<label for="install">No. Intallments : </label>
<input type="number" class="form-control" id="install">
</div>
<div class="form-group">
<label for="invoice">Invoice Nr : </label>
<input type="text" class="form-control" id="invoice">
</div>
<div class="form-group">
<label for="Notes">Notes : </label>
<input type="text" class="form-control" id="notes">
</div>
<button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
Successfully Added!!
</div>
<script>
function nameCheck(){
var a=document.getElementById("input").value;
console.log(a);
if(a==="CASH")
{
var arr=["Cash 1","cash2"];
}
else if(a==="Existing Customer - CASH")
{
var arr=["existing 1", "existing 2"];
}
else if(a==="Training")
{
var arr=["Level 1 Training (in-house)","Level 2 Training (in-house)","Level 3 Training (in-house)","Onsite Training (up to 4 people)","Training Online per hour","Principles of Design (Renee Mascari)","Graham Hayden Sales/Care","KBBConnect training (per hours)","Training Solus (in-house) - 8 people"];
}
var string="";
for(i=0;i<arr.length;i++)
{
string=string+"<option value="+arr[i]+">"+arr[i]+"</option>";
}
document.getElementById("output").innerHTML=string;
}
</script>
</body>
</html>
Screenshot off dialog:
The code in the question have several issues, i.e.:
Bad HTML
Remove google.script.run.nameCheck(); and console.log(input); from
<select id="input" onchange="nameCheck()">
<option>select option</option>
<option>CASH</option>
<option>Training</option>
<option>Optional Modules</option>
<option>Annual Additional Modules</option>
<option>Hosting Existing user moving Licence</option>
<option>Rentals</option>
<option>Existing Customer - Rentals</option>
<option>Existing Customer - CASH</option>
<option>other</option>
google.script.run.nameCheck();
console.log(input);
</select>
The above because JavaScript can't be included that way between HTML tags.
Use of HTML attributes for handling events.
Instead of
<select id="input" onchange="nameCheck()">
Use
<select id="input">
then between <script></script> use something like
document.getElementById('input').onchange = nameCheck;
or use addEventListener
Related
HTML form submits twice if the onsubmit function runs longer than 10 seconds
Related
Just starting with HTML and JavaScript, been set an assignment to use JavaScript for some logical function. I have created a form and wanted to check that the elements are filled in correctly. I have tried to look at the duration and ideally wanted to set a minimum value upon submission, however it is not working as expected.
I have to use codepen for the assignment which has a separate column for JavaScript but I have put the code used in the form, not sure what I need to do.
Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student recovery recording</title>
<link rel="stylesheet" href="newstyle.css" />
<meta charset="UTF-8" />
</head>
<body>
<header><h1>Student Recovery Recording</h1></header>
<main>
<div class="container1">
<p>form content goes here</p>
</div>
<div class="container">
<form name="myForm" form action="" method="get">
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" />
</div>
<div class="form-row">
<label for="Exam"> Exam Code:</label>
<select name="Exam" id="Exam">
<option value="">--Please choose the correct Exam code--</option>
<option value="code1">AT017</option>
<option value="code2">CT154</option>
<option value="code3">AT317</option>
<option value="code4">BT141</option>
</select>
</div>
<div class="form-row">
<label for="reason"> Reason For Training:</label>
<select name="reason" id="reason">
<option value="">
--Please select the correct reason for training
</option>
<option value="train1">ATT</option>
<option value="train2">ITT</option>
<option value="train3">ETT</option>
</select>
</div>
<div class="form-row">
<label for="date">Date:</label>
<input type="date" id="date" />
</div>
<div class="form-row">
<label for="Studentname"> Student Name:</label>
<input type="text" id="Studentname" />
</div>
<div class="form-row">
<label for="Duration">Duration:</label>
<input type="time" id="Duration" min="1:00" />
</div>
<div class="form-row">
<textarea name="comment" rows="4" cols="50">
Enter details of work carried out and KLP's covered here...</textarea
>
</div>
<input type="submit" value="Submit" onclick="myFunction()" />
<script>
function myFunction() {
var text;
if (document.getElementById("Duration").validity.rangeUnderflow) {
text = "Not enough Recovery Time";
} else {
text = "Recovery Time acceptable";
}
document.getElementById("myForm").innerHTML = text;
}
</script>
</form>
</div>
</main>
<footer>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img
style="border: 0; width: 88px; height: 31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!"
/>
</a>
</p>
</footer>
</body>
</html>
Maybe you can use setTimeOut() method to the set duration trigger the method when the user load the window or the user starting to press the key.
example:
<div class="form-row">
<label for="name"> Instructor Name:</label>
<input type="text" id="name" onkeypress="setTimeout(showSubmitButton(), 5000)" /> //trigger showSubmitButton() when key pressed wait 5 sec then run showSubmitButton()
<input type="submit" id="submit" value="submit" style="display:none">// set display to none for hiding the button
</div>
<script>
function showSubmitButton() {
document.getElementById("submit").style.display = "block" // show the button after 5 sec
}
</script>
hope this help you
I am new to programming. I have got an issue with my jquery codes.
I have a form that I want to hide some sections of it and do not show until the first section which is input text, be completed then after clicking on the next button first check if all data inputs are completed then show the next section which is dropdown text (part2) and if I pick one of the dropdown text then show next section which is part3.
I tried this code.
<script>
$(".part2").hide()
$(".nextBtn").on("click", function(){
$('input').each(function() {
if(!$(this).val()){ alert('Some fields are empty'); return false; }
else{
$(".part2").show();}
});
});
</script>
<div class="form">
<div class="inputfield">
<label>First Name</label>
<input type="text" class="input" name="get[firstname]">
</div> <br/>
<div class="inputfield">
<label>Last Name</label>
<input type="text" class="input" name="get[lastname]">
</div> <br/>
<div class="inputfield">
<label>Email Address</label>
<input type="text" class="input" name="get[email]">
</div>
<div class="inputfield">
<label>Phone Number</label>
<input type="text" class="input" name="get[phone]">
</div>
<button class="nextBtn">Next</button>
<section class="part2">
<div class="inputfield">
<label for="text">Choose a text:</label>
<select name="text" id="text">
<option value="1">Text1</option>
<option value="2">Text2</option>
</select>
</div>
<section class="part3">
<div class="inputfield">
<label for="text">Choose a text:</label>
<select name="text" id="text">
<option value="1">Text1</option>
<option value="2">Text2</option>
</select>
</div>
Thanks.
Wrap all in sections as part2 and part3 and try this, and include one next button in each section in order to know the section will have to show
$('.nextBtn').click(function(){
if ($(this).closest('section').find('input').val() != '') {
$('section').hide();
$(this).closest('section').next().show();
}else {
console.log('Some fields are empty')
}
})
I have a form with several inputs like below
This is the value from Jenis Layanan
When I choose value from Jenis Layanan, if I choose Corporate, I want to add new field radio button below jenis layanan. And if I choose Perorangan or Home Visit, radio button dissapear.
How can I make it work like this?
My code
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="sub_product">Jenis Layanan</label>
<select class="form-control" name="sub_product" id="sub_product">
<option value="1">Perorangan</option>
<option value="2">Home Visit</option>
<option value="3">Corporate</option>
</select>
</div>
</div>
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="appoinment_date">Tanggal Pelayanan</label>
<input name="appointment_date" placeholder="Tanggal Layanan" id="appointment_date" class="form-control datepicker" autocomplete="off">
</div>
</div>
You have to write some JS to your form with event listener:
document.querySelector('#sub_product').addEventListener('change', () => {
// your code
})
I made codepen for you with an example:
https://codepen.io/VeterJS/pen/BaRvYYx
Is easier with jQuery, when the Corporate option is selected the div display containing the radio buttons is changed to block and when other option is selected then the display goes back to none which hides the element.
$("select").change(function() {
let option = '';
$("select option:selected").each(function() {
option = $( this ).text();
});
if(option == 'Corporate'){
$('#radioBTNS').css('display','block')
}else{
$('#radioBTNS').css('display','none')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="sub_product">Jenis Layanan</label>
<select class="form-control" name="sub_product" id="sub_product">
<option value="1">Perorangan</option>
<option value="2">Home Visit</option>
<option value="3">Corporate</option>
</select>
</div>
</div>
<div id="radioBTNS" style="margin:10px;display:none">
<input type="radio" id="age1" name="age" value="30">
<label for="age1">Radio btn one</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">Radio btn two</label><br>
</div>
<div class="p-2">
<div class="form-group">
<label class="form-label font-weight-bold" for="appoinment_date">Tanggal Pelayanan</label>
<input name="appointment_date" placeholder="Tanggal Layanan" id="appointment_date" class="form-control datepicker" autocomplete="off">
</div>
</div>
I have a form with some inputs that are filled from the result of an AJAX request. When I submit the form I get only null on the back-end. I tried to submit the values without editing it and it works
this is my java script code
editPayment = function() {
if ($('#entrytransId').val() != '') {
if ($('#entryReceiptTypesselect').val() == "1") {
$.ajax({
type: "GET",
url: "#Url.Action("GetInvoiceNumber", "Payment")",
data: {transId: $('#entrytransId').val()},
success: function(response) {
if (response.invNo == 0) {
window.location.reload();
} else {
$('#reciptNo').val(response.invNo);
$('#enteryAmt').val(response.Amt);
$('#entrytransId').attr("disabled", "true");
$('#enteryhide').show(500);
}
},
error: function(reponse) {
window.location.reload();
}
});
}
}
This is Exactly My HTML Form with inputs I have tried more times and its failures
but when I deleted the javascript function and fill the data manually its works
<form action="/Payment/EditPayment" id="MF" method="post">
<div class="row">
<div class="col-md-2">
<label class="form-control">Receipt Type</label>
</div>
<div class="col-md-8">
<select class="form-control" id="entryReceiptTypesselect"
name="entryReceiptTypes" required="true"><option value="">-Choose</option>
<option value="1">MoF</option>
<option value="2">Zakah</option>
<option value="3">Tax</option>
<option value="4">Other Taxs</option>
<option value="5">M & S</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">Trans Id</label>
</div>
<div class="col-md-3">
<input required="" type="number" class="form-control" id="entrytransId" name="entrytransId">
</div>
<div class="col-md-2" hidden="" id="btnHidden">
<button type="button" class="btn btn-primary legitRipple" onclick="editPayment()">check</button>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label class="form-control" id="lblinvoice">reciptNo</label>
</div>
<div class="col-md-4">
<input required="" type="number" name="reciptNo" class="form-control" id="reciptNo">
</div>
</div>
<div class="row" hidden="" id="enteryhide">
<div class="col-md-2">
<label class="form-control">enteryAmt</label>
</div>
<div class="col-md-4">
<input required="" type="number" value="0" name="enteryAmt" class="form-control" id="enteryAmt">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">E15 userName</label>
</div>
<div class="col-md-8">
<input required="" type="text" class="form-control" id="userName" name="userName">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">password</label>
</div>
<div class="col-md-8">
<input required="" type="password" class="form-control" id="password" name="password">
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<input type="submit" value="submit" class="btn btn-block btn-success legitRipple" id="enterysubmit">
</div>
</div>
</form>
The issue is not with setting the values via javascript/jquery, but specifically with setting the inputs to disabled.
$('#entrytransId').attr("disabled", "true");
when an input is set to disabled, it is not included (it is excluded) from the form's POST, so will appear as null in the server-side code.
You can:
- not set them to disabled (will affect your UX)
- enable them just before POST (icky)
- use hidden fields
MVC does this for checkboxes, so you can copy that idea here:
<input type='text' name='entryid' />
<input type='hidden' name='entryid' />
POST uses the input's name field, not its id, so it's ok to have multiple inputs with the same name.
POST will then use the first input that is not disabled (so don't put the hidden one first...)
Then just update the jquery to apply the value to both inputs (if you also want it shown in the UI) rather than by id, eg:
$("name[entryid]").each(function() { $(this).val(newvalue); });
(other ways to set this may be better, not checked if .val() will apply to all, likely only applies to the first)
The proplem was on $('#entrytransId').attr("disabled", "true");
i have another function onselectChange() is disabled all inputs , i tried $('#entrytransId').attr("disabled", "true"); and its works well
What seems like a simple thing in AngularJS is not working for me and I was hoping you all could be of assistance. Specifically, I am trying to enter the result of an AngularJS expression in another input's "value" attribute. I have set the ng-model's and am calling those correctly, just can't figure out why it won't evaluate. I have tried doing the same expression below the input, and it evaluates, so I believe it's something to do with being in the value attribute which is causing the issue.The code I have currently is:
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
Ideally, I would like to figure out how to get a username of the first letter of the first name and the full last name to auto-populate using data-binding, but at this point I haven't even been able to get just the standard first name + last name to work.
Any help you could offer would be greatly appreciated.
Thank you!
<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="un" >
Use ng-change directive.
var app = angular.module("app", []);
app.controller("myCtrl", ["$scope", function ($scope){
$scope.fn = "";
$scope.ln = "";
$scope.changed = function () {
$scope.un = $scope.fn[0] + $scope.ln;
};
}]);
DEMO
please use ng-value instead value
here demo: http://jsbin.com/zamih/1/edit
<body ng-app="app">
<div ng-controller="firstCtrl">
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
</div>
</body>
Change this line:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
To this instead:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="{{createNewUser.LastName}}" >
</div>
Your issue is that you are not evaluating createNewUser.LastName as an angular binding, but instead just assigning the text "createNewUser.LastName" to the value attribute. To fix this, put the createNewUser.LastName variable in double curly braces {{...}}.
Hope this helps!
If you have tried any/all of these above mentioned methods and still not able to fix your problem, it could be that your updated files are not loaded to Chrome.
That's what happened to me.
There are two ways to make sure that your js files are up to date on the browser,
1) Hold shift while clicking the reload button of your browser
2) Hard reload your page
* Open Developer Tools by either pressing F12 or ... -> More Tools -> Developer Tools
* Right-click the reload button of your browser and click "Empty Cache and Hard Reload"