We Keep Coding

openModal is not defined at HTMLAnchorElement.onclick

Every time I click on the icon which is defined on the following line of user.ejs
+
it is shown the openModal() is not defined at htmlanchorElement.onclick. the openModal function is defined in the script section of the file add-user-modal like this:
function openModal() {
modal.style.display = "block";
}
please help!
this is my user.ejs file
// starts here
<%- include('./partial/header.ejs'); %>
<div class="manageUser-container">
<div id="title">
<h2>Manage Users</h2>
</div>
<div class="new-message-container new-user">
+
</div>
<div id="users-table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Manage</th>
</tr>
</thead>
<tbody id="users-table">
<tr id="">
<td class="name">
<img src="./images/user1.png" />
<span>User 1</span>
</td>
<td>email#email.com</td>
<td class="manage">
<img src="./images/trash.png" alt="Delete" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<%- include('./partial/add-user-modal.ejs'); %>
</body>
</html>
// this is the add-user-modal.ejs file
<div class="modal-wrapper" id="add-user-modal">
<div class="modal">
+
<div class="modal-title">
<h2>Create New User</h2>
</div>
<div class="modal-body">
<form method="post" action="/users" enctype="multipart/form-data" id="add-user-form">
<input type="text" placeholder="enter name" name="name" />
<p class="error name-error"></p>
<input type="text" placeholder="enter email" name="email" />
<p class="error email-error"></p>
<input type="text" placeholder="enter mobile" name="mobile" />
<p class="error mobile-error"></p>
<input type="password" placeholder="enter password" name="password" />
<p class="error password-error"></p>
<input type="file" name="avatar" />
<p class="error avatar-error"></p>
<p class="error common-error"></p>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
<script>
console.log('Hello from console');
const modal = document.querySelector("#add-user-modal");
const form = document.querySelector("#add-user-form");
function closeModal() {
modal.style.display = "none";
}
function openModal() {
modal.style.display = "block";
}
// success toast
const successToast = Toastify({
text: "User was added successfully. Reloading the list...",
duration: 1000
})
// form submit handler
form.onSubmit = async function (event) {
event.preventDefault();
}
// clear all the error first
const errorPlaceHolder = document.querySelectorAll("p.error");
for (let index = 0; index < errorPlaceHolder.length; index++) {
errorPlaceHolder[index].style.display = "none";
}
const inputErrors = document.querySelectorAll("input", "error");
if (inputErrors.length > 0) {
for (let index = 0; index < inputErrors.length; index++) {
inputErrors[index].classList.remove("error");
}
}
// prepare the form data
const formData = new FormData(form);
// send the request to server
let response = await fetch("/users", {
method: "POST",
body: formData,
});
// get response
let result = await response.json();
// handle error and response
if (result.errors) {
//errors
Object.keys(result.errors).forEach((fieldName) => {
// add error class to all the input fields
form(fieldName).classlist.add("error");
// set all error to the place holder text content
const errorPlaceHolder = document.querySelector(`.${fieldName}-error`);
errorPlaceHolder.textContent = result.errors[fieldName].msg;
// make all place holder visible
errorPlaceHolder.style.display = "block";
});
} else {
// success
successToast.showToast();
closeModal();
document.querySelector("p.error".style.display) = "none";
// reload the page after one second
setTimeout(() => {
location.reload();
}, 1000);
}
</script>

How to display error on the same page when an error is returned by a form?

I have built a login form using below code.
I am using a CGI version CGIDEV2 native to IBMi series. I am Validating the userid and password in the flower.cgi program. If the userid and password are validated, I am loading another html file to show a table. This works flawlessly.
If the userid and password are wrong, I am returning out of the program without writing anything. This results in a 500 Internal server error.
I want to capture this 500 Internal server error using javascript. I have tried using ajax but was not successful as I have limited understanding of javascript.
What could be the best way to achieve this?
<form method="POST" action="/nature/flower.cgi">
<!-- Username input -->
<div class="form-outline mb-4">
<input type="text" name="userid" id="form3Example3" class="form-control form-control-lg" style="text-transform:uppercase" placeholder="Enter a valid IBMi UserID" />
<label class="form-label" for="form3Example3">IBMi UserID</label>
</div>
<!-- Password input -->
<div class="form-outline mb-3">
<input type="password" name="passwd" id="form3Example4" class="form-control form-control-lg" placeholder="Enter password" />
<label class="form-label" for="form3Example4">Password</label>
<br>
</div>
<div class="d-flex justify-content-between align-items-center">
<!-- Checkbox -->
<div class="form-check mb-0">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
<label class="form-check-label" for="form2Example3">Remember me</label>
</div>
Forgot password?
</div>
<div class="text-center text-lg-start mt-4 pt-2">
<button type="submit" class="btn btn-primary btn-lg" style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
</div>
</form>

