We Keep Coding

Is it possible to pass my value in node and express js by clicking a button

In this problem, I want to pass my values in express js so that it will written down in node js.
I am clicking a button which will be the demo here
<form action="/measure" method="POST">
<button type="button" name="Add" > Add </button>
<button type="button" name="Substract" > Subtract </button>
<input type="submit">
</form>
I did something like this in express js
const homePage = fs.readFileSync('./index.html')
app.get('/',(req,res) => {
res.writeHead(200,{'content-type':'text/html'})
res.write(homePage)
res.end()
})
var counter = 0;
app.post('/measure',(req,res) => {
res.writeHead(200,{'content-type':'text/html'})
const {Add,Subtract,result} = req.body
if (Add) {
counter += 1;
} else if (Subtract) {
counter -= 1
}
res.write(homePage + `<h1>${counter}</h1>`)
res.end()
})
But this doesn't do anything, based on my thought, the wrong about here is the button in index html which it doesn't pass anything...Have you guys any idea how I can pass the value in the express js? I've been searching since last night about it but couldn't find the right information, All I get is this link which is not my prefer since I am not focusing yet in database LINK

A single button in a form can be represented as a <button> element. But if you want several buttons in a form, represent them all as <input type="submit">:
<form action="/measure" method="POST">
<input type="submit" name="Add" value="Add"/>
<input type="submit" name="Subtract" value="Subtract"/>
<input type="submit"/>
</form>
Depending on which button you press, you will get req.body as
{"Add": "Add"} or
{"Subtract": "Subtract"} or
{}

How to stop next page to be loading

In my project, while a particular button is clicked I want to stop the next page appearing. Here is my JavaScript code:
function checkcond() {
check_value=document.getElementById("chkvalue");
if(check_value==null){
alert(check_value);
document.firstform.textview.focus();
return false;
}
}
and button code is:
<form id="payment_form" name="payment_form" action="<?php echo site_url("cont/accept");?>" method="post">
<input id="chkvalue" name="chkvalue" type="hidden">
<button type="submit" id="submit_button" class="btn btn-primary" onclick="checkcond()">
<b>Make a Payment</b>
<span class="fa fa-hand-o-right" aria-hidden="true"></span>
</button>
Here after checking the check_value I want to keep my current page while it is null. How should it be done? Is there any function for that?

My suggestion would be to remove inline javascript
and use like this
document.getElementById('payment_form').onsubmit = function() {
return checkcond();
};
or if you want to use inline method, change onclick method like this
<button type="submit" id="submit_button" class="btn btn-primary" onclick="return checkcond()"><b>Make a Payment</b>

Acces the correct button using this keyword

i am having trouble selecting the correct button in my form. For example i have two items and i want to delete the one on the right and when i click to delete it always removes the one on the left;
I am shure the this keyword is not the correct one
Index.ejs
<% service.forEach(function (myService) { %>
<form method="post" action="/service/<%= myService._id %>?_method=DELETE" name="del_form">
<button type="submit" class="btn btn-danger btn-del" name="del_btn"></button>
</form>
script.js
let delServiceBtn = $('button[name=del_btn]');
let delServiceForm = $('form[name=del_form]');
delServiceBtn.on('click', function (e) {
e.preventDefault();
if(confirm('Confirm delete')){
delServiceForm.submit();
}
});

Add the click attribute to your <button> tag as,
<button type="submit" class="btn btn-danger btn-del" name="del_btn" onClick="delService(this);"></button>
And write a new javascript function delService as,
function delService(buttonObj) {
if(confirm('Confirm delete')){
var btn = document.getElementsByName(buttonObj.name);
btn.submit();
}
}
Hope this helps!

Validate form within ngDialog openConfirm before closing

I have a button that opens an ngDialog.openConfirm. Within that dialog I have a form, which includes a textarea which is required and needs to be a minimum 20 characters.
Here is a simplified version of my code:
someFunction() {
let newScope = $scope.$new();
newScope.vm = vm;
ngDialog.openConfirm({
scope: newScope,
template: 'componentDescription.html'
})
}
And my html:
<form role="form" name="subForm">
<textarea name="compDesc"
required="true"
ng-minlength="20"
ng-model="vm.compDesc">
</textarea>
<button type="button" ng-click="confirm(0)">Submit</button>
<button type="button" ng-click="closeThisDialog(0)">Cancel</button>
</form>
I would like for the Dialog to only be submitted if the form is valid.
I tried to do this by creating a function in my controller , but that has trouble accessing the form/closing the dialog.
Any ideas?
UPDATE:
I've changed my html like so:
<form role="form" name="subForm" novalidate ng-submit="confirm(0)">
<textarea name="compDesc"
required="true"
ng-minlength="20"
ng-model="vm.compDesc">
</textarea>
<button type="submit">Submit</button>
<button type="button" ng-click="closeThisDialog(0)">Cancel</button>
</form>
This works on the first click, which brings up my error messages, but on the second click it submits the form even though it's invalid. Seems that whenever the error messages are displayed the submit button ignores the validation.

You can manually decide whether to call $scope.confirm() or not,
Pass validation then call $scope.confirm().
Not Pass validation, don't call $scope.confirm().
e.g.
Template:
<button type="button" ng-click="ok(0)">Submit</button>
Controller:
$scope.ok = function () {
if(!validationHasPassed()){
//errorMsg.push('xxx')
return false;
}
$scope.confirm();
};

Simply you can add ng-disabled option with your form name
<button type="button" ng-disabled="subForm.$invalid" ng-click="confirm(0)">Submit</button>

you can disable submit button if length of input string is less then 20
<button type="button" ng-disabled="vm.compDesc.length < 20" ng-click="confirm(0)">Submit</button>
you can also display an error message below text area so users can understand why submit button is not enabled
<form role="form" name="subForm">
<textarea name="compDesc"
required="true"
ng-minlength="20"
ng-model="vm.compDesc">
</textarea>
<p ng-show="vm.compDesc.length < 20" style="color:#cc5965">Description should be at least 20 characters</p>
<button type="button" ng-click="confirm(0)">Submit</button>
<button type="button" ng-click="closeThisDialog(0)">Cancel</button>
</form>

File not getting sent to controller

I am trying to open a form which will take in a picture (from the camera) and than send it to my controller in laravel.
Does any body know why this is not working?
Form in laravel:
<div style="width: 0; height: 0; overflow: hidden;">
{{ Form::open(array('route' => 'upload_photo', 'files' => true)) }}
<input type="file" onchange="this.form.submit();" id="camera_input" name="camera_input" accept="image/*" capture="camera" />
</div>
<button class="btn btn-primary btn-lg normal-font" type="button" onclick="takePicture();">Take Picture And Upload</button>
{{ Form::close(); }}
Javascript which will simply just open the camera/file select on click:
function takePicture() {
document.getElementById("camera_input").click();
}
Laravel controller:
All I am doing is this to try to see if the file gets put over here:
public function upload_photo() {
$file = Input::file('camera_input');
var_dump($file);
}
It is getting NULL printed out for $file though...
Anyone know what I am doing wrong?

I got it apparently my input type needed:
enctype="multipart/form-data"
I thought have files => true on the form for laravel would do this and thats what that was for but apparently it needed to be on the input type.
Maybe because I didnt use laravel's Form::file()