how to get textbox value in hyperlink as id? - html

hi i want to fetch value from text box and append to hyperlink as a id. here is my code but i am unable to get the value of textbox.
<li><a class="ajax-link" href="ajax/legal_notice.php?id=+ document.getElementById('cust_id').value">Hypelink name</a></li>
<div class="col-sm-6">
Customer Id
</div>
<div class="col-sm-6">
<input type="text" name="cust_id" id="cust_id" class="form-control" >
</div>
Kindly guide me how to get value from text box.


Try this
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
alert("hello");
function resetLink(ele)
{
var href="ajax/legal_notice.php?id="+$(ele).val();
$(".ajax-link").attr("href",""+href);
}
</script>
</head>
<body>
<li><a class="ajax-link" href="ajax/legal_notice.php?id=+ document.getElementById('cust_id').value">Hypelink name</a></li>
<div class="col-sm-6">
Customer Id
</div>
<div class="col-sm-6">
<input type="text" name="cust_id" id="cust_id" onchange="resetLink(this);" class="form-control" >
</div>
</body>


See below:
<script>
function append() {
var link = document.getElementById('link');
var text = document.getElementById('cust_id');
link.href = "ajax/legal_notice.php?id=" + text.value;
link.text = text.value;
}
</script>
<a id="link" href="ajax/legal_notice.php?id=+ document.getElementById('cust_id').value">Hypelink name</a>
<div class="col-sm-6">
Customer Id
</div>
<div class="col-sm-6">
<input type="text" name="cust_id" id="cust_id" class="form-control" onchange="append();">
</div>

Related

Error TypeError: Cannot read property 'fn' of undefined userClicked # funcs.gs:8

I have made an web app using google script connected to spreadsheet.
all was running well till i tried to put a functionality of sending email notification when user submits a form information
see error code when run log of user clicked function-
TypeError: Cannot read property 'fn' of undefined userClicked #funcs.gs:8
function-js page is below
'function userClicked(userInfo) {
var ss = SpreadsheetApp.openByUrl(url1);
var ws = ss.getSheetByName("SNAGS");
ws.appendRow([userInfo.fn,
userInfo.contact,
userInfo.email,
userInfo.house,
userInfo.snag,
userInfo.query,
new Date()]);
<script>
document.addEventListener('DOMContentLoaded', function()
{
document.getElementById("btn").addEventListener("click",doStuff);
document.getElementById("house").addEventListener("input",getInfo);
var selectBoxes = document.querySelectorAll('select');
M.FormSelect.init(selectBoxes);
google.script.run.withSuccessHandler(populateHouse).getHouse();
}
);
function populateHouse(hous)
{
var autocomplete = document.getElementById('house');
var instances = M.Autocomplete.init(autocomplete, { data: hous });
}
function doStuff()
{
var isValid = document.getElementById("fn").checkValidity();
if(!isValid)
{
M.toast({html: 'Name Required!'});
}
else
{
addRecord();
}
}
function addRecord ()
{
var userInfo = {};
userInfo.fn = document.getElementById("fn").value;
userInfo.contact = document.getElementById("contact").value;
userInfo.email = document.getElementById("email").value;
userInfo.house = document.getElementById("house").value;
userInfo.snag = document.getElementById("snag").value;
userInfo.query = document.getElementById("query").value;
google.script.run.userClicked(userInfo);
document.getElementById("fn").value ="";
document.getElementById("contact").value ="";
document.getElementById("email").value ="";
document.getElementById("house").value ="";
document.getElementById("snag").value ="";
document.getElementById("query").value ="";
M.updateTextFields();
var myApp = document.getElementById("snag");
myApp.selectedIindex = 0;
M.FormSelect.init(myApp);
}
function getInfo ()
{
var HouseInfo = document.getElementById("house").value;
if(HouseInfo.length === 3)
{
google.script.run.withSucceshandler(updateInfo).getData(HouseInfo);
}
}
function updateInfo (infos)
{
document.getElementById("info").value = infos;
M.updateTextFields();
}
</script>
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!= include("page-css"); ?>
</head>
<body>
<div class="container">
<h3>TPM Maintance |Ticketing System</h3>
<br>
<div class="row">
<div class="input-field col s4">
<input placeholder="Your Full Names" id="fn" type="text" class="validate" required >
<label for="fn">Your Name:</label>
</div>
<div class="input-field col s4">
<input id="contact" type="text" class="validate">
<label for="contact"> Your Phone number:</label>
</div>
<div class="input-field col s4">
<input id="email" type="email" class="validate" required>
<label for="email">Email:</label>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<i class="material-icons prefix">home</i>
<input type="text" id="house" class="autocomplete" required>
<label for="house">Location Area/ House Unit# </label>
</div>
<div class="input-field col s4">
<select id="snag" required>
<option disabled selected> Snag Category</option>
<?!= list; ?>
</select>
<label>Snag Type</label>
</div>
<div class="input-field col s4">
<input disabled id="info" type="text" class="validate">
<label for="info">Unit_Info</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="query" class="materialize-textarea"></textarea>
<label for="query">Query Desc:</label>
</div>
</div>
<div class="row">
<button id="btn" class="btn waves-effect waves-light deep-orange darken-2" type="submit" name="action">Send Ticket!
<i class="material-icons right">send</i>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include("page-js"); ?>
</body>
</html>
//html part
please see more code from my work thanks. please excuse me im abit a newbie