You can't capture an error from a URL the browser is navigating to.
The only way you could would be if you replaced the normal form submission with Ajax (in which the request is made and the response processed with JavaScript).
Generally speaking, if you were going to do that you would also want to rewrite the CGI program so it output structured data (e.g. as JSON) instead of semantic data (HTML).
It would not be a particularly small undertaking. You said you had tried it, which probably gives you some idea of the scope of it (i.e. far outside the scope of a Stackoverflow question).
A more sensible approach would almost certainly be to track down the cause of the 500 error and change the CGI program so it would capture it itself.

yes, the fetch api in javascript can post form data to your CGI program and check for the 500 response code. Then the web page can either display an error message or run the form.submit() method to actually submit the form up to the server.
Here is PHP and javascript code that simulates the whole thing. Should work similar with CGI. The key is you change the form submit button from type 'submit' to type 'button'. That way, clicking the submit button can run javascript code instead of the form being submitted to the server.
<?php
// site/tester/php/submit-form.php
header("Content-type: text/html; charset:utf-8;");
?>
<?php
$userid = isset($_POST["userid"]) ? $_POST["userid"]: '' ;
$passwd = isset($_POST["passwd"]) ? $_POST["passwd"]: '' ;
$remember = isset($_POST["remember"]) ? $_POST["remember"]: 'off' ;
if ( strtolower($userid) == 'alex')
{
http_response_code( 500 );
echo "$userid - invalid user name";
exit ;
}
?>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="col-auto">
<h1>submit form demo</h1>
</div>
</div>
</div>
<div class="container">
<div class="row mt-3">
<div class="col-4">
<form method="POST" id="main-form" action="./index.php">
<!-- Username input -->
<div class="form-outline mb-4">
<input type="text" name="userid" id="userid"
class="form-control form-control-lg"
value="<?= $userid ?>"
style="text-transform:uppercase" placeholder="Enter a valid IBMi UserID" />
<label class="form-label" for="userid">IBMi UserID</label>
</div>
<!-- Password input -->
<div class="form-outline mb-3">
<input type="password" name="passwd" id="passwd" class="form-control form-control-lg"
placeholder="Enter password" />
<label class="form-label" for="passwd">Password</label>
<br>
</div>
<div class="d-flex justify-content-between align-items-center">
<!-- Checkbox -->
<div class="form-check mb-0">
<input class="form-check-input me-2" type="checkbox"
<?= ($remember == 'on' ? 'checked' : '' ) ?>
name="remember" id="form2Example3" />
<label class="form-check-label" for="form2Example3">Remember me</label>
</div>
Forgot password?
</div>
<div class="text-center text-lg-start mt-4 pt-2">
<button id="login-button" type="button" class="btn btn-primary btn-lg"
style="padding-left: 2.5rem; padding-right: 2.5rem;">
Login</button>
</div>
</form>
</div>
</div>
<div id="login-errmsg-collapse" class="collapse row mt-3">
<div class="alert alert-warning" role="alert">
<p id="login-errmsg">Invalid login. User name does not exist.</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-3">
<div class="col-auto">
<p>userid: <?= $userid ?></p>
<p>passwd: <?= $passwd ?></p>
<p>remember: <?= $remember ?></p>
</div>
</div>
</div>
<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>
<script src="./app.js"></script>
</body>
// ./submit-form/app.js
// enable the submit button click handler.
{
const elem = document.getElementById('login-button');
elem.addEventListener('click', event =>
{
login_click();
});
}
// -------------------------------- login_errmsg_show ---------------------
function login_errmsg_show( respText )
{
// show the response message in the bootstrap collapse alert box.
{
const elem = document.getElementById('login-errmsg') ;
elem.textContent = respText ;
}
const myCollapse = document.getElementById('login-errmsg-collapse')
const bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
});
bsCollapse.show( ) ;
}
// -------------------------------- login_click -------------------
async function login_click()
{
const elem = document.getElementById('main-form');
if (elem)
{
const {respText, status} = await webpage_post( ) ;
if ( status != '500')
{
elem.submit();
}
else
{
login_errmsg_show( respText ) ;
}
}
}
// --------------------------------- webpage_post -----------------------
async function webpage_post( )
{
const userid = document.getElementById('userid').value ;
const passwd = document.getElementById('passwd').value ;
const remember = 'on' ;
const url = "./index.php";
const params = { userid, passwd, remember } ;
const query = object_toQueryString(params);
const response = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: query
});
const respText = await response.text();
const status = response.status ;
console.log( respText ) ;
return {respText, status} ;
}
// ------------------------- object_toQueryString ------------------------
function object_toQueryString(obj)
{
const qs = Object.keys(obj)
.map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
.join('&');
return qs;
}

