I'm going nuts trying to figure out why the datepicker variable is not being sent via email with the rest of my form submission?
This is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/andy.css" rel="stylesheet" type="text/css">
<link href="css/form.css" rel="stylesheet" type="text/css">
<link href="css/mq.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>
<style>
.cap-overlay .button { margin-top:10px}
.cap-overlay{width: 100%; color:#fff; background: rgba(0, 0, 0, 0.43);left:0;padding:12px; line-height: 1.4em;font-size:14px}
.cap-overlay h5 {color:#fff;}
a[data-toggle="drop-panel"] {display: block;}
</style>
<script>
$(window).load(function(){
$('.hcaption').hcaptions();
});
</script>
<script>
$(document).ready(function() {
$(".overlay").fancybox({
helpers : {
overlay : {
opacity: 0.8,
css : {
'background-color' : '#000'
}
}
},
maxWidth : 900,
maxHeight : 380,
fitToView : false,
width : 650,
height : 400,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
helpers : {
overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox
}
});
</script>
<script>
var hdate = $('input#hdate').datepicker('getDate');
</script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form method="post" action="sendmail.php">
<label class='form_error_title'>Please check the required fields</label>
</div>
<ol class='phpfmg_form' >
<li class='field_block' id='field_0_div'><div class='col_label'>
<label class='form_field'>Date of Hunt</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type="text" name="hdate" id="hdate" class="datepicker input-large">
<div id='field_0_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_1_div'><div class='col_label'>
<label class='form_field'>Name</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type="text" name="name" id="name" value="" class='text_box input-large'>
<div id='field_1_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_2_div'><div class='col_label'>
<label class='form_field'>E-Mail Address</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type="text" name="email" id="email" value="" class='text_box input-large'>
<div id='field_2_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_3_div'><div class='col_label'>
<label class='form_field'>Phone Number</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type="text" name="phone" id="phone" value="" class='text_box input-large'>
<div id='field_3_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_4_div'><div class='col_label'>
<label class='form_field'>Select the hunt you're interested in:</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type='checkbox' name='hunt_type' id='gator' value="Gator" class='form_checkbox' ><label class='form_choice_text' for='field_4_0'>Gator</label><br>
<input type='checkbox' name='hunt_type' id='hog' value="Hog" class='form_checkbox' ><label class='form_choice_text' for='field_4_1'>Hog</label><br>
<input type='checkbox' name='hunt_type' id='dove' value="Dove" class='form_checkbox' ><label class='form_choice_text' for='field_4_2'>Dove</label><br>
</div>
</li>
<br>
<li class='field_block' id='field_5_div'><div class='col_label'>
<label class='form_field'>Total # of Guests</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<select name='guests' id='total-guests' class='text_select' >
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
</select>
<div id='field_5_tip' class='instruction'></div>
</div>
</li>
<br>
<li class='field_block' id='field_6_div'><div class='col_label'>
<label class='form_field'>Additional Information?</label> <label class='form_required' > </label> </div>
<div class='col_field'>
<textarea name="info" id="info" rows=4 cols=25 class='text_area input-large'></textarea>
<div id='field_6_tip' class='instruction'></div>
</div>
</li>
<!-- Add Captcha Here -->
<li>
<div class='col_label'> </div>
<div class='form_submit_block col_field'>
<input type="submit" value="Submit" class='form_button'>
<span id='phpfmg_processing' style='display:none;'>
<img id='phpfmg_processing_gif' src='admin.php?mod=image&func=processing' border=0 alt='Processing...'> <label id='phpfmg_processing_dots'></label>
</span>
</div>
</li>
</ol>
</form>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/collapse.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/zebra_datepicker.js"></script>
<script>
$(document).ready(function() {
// assuming the controls you want to attach the plugin to
// have the "datepicker" class set
$('input.datepicker').Zebra_DatePicker();
});
</script>
</body>
</html>
And this is my php:
<?php
$hdate = $_POST['hdate'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$hunt_type = $_POST['hunt_type'];
$guests = $_POST['guests'];
$info = $_POST['info'];
$to = "andyw504#gmail.com";
$subject = "Some subject";
$body = "You have a new reservation!<br><br>
Date of Hunt: $hdate<br>
Name: $name<br>
E-mail: $email<br>
Phone Number: $phone<br>
Type of Hunt: $hunt_type<br>
Number of Guests: $guests<br>
Comments: $info<br>";
$headers = "From: $email" . "\r\n" .
"Reply-To: $to" . "\r\n" .
"X-Mailer: PHP/" . phpversion();
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($to,$subject,$body,$headers);
echo "Email sent.";
exit;
?>
They've asked me to add more detail. The datepicker is popping up and putting the date in the text area. When I call that variable to send via email it is blank. Every other field is recorded and sent in the e-mail except the date, which is one of the most important parts of the form.
EDIT (new code for form and PHP)
First download Pickadate.js and look inside the index.htm file.
https://github.com/amsul/pickadate.js
You will see this <input id="input_01" class="datepicker" type="text"> just change that to <input id="input_01" class="datepicker" type="text" name="hdate"> and you'll be in business.
Plus there are a few themes to choose from.
Added [] in name='hunt_type[]' for all three checkboxes. This is important, because if someone chose 2 or more, only one will show up in the form.
Also added this in PHP handler which will handle the array for "hunt type":
foreach($_POST['hunt_type'] as $value) {
$hunt_type.= $value . "\n";
}
HTML form
<form method="post" action="handler.php">
Hunt date:
<input type="text" name="hdate">
<br>
Hunt type:
<li class='field_block' id='field_4_div'><div class='col_label'>
<label class='form_field'>Select the hunt you're interested in:</label> <label class='form_required' >*</label> </div>
<div class='col_field'>
<input type='checkbox' name='hunt_type[]' id='gator' value="Gator" class='form_checkbox' ><label class='form_choice_text' for='field_4_0'>Gator</label><br>
<input type='checkbox' name='hunt_type[]' id='hog' value="Hog" class='form_checkbox' ><label class='form_choice_text' for='field_4_1'>Hog</label><br>
<input type='checkbox' name='hunt_type[]' id='dove' value="Dove" class='form_checkbox' ><label class='form_choice_text' for='field_4_2'>Dove</label><br>
</div>
</li>
<br>
Name:
<input type="text" name="name">
<br>
Email:
<input type="text" name="email">
<br>
Tel:
<input type="text" name="phone">
<br>
Guests:
<input type="text" name="guests">
<br>
Comments:<br>
<textarea rows="6" name="info" cols="38"></textarea>
<br>
<input type="submit" name="submit" value="Submit">
</form>
PHP handler (handler.php)
<?php
$hdate = $_POST['hdate'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
//$hunt_type = $_POST['hunt_type'];
$guests = $_POST['guests'];
$info = $_POST['info'];
$to = "email#example.com";
$subject = "Some subject" . "\r\n";
foreach($_POST['hunt_type'] as $value) {
$hunt_type.= $value . "\n";
}
$body = "You have a new reservation!<br><br>
Date of Hunt: $hdate<br>
Name: $name<br>
E-mail: $email<br>
Phone Number: $phone<br>
Type of Hunt: $hunt_type<br>
Number of Guests: $guests<br>
Comments: $info<br>";
$headers = "From: $email" . "\r\n" .
"Reply-To: $to" . "\r\n" .
"X-Mailer: PHP/" . phpversion();
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
mail($to,$subject,$body,$headers);
echo "Email sent.";
exit;
?>
Related
I have created a simple form page for people to submit change requests and am struggling to get the invalid validation working for the input field where type="file".
I have written a function to run the object through custom validation (similar to how I handle Email validation), but I never receive the red outline and error message like I do for email. I am logging my "Not valid" message successfully when I try to upload more than 5 files, but still receive a green outline and the valid message on the input.
I think I've tried so much at this point I'm just confusing myself. I was able to get both valid and invalid messages at one point, but nothing beyond that.
I am trying to avoid validating every input individually if possible.
Thanks for any help in advance!
<!DOCTYPE html>
<html lang="en" class="vh-100">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="AWright" />
<link rel="icon" href="##URL_FAV_ICON##" />
<title>Change Request Form</title>
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- /Bootstrap 5 CSS-->
<!-- Axios Library -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- /Axios Library -->
<style></style>
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.11"></script>
</head>
<body>
<div id="awApp" class="d-flex flex-column vh-100">
<!-- FIXED NAVBAR AND/OR HEADER -->
<header>
<nav
class="navbar navbar-expand-md navbar-light fixed-top bg-light"
></nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- MAIN CONTENT -->
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row mt-5 pt-5">
<div class="col-md-8 offset-md-2">
<h2 class="mt-5 text-center" style="font-size: 3rem">
Program Change Request Form
</h2>
<p class="text-center">
Please complete the below form to submit your program change
request:
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card shadow p-3 my-5">
<div class="card-body">
<form
novalidate
class="needs-validation"
name="mainForm"
#submit="submitForm"
method="post"
ref="requestForm"
>
<div class="row mb-2">
<div class="col-md-6 mb-3">
<label for="firstname" class="form-label mb-0"
>First Name*</label
>
<input
id="firstname"
type="text"
name="firstname"
class="form-control"
v-model="contact.firstName"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastname" class="form-label mb-0"
>Last Name*</label
>
<input
id="lastname"
type="text"
name="lastname"
class="form-control"
v-model="contact.lastName"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a last name.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="email" class="form-label mb-0"
>Email Address*</label
>
<input
id="email"
type="text"
name="email"
class="form-control"
v-model="contact.email"
pattern="\b[a-zA-Z0-9._%-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,100}\b"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a valid email.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="name" class="form-label mb-0"
>Name of Request*</label
>
<input
id="name"
type="text"
name="RequestName"
class="form-control"
v-model="contact.name"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a name for the change request being made.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="description" class="form-label mb-0"
>Description of Request*</label
>
<textarea
id="description"
type="text"
name="RequestDetails"
class="form-control"
v-model="contact.description"
required
></textarea>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a description for the request being made.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="due_date" class="form-label mb-0"
>Estimated Due Date*</label
><br />
<em
><small
>Please note that this subject to change.</small
></em
>
<input
id="due_date"
type="text"
name="CompletionDate"
class="form-control"
v-model="contact.dueDate"
v-maska="dateMask"
required
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please enter a desired due date for the change request
in MM/dd/yyyy format.
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label for="files" class="form-label mb-0"
>Please attach any assets (images, font files, etc)
here to upload*:</label
><br />
<small
><em
>*Maximum of 5 files can be uploaded at a time</em
></small
>
<input
type="file"
class="form-control"
id="files"
name="files"
#change="handleFilesUpload( $event )"
multiple
/>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">
Please do not upload more than 5 files at a time.
</div>
</div>
</div>
<button
type="submit"
class="btn btn-primary px-4 py-2"
value="Submit"
>
Submit
</button>
<div>
<small class="form-text text-muted">
<em>* Denotes a required field.</em>
</small>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /MAIN CONTENT -->
</div>
<!--Bootstrap 5 JS-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!--/Bootstrap 5 JS-->
<!-- Maska JS -->
<script src="https://cdn.jsdelivr.net/npm/maska#latest/dist/maska.js"></script>
<!-- /Maska JS -->
<!-- VUE APP CODE -->
<script>
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
contact: {
firstName: "##firstname##",
lastName: "##lastname##",
email: "##email##",
name: "",
description: "",
dueDate: "",
},
files: "",
};
},
methods: {
submitForm(e) {
const isValid =
this.contact.firstName &&
this.contact.lastName &&
this.contact.email &&
this.contact.name &&
this.contact.description &&
this.contact.dueDate &&
this.validEmail(this.contact.email) &&
this.files.length <= 5 &&
this.multipleFilesValidation(this.files);
e.target.classList.add("was-validated");
if (!isValid) {
e.preventDefault();
console.log("Not valid");
} else {
e.preventDefault();
this.postToZapier();
console.log("Success");
}
},
multipleFilesValidation: function (files) {
if (this.files.length > 5) {
console.log(this.files);
return false;
} else {
return true;
}
},
handleFilesUpload(event) {
this.files = event.target.files;
},
postToZapier() {
console.log(this.files);
var formData = new FormData();
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append("files[" + i + "]", file);
}
console.log(formData);
var url = "https://hooks.zapier.com/hooks/catch/159749/b9h6kww/";
var requestForm = this.$refs.requestForm;
console.log(requestForm);
axios
.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then(function () {
console.log("Success!");
setTimeout(function () {
requestForm.submit();
}, 0);
})
.catch(function () {
console.log("Fail.");
});
},
validEmail: function (email) {
const re = /\b[a-zA-Z0-9._%-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,100}\b/;
return re.test(email);
},
},
computed: {
dateMask: function () {
return "##/##/####";
},
},
});
app.directive("maska", Maska.maska);
app.mount("#awApp");
</script>
<!-- /VUE APP CODE-->
</body>
</html>
I have a project using leaflet, but I want to do a custom search through GeoJSON data but I don't know how to do it. I have a side panel with search box and button. below is my design:.
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
var map = new L.map("myMAP_id", {
fullscreenControl: {
pseudoFullscreen: false,
position: "topright"
}
}).setView([10.392241, 124.98], 16.5);
var layer = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'© OpenStreetMap contributors',
visible: false,
title: "OpenStreetMap"
}
);
map.addLayer(layer);
var poly = L.geoJson(slsu_bldg, {
style: function(feature) {
return bldg_style;
},
onEachFeature: function(feature, marker) {
marker.bindPopup(
"<div><b>SOUTHERN LEYTE STATE UNIVERSITY" +
"<br>" +
feature.properties.BLDG_NAME +
"<br><button id='" +
feature.properties.ID +
"' class='btn btn-xs btn-primary' style='height: 23px; font-size: 11px; padding: 3px 6px; letter-spacing: 0.02rem; margin-top: 5px;'>More Details <i class='fa fa-caret-right'></i></button></div"
);
}
});
var search_val;
$("#search").on("click", function() {
search_val = $("#searchtext10").val();
console.log(search_val);
var search = new L.Control.Search({
options: {
layer: poly,
zoom: 19,
initial: false,
filterData: search_val,
propertyName: "BLDG_NAME",
marker: {
icon: true,
animate: true,
circle: {
radius: 10,
weight: 4,
color: "#1BC500",
stroke: true,
fill: true
}
}
}
});
console.log(search);
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SLSU Asset Management</title>
<link rel="shortcut icon" href="http://localhost/GIS-SLSU_AssetMgt/assets/img/slsu.png" />
<!-- offline bootstrap -->
<!-- online bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- custom stylesheet -->
<link rel="stylesheet" href="http://localhost/GIS-SLSU_AssetMgt/assets/custom/style.css" />
<!-- leaflet offline connection -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.css"
/>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.label/leaflet.label.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-src.js">
integrity="sha512-eldJj3obVsCO9Tlrj/J8AFrrTFD4+sN8d9HdwKAqZuSgHloWOm6IzetLy1uQnwh9qLssrY3TAgIJQfjPfQJxHQ=="
crossorigin=""
</script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-sidebar.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet-search.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/L.Conttol.Locate.min.js"></script>
<!-- leaflet full screen -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/leaflet.fullscreen.min.js"></script>
<!-- online maptiler mapboxGL map -->
<script src="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" />
<!-- offline maptiler mapboxGL map -->
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/leaflet-mapbox-gl.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/mapbox-gl/mapbox-gl.js"></script>
<!-- geojson coder -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
/>
<script src="https://unpkg.com/osmtogeojson#2.2.12/osmtogeojson.js"></script>
<link
rel="stylesheet"
href="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.css"
/>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/osm/OSMBuildings.js"></script>
</head>
<body>
<!--- navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand image" href="#">
<img
class="img img-responsive"
src="http://localhost/GIS-SLSU_AssetMgt/assets/img/LOGO.png"
alt=""
/>
<!-- SLSU-MC GIS MAP -->
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/GIS-SLSU_AssetMgt/#">Help</a>
</li>
</ul>
</div>
</nav>
<!---map section -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map_wrapper">
<div class="row">
<div class="col-md-4" style="padding-right: 0 !important;">
<div class="left-control">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link"
type="button"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
BASE MAPS
</button>
</h2>
</div>
<div
id="collapseOne"
class="collapse show"
aria-labelledby="headingOne"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-base">
<label>
<div>
<input
type="radio"
id="basemaps"
value="OpenStreetMap"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
checked="checked"
/>
<span> Open Street Map</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Maptiler"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Maptiler</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="MapBox"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> MapBox</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="Google"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> Google</span>
</div>
</label>
<label>
<div>
<input
type="radio"
id="basemaps"
value="WorldImagery"
class="leaflet-control-layers-selector"
name="leaflet-base-layers_264"
/>
<span> World Imagery</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<a class="leaflet-control-layers-toggle toggle" href="#"></a>
<button
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
LAYER MAPS
</button>
</h2>
</div>
<div
id="collapseTwo"
class="collapse"
aria-labelledby="headingTwo"
data-parent="#accordionExample"
>
<div class="card-body">
<div
class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded"
aria-haspopup="true"
>
<section class="leaflet-control-layers-list">
<div class="leaflet-control-layers-overlays">
<label>
<div>
<input
type="checkbox"
id="vector_layerBuilding"
value="Buildings"
class="leaflet-control-layers-selector"
checked=""
onclick="vector_layerBuilding()"
/>
<span> Buildings</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerRoads"
value="Roads"
class="leaflet-control-layers-selector"
onclick="vector_roads()"
/>
<span> Roads</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBoundary"
value="Boundary"
class="leaflet-control-layers-selector"
onclick="vector_layerBoundary()"
/>
<span> Boundary</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerTrack"
value="Track/Oval"
class="leaflet-control-layers-selector"
onclick="vector_layerTrack()"
/>
<span> Track/Oval</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerField"
value="Field"
class="leaflet-control-layers-selector"
onclick="vector_layerField()"
/>
<span> Field</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerParking"
value="Parking Lot"
class="leaflet-control-layers-selector"
onclick="vector_layerParking()"
/>
<span> Parking Lot</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerPath"
value="Foot Path"
class="leaflet-control-layers-selector"
onclick="vector_layerPath()"
/>
<span> Foot Path</span>
</div>
</label>
<label>
<div>
<input
type="checkbox"
id="vector_layerBleacher"
value="Bleacher"
class="leaflet-control-layers-selector"
onclick="vector_layerBleacher()"
/>
<span> Bleacher</span>
</div>
</label>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div
id="leaflet_search"
class="leaflet-control-search leaflet-control search-exp"
>
<input
class="search-input"
type="text"
autocapitalize="off"
placeholder="Search..."
id="searchtext10"
style="display: block; max-width: 634px;"
/>
<ul class="search-tooltip" style="display: none;"></ul>
<a class="search-cancel" href="#" title="Cancel" style="display: none;">
<span>⊗</span>
</a>
<a class="search-button" id="search" href="#" title="Search..." style=""></a>
<div class="search-alert" style="display: none;"></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div id="myMAP_id"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info" style="height: 28vh">
<div align="right"><button class="btn btn-default">IMPORT</button></div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Building Name</th>
<th>Assets</th>
<th>Counts</th>
<th>Unit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>CCSIT Building</td>
<td>Computer Sets</td>
<td>100</td>
<td>PCS</td>
</tr>
<tr>
<td>2</td>
<td>CCSIT Building</td>
<td>MAC PC</td>
<td>25</td>
<td>PCS</td>
</tr>
<tr>
<td>3</td>
<td>CCSIT Building</td>
<td>Mga Gwapo</td>
<td>Gamay Ra Me!</td>
<td>Way Labot Jorton (by: Ranel)</td>
</tr>
<tr>
<td>4</td>
<td>CCSIT Building</td>
<td>Mga Panget</td>
<td>Gamay Ra Sila!</td>
<td>Labot Si Jorton (by: Ranel)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<p>
<a href="https://leafletjs.com/" target="_blank">Leaflet ©</a
> | Developed by: darksidebug_09
</p>
</div>
</div>
</div>
<!--- scripts here -->
<!--- geojson data -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/new_bldg_data.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_boundary.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/road_network.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/track_oval.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/slsu_field.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/parking_lot.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/foot_path.geojson"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/geoJson/bleacher.geojson"></script>
<!--- script -->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/leaflet/data_scripts.js"></script>
<!-- Bootstrap core JavaScript and JQuery-->
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/js/jquery.min.js"></script>
<script src="http://localhost/GIS-SLSU_AssetMgt/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I am using the following code --
val url = new URL(LoginUrl)
val connection = url.openConnection()
val userpass = login + ":" + passwd
val auth = "Basic " + new String(new Base64().encode(userpass.getBytes()))
connection.setRequestProperty ("Authorization", auth)
val page = connection.getInputStream()
Logger.debug("Page " +page )
But the only thing I am getting is --
[debug] application - Page sun.net.www.protocol.http.HttpURLConnection$HttpInputStream#33f13d38
EDIT: Based on the comments I read the stream, I get the page. But I get the login page. I want the page which I get after log-in. What else needs to be done?
var writer = new StringWriter()
IOUtils.copy(page, writer, "UTF-8")
var htmlString = writer.toString()
Logger.debug("Page " + htmlString)
The login URL is "https://affiliate-program.amazon.in/gp/associates/network/main.html"
The html page I get --
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>
Amazon Sign In
</title>
<link type="text/css" href="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/errors-alerts/error-styles-ssl._CB138362389_.css" rel="stylesheet" />
<link type="text/css" href="https://images-na.ssl-images-amazon.com/images/G/31/authportal/common/css/ap_global._CB350157780_.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body id="amzn_associates_in" class="ap-locale-en_IN" >
<!--[if lte IE 5]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie ie8">
<![endif]-->
<div id="headerbanner">
</div>
<div id="wrapper">
<div id="navbarTopSlots">
</div>
<div id="topSlots">
<div id="top-0"></div>
<div id="top-1">
<div id="ap_header" class="ap_header">
<img src="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/amazon-logo._CB138360615_.gif" height="36" alt="Amazon Logo" width="126" border="0"/>
</div>
</div>
<div id="top-2"></div>
<div id="top-3"></div>
<div id="top-4"></div>
<div id="top-5"></div>
<div id="top-6"></div>
<div id="top-7"></div>
<div id="top-8"></div>
<div id="top-9"></div>
<div id="top-10"></div>
</div>
<div id="leftSlots">
<div id="left-0"></div>
<div id="left-1"></div>
<div id="left-2"></div>
<div id="left-3"></div>
<div id="left-4"></div>
<div id="left-5"></div>
<div id="left-6"></div>
<div id="left-7"></div>
<div id="left-8"></div>
<div id="left-9"></div>
<div id="left-10"></div>
</div>
<div id="centerSlots">
<div id="center-0"></div>
<div id="title-slot">
<!--[if lte IE 5]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie ie8">
<![endif]-->
<div id="ap_title_pagelet">
</div>
<!--[if lte IE 8]>
</div>
<![endif]-->
</div>
<div id="message-box-slot">
<div id="message_warning" class="message warning" style="display:none">
<span></span>
<h6>Please Enable Cookies to Continue</h6>
<p>
To continue shopping at Amazon, please enable cookies in your Web browser.
</p>
<p>
<a href="/gp/help/customer/display.html/ref=ap_cookie_error_help??nodeId=200168080" target="AmazonHelp" onclick="return amz_js_PopWin(this.href,'AmazonHelp','width=700,height=800,resizable=1,scrollbars=1,toolbar=1,status=1');return false;" >
Learn more
</a>
about cookies and how to enable them.
</p>
</div>
<script type="text/javascript">
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
function deleteCookie ( cookie_name )
{
var cookie_date = new Date ( ); // current date & time
cookie_date.setTime ( cookie_date.getTime() - 1 );
document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}
function checkCookieEnabled(nodeId)
{
setCookie('amznTest','1',null);
if(getCookie('amznTest')){
deleteCookie('amznTest');
}else{
document.getElementById(nodeId).style.display = 'block';
}
}
checkCookieEnabled('message_warning');
</script>
</div>
<div id="center-1"></div>
<div id="signin-slot">
<script>
function cf() {
if (typeof window.uet === 'function') {
uet('cf');
}
if (window.embedNotification &&
typeof window.embedNotification.onCF === 'function') {
embedNotification.onCF();
}
}
</script>
<!--[if lte IE 5]>
<div class="ie">
<![endif]-->
<!--[if IE 6]>
<div class="ie ie6">
<![endif]-->
<!--[if IE 7]>
<div class="ie ie7">
<![endif]-->
<!--[if IE 8]>
<div class="ie ie8">
<![endif]-->
<form name="signIn" method="POST" id="ap_signin_form" novalidate="novalidate" action="https://www.amazon.in/ap/signin"
onsubmit="var test1 = apCheckRequiredFields('ap_signin_form', ['ap_email','ap_password']);
return (apValidateEmail('ap_email') && test1);"
>
<input type="hidden" name="appActionToken" value="scIhj2FOCtxr39z7eUIj2FWeNOWxtIwj3D" /><input type="hidden" name="appAction" value="SIGNIN" />
<input type="hidden" name="openid.pape.max_auth_age" value="ape:MA==" />
<input type="hidden" name="openid.ns" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjA=" />
<input type="hidden" name="openid.ns.pape" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvZXh0ZW5zaW9ucy9wYXBlLzEuMA==" />
<input type="hidden" name="prevRID" value="ape:MEhOWlBQUjQ3Rzg0U1QwREJTRVo=" />
<input type="hidden" name="pageId" value="ape:YW16bl9hc3NvY2lhdGVzX2lu" />
<input type="hidden" name="openid.identity" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjAvaWRlbnRpZmllcl9zZWxlY3Q=" />
<input type="hidden" name="openid.claimed_id" value="ape:aHR0cDovL3NwZWNzLm9wZW5pZC5uZXQvYXV0aC8yLjAvaWRlbnRpZmllcl9zZWxlY3Q=" />
<input type="hidden" name="openid.mode" value="ape:Y2hlY2tpZF9zZXR1cA==" />
<input type="hidden" name="openid.assoc_handle" value="ape:YW16bl9hc3NvY2lhdGVzX2lu" />
<input type="hidden" name="openid.return_to" value="ape:aHR0cHM6Ly9hZmZpbGlhdGUtcHJvZ3JhbS5hbWF6b24uaW4vZ3AvYXNzb2NpYXRlcy9uZXR3b3JrL21haW4uaHRtbD9pZT1VVEY4JipWZXJzaW9uKj0xJiplbnRyaWVzKj0w" />
<div id="ap_signin1a_pagelet" class="ap_table ap_pagelet">
<div id="ap_signin1a_pagelet_title" class="ap_row ap_pagelet_title">
<h1>Sign In</h1>
</div>
<div id="ap_signin1a_email_section_title" class="ap_row ap_section_title">
<h2>
What is your e-mail address?
</h2>
</div>
<div id="ap_signin1a_email_row" class="ap_row">
<span class="ap_col1 ap_bold ap_right ap_no_collapse">
<label for="ap_email">
My e-mail address is:
</label>
</span>
<span class="ap_col2 ap_left">
<input id="ap_email" name="email" value="" type="email" size="30" maxlength="128" tabindex="1" autocorrect="off" autocapitalize="off" />
</span>
</div>
<div id="ap_signin_custom_message" class="center clear-both" >
</div>
<div id="ap_signin1a_password_section_title" class="ap_row ap_section_title">
<h2> Do you have an Amazon password? </h2>
</div>
<div id="ap_signin1a_new_cust_radio_row" class="ap_row">
<span id="" class="ap_col1 ap_right ap_no_collapse">
<input type="radio" onclick="setElementAvailability('ap_password', false);jQuery('#ap_captcha_table').hide();" name="create" id="ap_signin_create_radio" value="1" tabindex="6" />
</span>
<span id="" class="ap_col2 bold ap_radio_label">
<label for="ap_signin_create_radio">I am a new customer.</label>
<div class="small">(you'll create a password later)</div>
</span>
</div>
<div id="ap_signin1a_exist_cust_radio_row" class="ap_row">
<span class="ap_col1 ap_right" >
<input type="radio" name="create" onclick="setElementAvailability('ap_password', true);jQuery('#ap_captcha_table').show();" id="ap_signin_existing_radio" value="0" tabindex="7" checked="checked" />
</span>
<span class="ap_col2 bold ap_radio_label"><label for="ap_signin_existing_radio">I am a returning customer, <br>and my password is:</label></span>
</div>
<div id="ap_signin1a_password_row" class="ap_row">
<span class="ap_col1"> </span>
<span class="ap_col2">
<input id="ap_password" name="password" type="password" maxlength="1024" size="20" tabindex="2" onkeypress="displayCapsWarning(event,'ap_caps_warning', this);" class="password"/>
</span>
<span id="ap_caps_warn_span">
<div id="ap_caps_warning" class="ap_caps_warn ap_col3_caps_warn" style="visibility:hidden;">
<!--[if lt IE 7]>
<style type="text/css">
.ap_caps_warn {
display: none;
}
</style>
<![endif]-->
<b>Caps Lock is on.</b> <font color="black">This may cause you <br>to enter your password incorrectly.</font>
</div>
</span>
</div>
<!--[if IE]><![if !IE]><![endif]-->
<div id="ap_small_forgot_password_link">
<!--[if IE]><![endif]><![endif]-->
<!--[if lte IE 6]>
<div id="ap_small_forgot_password_link_ie_old" class="ie_old">
<![endif]-->
<!--[if gte IE 7]>
<div id="ap_small_forgot_password_link_ie_new" class="ie_new">
<![endif]-->
<span class="small" id="ap_small_forgot_password_span">
</span>
</div>
<div id="ap_signin1a_signin_button_row" class="ap_row">
<span class="ap_col1"> </span>
<span class="ap_col2">
<input type="image" src="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/buttons/sign-in-secure._CB138348554_.gif" id="signInSubmit" height="22" onload="cf()" alt="Continue" width="201" tabindex="5" value="Continue" border="0" />
</span>
<div class="ap_csm_marker" style="display:none;">
<script type="text/javascript">if (typeof uet == 'function') { uet('af'); }</script>
</div>
</div>
<div id="ap_signin1a_forgot_password_row" class="ap_row">
<span class="ap_col1"> </span>
<span class="ap_col2">
<a href="https://www.amazon.in/ap/forgotpassword?openid.pape.max_auth_age=0&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.ns.pape=http%3A%2F%2Fspecs.openid.net%2Fextensions%2Fpape%2F1.0&prevRID=0HNZPPR47G84ST0DBSEZ&pageId=amzn_associates_in&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.mode=checkid_setup&openid.assoc_handle=amzn_associates_in&openid.return_to=https%3A%2F%2Faffiliate-program.amazon.in%2Fgp%2Fassociates%2Fnetwork%2Fmain.html%3Fie%3DUTF8%26*Version*%3D1%26*entries*%3D0">
Forgot your password?
</a>
</span>
</div>
<div id="ap_signin1a_cnep_row" class="ap_row">
<span class="ap_col1"> </span>
<span id="ap_signin1a_cnep_row_col2" class="ap_col2">
Has your e-mail address changed since your last order?
</span>
</div>
</div>
</form>
<!--[if lte IE 8]>
</div>
<![endif]-->
</div>
<div id="center-2"></div>
<div id="center-3"></div>
<div id="center-4"></div>
<div id="center-5"></div>
<div id="center-6"></div>
<div id="center-7"></div>
<div id="center-8"></div>
<div id="center-9"></div>
<div id="center-10"></div>
</div>
<div id="rightSlots">
<div id="right-0"></div>
<div id="right-1"></div>
<div id="right-2"></div>
<div id="right-3"></div>
<div id="right-4"></div>
<div id="right-5"></div>
<div id="right-6"></div>
<div id="right-7"></div>
<div id="right-8"></div>
<div id="right-9"></div>
<div id="right-10"></div>
</div>
<div id="bottomSlots">
<div id="bottom-1">
<div id="ap_privacy" class="ap_privacy_footer">
<p class="tiny" align="center">
<a id="footer_conditions_of_use_URL_link" href="/gp/help/customer/display.html/ref=ap_footer_condition_of_use?ie=UTF8&nodeId=200545940" onclick="return amz_js_PopWin(this.href+'&pop-up=1','AmazonHelp','width=340,height=340,resizable=1,scrollbars=1,toolbar=1,status=1');" target="AmazonHelp" >Conditions of Use</a>
<a id="footer_privacy_notice_URL_link" href="/gp/help/customer/display.html/ref=ap_footer_privacy_notice?ie=UTF8&nodeId=200534380" onclick="return amz_js_PopWin(this.href+'&pop-up=1','AmazonHelp','width=340,height=340,resizable=1,scrollbars=1,toolbar=1,status=1');" target="AmazonHelp" >Privacy Notice</a>
<br>
<span id="ap_footer_copyright">© 1996-2015, Amazon.com, Inc. or its affiliates</span>
</p>
</div>
</div>
<div id="bottom-2"></div>
<div id="bottom-3"></div>
<div id="bottom-4"></div>
<div id="bottom-5"></div>
<div id="bottom-6"></div>
<div id="bottom-7"></div>
<div id="bottom-8"></div>
<div id="bottom-9"></div>
<div id="bottom-10"></div>
</div>
<div id="footerSlots">
<div id="footer-1"></div><!-- footer-1 -->
<div id="footer-2"></div><!-- footer-2 -->
<div id="footer-3"></div><!-- footer-3 -->
<div id="footer-4"></div><!-- footer-4 -->
<div id="footer-5"></div><!-- footer-5 -->
<div id="footer-6"></div><!-- footer-6 -->
<div id="footer-7"></div><!-- footer-7 -->
<div id="footer-8"></div><!-- footer-8 -->
<div id="footer-9"></div><!-- footer-9 -->
<div id="footer-10"></div><!-- footer-10 -->
</div><!-- footerSlots -->
<div id="navbarBottomSlots">
</div>
<script type="text/javascript">
(function() {
try {
if ( ue && ue.tag && window.performance.getEntriesByType ) {
var t = window.performance.getEntriesByType('resource');
if ( t ) {
var d = 0;
for ( var i = 0; i < t.length; i++ )
if ( t[i].duration > d ) d = t[i].duration;
ue.tag('ap-rt-' + Math.ceil(d / 100) * 100);
}
}
}
catch (e) {}
})();
</script>
<div id="javascriptSlots">
<div id="javascript-slot-0">
<script type="text/javascript" src="https://images-na.ssl-images-amazon.com/images/G/31/javascripts/lib/jquery/jquery-1.2.6.min._CB166146506_.js"></script>
</div>
<div id="javascript-slot-1"></div>
<div id="javascript-slot-2"></div>
<div id="javascript-slot-3"></div>
<div id="javascript-slot-4"></div>
<div id="javascript-identity">
<script type="text/javascript" src="https://images-na.ssl-images-amazon.com/images/G/31/authportal/common/js/ap_global-1.1._CB309255203_.js"></script>
</div>
<div id="javascript-slot-5"></div>
<div id="js-trms">
<script id="fwcim-script" type="text/javascript" src="https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/login/fwcim._CB342129342_.js"></script>
<script type="text/javascript">
fwcim.useMercury('https://images-na.ssl-images-amazon.com/images/G/31/x-locale/common/login/mercury9._CB372126299_.swf')
fwcim.profile();
</script>
</div>
<div id="cache-1"></div>
<div id="cache-2"></div>
</div><!-- javascriptSlots -->
</div> <!-- end div wrapper -->
<!--[if lte IE 8]>
</div>
<![endif]-->
</body>
</html>
connection.getInputStream() returns an InputStream. So you need to read from the InputStream. A good way to read from the InputStream and convert it to string would be
val page = connection.getInputStream()
val pageString = scala.io.Source.fromInputStream(page).getLines().mkString("\n")
used powershell to do web ui automation. came up an exception: invoke method failed, because [System.__ComObject] does not contain “click” method.
can submit type input be clicked?
i used getElementsByTagName getElementsByClassName getElementsByName , does not work.
anyone can help me on this?
powershell code is below:
# open the specified web site and commit the key
$ie = new-object -com "InternetExplorer.Application"
$ie.navigate("http://gitlab.alibaba-inc.com/keys/new")
$ie.visible = $true
while($ie.busy) {sleep 1}
$doc = $ie.document
# commit the button
$commit = $doc.getElementsByTagName("commit")
if($commit)
{$commit.click()}
the html source is as below:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>
Profile |
GitLab
</title>
<link href="/assets/favicon-4b751da746de7855d7eb8123072388ed.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="/assets/application-a9eac7f5b0c3b922de8997ae9ad74ab0.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-61398d184a36e6ae900134f123d5d649.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="9SLFk6AwlsN2FoyO8xPY+M1hEbKfqlLTQ4CSDVc4efE=" name="csrf-token" />
<script type="text/javascript">
//<![CDATA[
window.gon = {};gon.default_issues_tracker="gitlab";gon.api_version="v3";gon.api_token="xkMg31Ssva322SDF cgxY";gon.gravatar_url="http://www.gravatar.com/avatar/%{hash}?s=% {size}&d=mm";gon.relative_url_root="";
//]]>
</script>
</head>
<body class='ui_basic profile' data-page='keys:new'>
<header class='navbar navbar-static-top navbar-gitlab'>
<div class='navbar-inner'>
<div class='container'>
<div class='app_logo'>
<span class='separator'></span>
<a href="/" class="home has_bottom_tooltip" title="Dashboard"><h1>GITLAB</h1>
</a><span class='separator'></span>
</div>
<h1 class='project_name'>Profile</h1>
<ul class='nav'>
<li>
<a>
<div class='hide turbolink-spinner'>
<i class='icon-refresh icon-spin'></i>
Loading...
</div>
</a>
</li>
<li>
<div class='search'>
<form accept-charset="UTF-8" action="/search" class="navbar-form pull-left" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<input class="search-input" id="search" name="search" placeholder="Search" type="text" />
<input id="group_id" name="group_id" type="hidden" />
<input id="repository_ref" name="repository_ref" type="hidden" />
<div class='search-autocomplete-json hide' data-autocomplete-opts='[{"label":"project: kelude2","url":"/kelude2"},{"label":"My Profile","url":"/profile"},{"label":"My SSH Keys","url":"/keys"},{"label":"My Dashboard","url":"/"},{"label":"Admin Section","url":"/admin"},{"label":"help: API Help","url":"/help/api"},{"label":"help: Markdown Help","url":"/help/markdown"},{"label":"help: Permissions Help","url":"/help/permissions"},{"label":"help: Public Access Help","url":"/help/public_access"},{"label":"help: Rake Tasks Help","url":"/help/raketasks"},{"label":"help: SSH Keys Help","url":"/help/ssh"}, {"label":"help: System Hooks Help","url":"/help/system_hooks"},{"label":"help: Web Hooks Help","url":"/help/web_hooks"},{"label":"help: Workflow Help","url":"/help/workflow"}]'> </div>
</form>
</div>
</li>
<li>
<a href="/public" class="has_bottom_tooltip" data-original-title="Public area" title="Public area"><i class='icon-globe'></i>
</a></li>
<li>
<a href="/s/heyun" class="has_bottom_tooltip" data-original-title="Public area" title="My snippets"><i class='icon-paste'></i>
</a></li>
<li>
<a href="/projects/new" class="has_bottom_tooltip" data-original-title="New project" title="Create New Project"><i class='icon-plus'></i>
</a></li>
<li>
<a href="/profile" class="has_bottom_tooltip" data-original-title="Your profile" title="My Profile"><i class='icon-user'></i>
</a></li>
<li>
<a href="/users/sign_out" class="has_bottom_tooltip" data-method="delete" data-original-title="Logout" rel="nofollow" title="Logout"><i class='icon-signout'></i>
</a></li>
<li>
<a href="/u/heyun" class="profile-pic"><img alt="F3ea5164088694b48e4980e52d831927? s=26&d=mm" src="http://www.gravatar.com/avatar/f3ea5164088694b48e4980e52d831927? s=26&d=mm" />
</a></li>
</ul>
</div>
</div>
</header>
<div class='flash-container'>
</div>
<nav class='main-nav'>
<div class='container'><ul>
<li class="home"><a href="/profile" title="Profile"><i class='icon-home'></i>
</a></li><li class="">Account
</li><li class="">Notifications
</li><li class="active"><a href="/keys">SSH Keys
<span class='count'>1</span>
</a></li><li class="">Design
</li><li class="">History
</li></ul>
</div>
</nav>
<div class='container'>
<div class='content'><h3 class='page_title'>Add an SSH Key</h3>
<hr>
<div>
<form accept-charset="UTF-8" action="/keys" class="new_key" id="new_key" method="post"> <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="9SLFk6AwlsN2FoyO8xPY+M1hEbKfqlLTQ4CSDVc4efE=" /></div><div class='clearfix'>
<label for="key_title">Title</label>
<div class='input'><input id="key_title" name="key[title]" size="30" type="text" /> </div>
</div>
<div class='clearfix'>
<label for="key_key">Key</label>
<div class='input'>
<textarea class="xxlarge thin_area" cols="40" id="key_key" name="key[key]" rows="20">
</textarea>
<p class='hint'>
Paste your public key here. Read more about how generate it
here
</p>
</div>
</div>
<div class='actions'>
<input class="btn btn-save" name="commit" type="submit" value="Save" />
Cancel
</div>
</form>
</div>
<script>
$('#key_key').on('keyup', function(){
var title = $('#key_title'),
val = $('#key_key').val(),
key_mail = val.match(/([a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+|\.[a-zA-Z0-9._-]+)/gi);
if( key_mail && key_mail.length > 0 && title.val() == '' ){
$('#key_title').val( key_mail );
}
});
</script>
</div>
</div>
</body>
</html>
You're looking for the wrong element. getElementsByTagName() is looking for the actual tag name (input), not the value of the tag's name-attribute (commit). Also, getElementsByTagName() returns a collection of COM objects. Even if no matching tag is found, the method will still return a collection (with 0 elements). You need to either check the Length property and then access the first element of the collection:
$commit = $doc.getElementsByTagName("input")
if ($commit.Length -gt 0) {
$commit.item(0).click()
}
or filter the element with the name you're looking for from the collection:
$commit = $doc.getElementsByTagName("input") | ? { $_.name -eq "commit" }
if ($commit) { $commit.click() }
I could not access the url you had listed above so I used the MIT website to show you an example of how can this be done.
# setup
$ie = New-Object -com InternetExplorer.Application
$ie.visible=$true
$ie.navigate("http://web.mit.edu/")
while($ie.ReadyState -ne 4) {start-sleep -m 100}
$termsField = $ie.document.getElementsByName("terms")
#($termsField)[0].value ="powershell"
$submitButton = $ie.document.getElementsByTagName("input")
Foreach($element in $submitButton )
{
#look for this field by value this is the field(look for screenshot below)
if($element.value -eq "Search"){
Write-Host $element.click()
}
}
Start-Sleep 10
in the following, I am using filter('input:text,textarea') to set input fields as read only, (and make them opaque). However, this selector is selecting only the text inputs, and not the textarea. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>setReadOnly() Test</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<link rel="stylesheet" type="text/css" href="test.setReadOnly.css">
<script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
<script type="text/javascript" src="../scripts/jqia2.support.js"></script>
<script type="text/javascript">
(function($){
$.fn.setReadOnly = function(readonly) {
return this.filter('input:text,textarea')
.attr('readOnly',readonly)
.css('opacity', readonly ? 0.5 : 1.0)
.end();
};
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$('#sameAddressControl').click(function(){
var same = this.checked;
$('#billAddress').val(same ? $('#shipAddress').val():'');
$('#billCity').val(same ? $('#shipCity').val():'');
$('#billState').val(same ? $('#shipState').val():'');
$('#billZip').val(same ? $('#shipZip').val():'');
$('#bill_random_field').val(same ? $('#ship_random_field').val():'');
$('#billingAddress input').setReadOnly(same);
});
});
</script>
</head>
<body>
<div data-module="Test setReadOnly()">
<form name="testForm">
<div>
<label>First name:</label>
<input type="text" name="firstName" id="firstName"/>
</div>
<div>
<label>Last name:</label>
<input type="text" name="lastName" id="lastName"/>
</div>
<div id="shippingAddress">
<h2>Shipping address</h2>
<div>
<label>Street address:</label>
<input type="text" name="shipAddress" id="shipAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="shipCity" id="shipCity"/>
<input type="text" name="shipState" id="shipState"/>
<input type="text" name="shipZip" id="shipZip"/>
<textarea name="random_field" rows="2" cols="20" id="ship_random_field"></textarea>
</div>
</div>
<div id="billingAddress">
<h2>Billing address</h2>
<div>
<input type="checkbox" id="sameAddressControl"/>
Billing address is same as shipping address
</div>
<div>
<label>Street address:</label>
<input type="text" name="billAddress"
id="billAddress"/>
</div>
<div>
<label>City, state, zip, random_field:</label>
<input type="text" name="billCity" id="billCity"/>
<input type="text" name="billState" id="billState"/>
<input type="text" name="billZip" id="billZip"/>
<textarea name="random_field" rows="2" cols="20" id="bill_random_field"></textarea>
</div>
</div>
</form>
</div>
</body>
</html>
Try to change the line $('#billingAddress input').setReadOnly(same); to $('#billingAddress input,textarea').setReadOnly(same);
Update
Actually, must be like you said in the comment: $('#billingAddress input,#billingAddress textarea').