If you are running the steps from the tutorial video you have tried to run userClicked() function to authorize the Gmail API's. Since Apps Script is thinking that it's a standalone function, userInfo is considered undefined. This is expected behavior.
Excerpt from video:

How to change name attributes for auto added inputs and textareas?

I'm trying to create a cv creater form and need to let users add more inputs (auto).
I created inputs and they work just fine, but I need to change the name attribute for each auto added block.
For example :
<input type="text" id="fname" name="fname">
<input type="text" id="fname" name="fname2">
<input type="text" id="fname" name="fname3">
I know I can use name="value[]" array, but every new block goes into a different column in the database, so I need to change attributes.
My code :
$(document).ready(function() {
var max_fields = 10;
var wrapper = $("#contant");
var add_button = $("#add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div id="input-social" class="input-container"><input type="text" id="social" class="col-11 form-control" name="fname" placeholder="fname"> <span id="deleteInput" class="AutoInput" title="Delete"><i class="fas fa-trash-alt"></i></span></div>');
} else {
alert('You Riched limit.')
}
});
$(wrapper).on("click", "#deleteInput", function(e) {
e.preventDefault();
$(this).parent('#input-social').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/e794a0f8b4.js" crossorigin="anonymous"></script>
<div class="form-group">
<div class="row">
<label class="col-3 inputFontSize" for="social">Others</label>
<div id="contant" class="col-7">
<button id="add_form_field" class="btn add_form_field">Add more <i class="fas fa-plus"></i></button>
</div>
<!-- col-9 -->
</div>
<!-- row -->
</div>
<!-- form-group -->
Thanks for all helps

You can use your x variable that is incremented for each added input and append it to the name attribute. We'll use a 'template string'. The adjustment is name="fname${x}" which will substitute ${x} for the value of x.
$(wrapper).append(`
<div id="input-social" class="input-container">
<input type="text" id="social" class="col-11 form-control" name="fname${x}" placeholder="fname">
<span id="deleteInput" class="AutoInput" title="Delete">
<i class="fas fa-trash-alt"></i>
</span>
</div>`
);
$(document).ready(function() {
var max_fields = 10;
var wrapper = $("#contant");
var add_button = $("#add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append(`<div id="input-social" class="input-container"><input type="text" id="social" class="col-11 form-control" name="fname${x}" placeholder="fname"> <span id="deleteInput" class="AutoInput" title="Delete"><i class="fas fa-trash-alt"></i></span></div>`);
} else {
alert('You Riched limit.')
}
});
$(wrapper).on("click", "#deleteInput", function(e) {
e.preventDefault();
$(this).parent('#input-social').remove();
x--;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/e794a0f8b4.js" crossorigin="anonymous"></script>
<div class="form-group">
<div class="row">
<label class="col-3 inputFontSize" for="social">Others</label>
<div id="contant" class="col-7">
<button id="add_form_field" class="btn add_form_field">Add more <i class="fas fa-plus"></i></button>
</div>
<!-- col-9 -->
</div>
<!-- row -->
</div>
<!-- form-group -->

Add CSS Class to Row Elements If Value Equals

Using JQuery I would like to check the value of an input, if it equals Complete I would like to add the Bootstrap class is-valid to that input, and all the other inputs on the same row.
Something like this (pseudo code);
if wb_status_reg = Complete {
// add is-valid to all row inputs / select boxes
}
I should note that sometimes the row will contain a select box, not just text inputs. Also, I'm unable to edit the html as it's being generated by a form builder component (in a CMS).
My code is currently working but I know it's too long and could be improved. In my code i'm showing one form-row but I actually have many more, so I need to duplicate this a few more times.
How can I achieve this in a more efficient way?
jQuery(document).ready(function($) {
var wb_stage_reg = $('#wb_stage_reg');
var wb_status_reg = $('#wb_status_reg');
var wb_date_reg = $('#wb_date_reg');
setIsValid($);
});
function setIsValid($) {
wb_stage_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_stage_reg).addClass("is-valid") : "";
wb_status_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_status_reg).addClass("is-valid") : "";
wb_date_reg = ($(wb_status_reg).val().trim() == "Complete") ? $(wb_date_reg).addClass("is-valid") : "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control" id="wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>

Something like this:
You need to change ID to class on all fields
Since you cannot, I use the name instead:
$(function() {
$("[name='form[wb_status_reg]']").each(function() {
const $parent = $(this).closest(".form-row");
const complete = this.value === "Complete";
$parent.find("[name='form[wb_date_reg]'], [name='form[wb_stage_reg]']").toggleClass("is-valid",complete)
})
});
.is-valid { color:green}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col-3">
<div class="form-group rsform-block-wb-stage-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_stage_reg" name="form[wb_stage_reg]" type="text" value="Registration"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-status-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_status_reg" name="form[wb_status_reg]" type="text" value="Complete"><span></span>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group rsform-block-wb-date-reg">
<div class="formControls">
<div class="sp-input-wrap">
<input class="form-control wb_date_reg" name="form[wb_date_reg]" type="text" value="2020-06-08 09:41:40"><span></span>
</div>
</div>
</div>
</div>
</div>

How can i retain my data after refreshing?

<!Doctype html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl" class="container jumbotron">
<div class="form-group">
<input type="text" class="form-control" ng-model="empName" placeholder="Please Enter Employee Name"/>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="empUserId" placeholder="Please Enter Employee UserName"/>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="empEmailId" placeholder="Please Enter Employee Email ID"/>
</div>
<div class="form-group">
<button class="btn btn-info" ng-click="saveData();">Save</button>
</div>
<div class="form-group">
<button class="btn btn-info" ng-click="loadData();">Load</button>
</div>
<hr/>
Employee Name : {{empData.empname}}<br/><br/>
Employee User ID : {{empData.empuserid}}<br/><br/>
Employee Email ID : {{empData.emailid}}
</div>
<script>
var app = angular.module("myApp", ['ngStorage']);
app.controller("myCtrl", function($scope, $localStorage){
$scope.saveData = function(){
var empData = {empname:$scope.empName,
empuserid: $scope.empUserId,
emailid : $scope.empEmailId
}
//$localStorage.name = $scope.empName;
//$localStorage.userid = $scope.empUserId;
//$localStorage.emailid = $scope.empEmailId;
$localStorage.empData = empData;
//window.localStorage.set("empData", JSON.stringify(empData));
}
$scope.loadData = function(){
//$scope.name1 = $localStorage.name;
//$scope.userid2 = $localStorage.userid;
//$scope.emailid3 = $localStorage.emailid;
$scope.empData = $localStorage.empData;
//$scope.empData = JSON.parse(window.localStoage.get('empData'));
}
$scope.loadData();
});
</script>
</body>
</html>

Just call $scope.loadData() at the bottom of your controller to fetch the data.

Try the below steps:
Step 1: Write a init() function inside app.controller and set ng-model values.
$scope.init = function () {
$scope.empName = $localStorage.empData.empname;
$scope.empUserId = $localStorage.empData.empuserid;
$scope.empEmailId = $localStorage.empData.emailid;
$scope.empData = $localStorage.empData;
}
Step 2: Call init() function in HTML using ng-init.
<div ng-controller="myCtrl" class="container jumbotron" ng-init="init()">

Using Icecuim but hangs to load json file

I am using the icenium weather example from telerik platorm icenium.com to load a data file json for an test app I am doing
my json is as follows
[
{
"screen_id": "course_outline",
"screen_title": "NICMA Child Minding App - Course Outline",
"screen_display_type": "/json_schema/P14_navigation.schema.json",
"updated": "1371030938",
"author": [
{
"author_name": "Andrew Moran",
"author_url": "http://people.learningpool.com/user/id"
}
],
"comments": "authoring tool metadata, not used in app",
"authoring_tool": {
"version": "x.x",
"href": ""
},
"copyright": "2013 - Learning Pool",
"screen_content": {
"screen_title": "Child Minding Navigation",
"start_text": "Text at the start of the screen",
"navigation_items": [
{
"screen_id": "food_hygiene_legislation_doc",
"screen_display_type": "/json_schema/P03_content_screen.schema.json",
"display_text": "Home"
}
],
"end_text": ""
}
]
I just made a copy of the weather funciton and named it course-outline.js
and added it into my scripts
(function (global) {
var WeatherViewModel,
app = global.app = global.app || {};
WeatherViewModel = kendo.data.ObservableObject.extend({
weatherDataSource: null,
init: function () {
var that = this,
dataSource;
kendo.data.ObservableObject.fn.init.apply(that, []);
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "data/course_outline.json",
dataType: "json"
}
}
});
that.set("weatherDataSource", dataSource);
}
});
app.weatherService = {
viewModel: new WeatherViewModel()
};
})(window);
But for some reason when i click the weather button now it hangs even though ive told the template to find screen_title any ideas
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/course-outline.js"></script>
<script src="scripts/login.js"></script>
<script src="scripts/location.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<!--Home-->
<div id="tabstrip-home"
data-role="view"
data-title="Home">
<div class="view-content">
<h1>Welcome!</h1>
<a id="skin-change" data-role="button" data-click="app.changeSkin">Flat</a>
<p>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</p>
<div class="img"></div>
</div>
</div>
<!--Login-->
<div id="tabstrip-login"
data-role="view"
data-title="Login"
data-model="app.loginService.viewModel">
<div class="view-content">
<div class="logo"></div>
<h3 data-bind="invisible: isLoggedIn">Enter your credentials:</h3>
<h1 class="welcome" data-bind="visible: isLoggedIn">Welcome, <span data-bind="text: username"></span>!
</h1>
<div class="buttonArea">
<input type="submit" id="logout" data-role="button" data-bind="click: onLogout, visible: isLoggedIn" class="login-button" value="Logout" />
</div>
<form data-bind="events: { keyup: checkEnter }">
<ul data-role="listview" data-style="inset" data-bind="invisible: isLoggedIn">
<li>
<label>
Username
<input type="text" data-bind="value: username" />
</label>
</li>
<li>
<label>
Password
<input type="password" data-bind="value: password" />
</label>
</li>
</ul>
<div class="buttonArea">
<input type="submit" id="login" data-role="button" data-bind="click: onLogin, invisible: isLoggedIn" class="login-button" value="Login" />
</div>
</form>
</div>
</div>
<!--Location-->
<div id="tabstrip-location"
data-role="view"
data-title="Location"
data-init="app.locationService.initLocation"
data-show="app.locationService.show"
data-hide="app.locationService.hide"
data-model="app.locationService.viewModel"
data-stretch="true">
<div id="no-map" data-bind="invisible: isGoogleMapsInitialized">
Location requires internet connection to display the map.
</div>
<div id="map-search-wrap" data-bind="visible: isGoogleMapsInitialized">
<button id="map-navigate-home" data-bind="click: onNavigateHome"></button>
<form onsubmit="return false;">
<input id="map-address" type="search" data-bind="value: address" placeholder="Address" />
<input id="map-search" type="submit" value="" data-bind="click: onSearchAddress" />
</form>
</div>
<div id="map-canvas" data-bind="visible: isGoogleMapsInitialized"></div>
</div>
<!--Weather-->
<div id="tabstrip-weather"
data-role="view"
data-title="Weather"
data-model="app.weatherService.viewModel">
<div class="weather">
<p class="weather-title">Course Title</p>
<div class="separator">
<div class="dark"></div>
<div class="light"></div>
</div>
<ul class="forecast-list"
data-role="listview"
data-bind="source: weatherDataSource"
data-template="weather-forecast-template">
</ul>
</div>
</div>
<!--Weather forecast template-->
<script type="text/x-kendo-tmpl" id="weather-forecast-template">
<div>
<div class="position-left">
<span class="weather-info date">${screen_title}</span>
</div>
<div class="position-right">
<span class="weather-info temperature high">${screen_title}<sup>°</sup></span>
<span class="weather-info temperature low">${screen_title}<sup>°</sup></span>
</div>
</div>
</script>
<!--Layout-->
<div data-role="layout" data-id="tabstrip-layout">
<!--Header-->
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!--Footer-->
<div data-role="footer">
<div data-role="tabstrip">
Home
Login
Location
Weather
</div>
</div>
</div>
</body>
</html>