I'm trying to create a webpage tool that will generate a text connection file from two forms input
First form is a for database id, will be pasted and will have to match regex ^(\w{8})-(\w{4})-(\w{4})-(\w{4})-(\w{12})$
Second form will be table name, and must not be empty. The tool doesn't know what are the possible values.
Ideally any time forms input are valid (without waiting for submit click so on keyup or input I believe), we should have a href link below the form which would be a data uri generating the txt file itself connect.txt "connect to Tablename from databaseid" (imaginary language)
I found some fiddles I tried to mix/adapt without success, mainly:
https://jsfiddle.net/fma1hyoL/4/ for dynamic text generation with validation
https://jsfiddle.net/wtp5a0o8/1/ for generating the file uri
beginner in html and javascript, could you point me in the right direction?
also, any bad practice to avoid regarding such functionnalities?
Thanks and regards
found it thanks to Dan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Romain</title>
<style>
label {
display: block;
}
input {
padding: 1.2em;
width: 25em;
}
input:required:invalid,
input:focus:invalid {
background-color: #faa;
}
#result {
border: 1px solid #333;
font-family: monospace;
padding: 1em;
display: none;
}
#result.isVisible {
display: inherit;
}
</style>
</head>
<body>
<form id="form">
<p>
<label>
Database id
<input
required
id="dbField"
type="text"
pattern="(\w{8})-(\w{4})-(\w{4})-(\w{4})-(\w{12})"
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
/>
</label>
</p>
<p>
<label>
Table name
<input
required
id="tableField"
type="text"
placeholder=""
value=""
/>
</label>
</p>
</form>
<div id="result" class="">
<a
id="resultLink"
href="#"
target = "_blank"
download = "myFile.txt"
></a>
</div>
<script>
const form = document.getElementById('form');
const dbField = document.getElementById('dbField');
const tableField = document.getElementById('tableField');
const result = document.getElementById('result');
const resultLink = document.getElementById('resultLink');
const resultButton = document.getElementById('resultButton');
// Callback: Update #result if form fields are valid
const update = function(event){
if (
!dbField.checkValidity()
|| !tableField.checkValidity()
){
// Hide result
result.classList.remove('isVisible');
return;
};
// Update link text & href
result.classList.add('isVisible');
resultLink.innerHTML = getOutputText();
resultLink.href = `data:attachment/text,${encodeURI(getOutputText())}`;
}
// Return the output text from the form field values
const getOutputText = function(){
return `connect to ${tableField.value} from ${dbField.value}`;
}
// Call update() on form keyup events
form.addEventListener('keyup', update);
</script>
</body>
</html>