My JavaScript form validation function is called two times

I am trying to print the value from the form when a user submits the function but a blank value is returned.
Here is my JavaScript code:
var login = new function()
{
var name = null ;
this.validation = function()
{
this.name = document.getElementById("Username").value;
console.log(this.name);
document.getElementById("demo").innerHTML = this.name;
};
};
And my HTML form as :
<body>
<div class="container">
<div class="col-md-8">
<div class="starter-template">
<h1>Login with javascript</h1>
<p class="lead">Please Enter Following Details</p>
<h1 id="demo"></h1>
<form name="form" onSubmit="return login.validation();" action="#" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" name="username" class="form-control" id="Username" placeholder="Please Enter your Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="Email" placeholder="Please enter your Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Re-Password</label>
<input type="password" class="form-control" id="Re-Password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<script src="js/login.js"></script>
<script href="js/bootstrap.js"></script>
<!-- /.container -->
</body>
Why does the value not get into html <p> tag.

Your code simply works. But since the function executes on submitting the form, the username gets logged in the console fast before the page refreshed with submitted data. You can confirm this and test it by adding event.preventDefault(); to the function to prevent submitting the form so the page would stay visible with the console.
<script>
var login = new function()
{
var name = null ;
this.validation = function()
{
event.preventDefault();
this.name = document.getElementById("Username").value;
console.log(this.name);
document.getElementById("demo").innerHTML = this.name;
};
};
</script>
If that's not what you're looking for, let me know.

We the javascript validation failed you need to return false. If you don't it will proceed your form further. Thanks
var login = new function()
{
var name = null ;
this.validation = function()
{
this.name = document.getElementById("Username").value;
document.getElementById("demo").innerHTML = this.name;
return false;
};
};

appending a json file with javascript

I have an existing json file (data.json) that I would like to append with information captured from a form.
I have the form outputting json but I am not sure how to go about getting this to add to my existing json file.
So the form looks like this:
<form id="test" action="#" method="post">
<div class="form-group">
<label for="department">Department:</label>
<input class="form-control" type="text" name="department" id="department" />
</div>
<div class="form-group">
<label for="role">Role title:</label>
<input class="form-control" type="text" name="role" id="role" />
</div>
<div class="form-group">
<label for="pay_status">Pay status:</label>
<input class="form-control" type="text" name="pay_status" id="pay_status"/>
</div>
<div class="form-group">
<label for="typicalposts">Typical number of posts in a year:</label>
<input class="form-control" type="text" name="typicalposts" id="typicalposts"/>
</div>
<div class="form-group">
<label for="email">Restrictions:</label>
<input class="form-control" type="text" name="restrictions" id="restrictions" />
</div>
<div class="form-group">
<label for="recruitment_date">Recruitment date:</label>
<input class="form-control" type="date" name="recruitment_date" id="recruitment_date" />
</div>
<div class="form-group">
<label for="weblink">Weblink:</label>
<input class="form-control" type="text" name="weblink" id="weblink" />
</div>
<div class="text-center">
<p>
<input type="submit" value="Send" class="btn btn-primary center_block" />
</p>
</div>
</form>
<pre id="output" ></pre>
And the js I have to turn this data to json is:
(function() {
function toJSONString( form ) {
var obj = {};
var elements = form.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if( name ) {
obj[ name ] = value;
}
}
return JSON.stringify( obj );
}
document.addEventListener( "DOMContentLoaded", function() {
var form = document.getElementById( "test" );
var output = document.getElementById( "output" );
form.addEventListener( "submit", function( e ) {
e.preventDefault();
var json = toJSONString( this );
output.innerHTML = json;
}, false);
});
})();
This shows the json in #output for the moment, I would like what is being shown here to be appended to data.json instead
Thanks for your help

My files are hosted on a server that I dont have access too which is why I would like to do this via js
So BBC News have an HTML document at http://www.bbc.co.uk/news. Would it be a good idea if it was possible for my browser to edit the page and save it back to the server?
It is absolutely impossible to do what you want, because it would require that any old browser could edit any old file on any old server.
In order to change data on the server, you have to have the cooperation of the server (which you say you don't have).

Send errors from Javascript using Html form

I'm trying to collect errors from js and send to email, but I'm not receving any email upon form submission. Here's my code:
<form id="vm-user-form" class="pure-form pure-form-aligned vm-user-form form-horizontal">
<div class="vm-modal-body">
<h4>Please provide us with these details.</h4>
<fieldset class="form-group">
<!-- <div class="pure-control-group"> -->
<label for="username">Name:</label>
<input id="vm-username" class="pure-input-1" name="username" type="text" placeholder="Your Names" pattern="[\w]{3,20}(\s)?[\w]{3,20}" title="eg. John Don" aria-required="true" required>
<!-- </div> -->
<!-- <div class="pure-control-group"> -->
<label for="phoneno">Phone Number:</label>
<input id="vm-phoneno" class="pure-input-1" name="phoneno" type="text" placeholder="Your Phone No." pattern="^(\+)?[\d]{6,14}$" title="eg. 0203001575, 023001575" aria-required="true" required>
<!-- </div> -->
<!-- <div class="pure-control-group"> -->
<label for="email">Email Address:</label>
<input id="vm-email" class="pure-input-1" name="emailaddress" type="email" placeholder="example-name#gmail.com" aria-required="true" required>
<!-- </div> -->
<!-- <div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div> -->
</fieldset>
</div>
<div class="vm-modal-footer">
<!-- <div class="pure-controls"> -->
<button type="button" class="vm-close-form hide pure-button button-danger" data-dismiss="modal">Close</button>
<button type="submit" id="vm-submit-btn" class="pure-button button-vm">Submit</button>
<!-- </div> -->
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</form>
Below is the Javascript code that is supposed to work with the Html code.
JavaScript:
var politeErrorResponse = function(reason) {
var waitToLoad = setTimeout(function() {
// Save the details for later use
status.reason = reason;
// Load up the form
$('.vm-popup-form').on('hidden.bs.modal', function(e) {
// do something...
// $('.vm-popup-form').modal('toggle');
// alert("previous modal hidden.");
$(".vm-close-form").show(300).addClass("hide").next().show(300);
});
$('.vm-popup').parent().load(chrome.extension.getURL('resources/view/form.html'), function() {
$('.vm-popup-form').modal('toggle')
$("#vm-user-form").on("submit", function(event) {
// prevent default form submit
event.preventDefault();
if ($('#vm-username').attr('value') != "" && $('#vm-phoneno').attr('value') != "" && $('#vm-email').attr('value') !== "") {
// reason carries the following:
// reason = ["caught", "isPostFunction", "responseText", "part_html"];
// On ERROR collect these DATA
var errorDetails = {
"username": $('#vm-username').attr('value'),
"phoneno": $('#vm-phoneno').attr('value'),
"emailaddress": $('#vm-email').attr('value')
}
// add this data to reason
$.extend(true, errorDetails, status.reason);
console.log(errorDetails);
$('.vitumob-popup-form .vm-modal-body').html(function() {
// Submit the details and error, and return Response
submitErrors(errorDetails, errorDetails.isPostFunction);
$(".vm-close-form").hide(300).removeClass("hide").next().fadeToggle().prev().show(300).on("click", function() {
// $('.vm-modal').modal("hide");
document.getElementById("vitumob-user-form").submit();
});
return '<h2> Your order has been submitted. We shall contact you. Thank you.</h2>'
})
} else {
// Focus on the 1st input
$('#vm-username').focus();
}
});
// alert("triggered the loading of the form");
});
}, 3000);
// Cancel the submission of the form
}
Please Help.