We Keep Coding

redirect event with javascript

I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?

Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location

HTML Bootstrap Form - "required" label doesn't work with JS script

Good evening everyone,
I have a problem with the website I'm coding.
I have implemented a bootstrap form in the index.html and I have codded a Javascript script, which is linked to the HTML.
Here is the HTML:
<div class="container">
<div style="text-align:center">
<br>
<h5><span class="badge bg-primary shadow rounded">Enregistrer un résultat</span></h5>
<br>
</div>
<div class="container">
<div class="row">
<div class="col align-items-stretch" id="patient_form">
<div class="card shadow mb-5 bg-body rounded text-center" style='height: 430px;'>
<div class="card-header"><strong>Remplissez les informations du patient</strong></div>
<div class="card-body">
<p class="card-text">
<form class="form-inline" role="form">
<div class="form-floating mb-2">
<input class="form-control" id="patient_prenom" autocomplete="off" required/>
<label for="patient_prenom">Prénom</label>
</div>
<div class="form-floating mb-2">
<input class="form-control" id="patient_nom" autocomplete="off" required/>
<label for="patient_nom">Nom</label>
</div>
<div class="form-floating mb-2">
<input class="form-control" id="patient_date_naissance" type="date" required>
<label for="patient_date_naissance">Date de naissance</label>
</div>
<br>
<div class="text-center">
<button onclick="searchPatient()" type="submit" class="btn btn-primary btn-sm">Rechercher le patient</button>
</div>
</form>
</p>
</div>
</div>
</div>
And here is the Javascript script:
function searchPatient() {
prenom = document.getElementById('patient_prenom').value;
nom = document.getElementById('patient_nom').value;
date_naissance = document.getElementById('patient_date_naissance').value;
document.getElementById("patient_form").style.display = "none";
document.getElementById("intervention_form").style.display = "block";
document.getElementById("patient_recap").style.display = "block";
document.getElementById('patient_recap_text').innerHTML += '<h5>' + prenom + ' ' + nom + '<h5>' + '<h6>' + date_naissance + ' ' + '<h6>';
}
With this configuration, the "required" label in my first form is not working.
But as soon as I'm deleting the line that links the Javascript to the HTML, it's working.
Can you please help me solving this issue?
Thank you very much!!

Looks like adding the onclick="searchPatient" to the submit button means that it will run that function immediately and skip form validation. According to this answer, if you're submitting the form via JS, you have to do the validation yourself. Here is how I was able to do it:
First, you need a handle to the form you want to check validation on. The simplest way to do this is with id="form" on the form element.
Then, you just call formElement.checkValidity(), and if it returns false, you don't call your submission logic. For example:
function searchPatient() {
const form = document.getElementById('form');
if (!form.checkValidity()) {
return;
}
// ... rest of function like normal
}
Now when I click the button, I get the "this field is required" popup.

How to charge data in a summernote with meteor JS?

Im using meteor JS and try to implement a summernote.
The problem is, when i try to open a summernote with my data, it work just sometimes.
when i charge the page for the first time, nothing appears in the summernote, but if i change something in my code and save it, the content will appear in the summernote.
please, help me :'(
<template name="consigneModif">
<div class="container">
<div class = "col text-center">
<h1>Modification de {{{this.Name}}}</h1>
</div>
<form class="formConsigne">
<div class="form-group">
<label for="Description"><h4>Nom :</h4></label>
<textarea class="summernote" id="Name" name="Name">{{{this.Name}}}</textarea>
</div>
<div class="form-group">
<label for="Description"><h4>Description :</h4></label>
<textarea class="summernote" id="Description" name="Description" rows="3">{{{this.Description}}}</textarea>
</div>
<div class="form-group">
<label for="Condition"><h4>Condition d'application de la consigne : </h4></label>
<textarea class="summernote" id="Condition" name = "Condition" rows="3">{{{this.Condition}}}</textarea>
</div>
<div class="form-group">
<label for="Mode"><h4>Mode opératoire :</h4></label>
<textarea class="summernote" id="Mode" name ="Mode" rows="3">{{{this.Mode}}}</textarea>
</div>
<div class="form-group">
<label for="Date"><p>Date effective :</p></label>
<input type="Date" id="Date" name = Date>
</div>
<div class="form-group">
<label for="DateFin"><p>Date de fin :</p></label>
<input type="Date" id="DateFin" name = DateFin>
</div>
<div>
<button type="submit" class ="btn btn-success" id="AddConsignButton">Modifier</button>
</div>
</form>
</div>
{{>footerNavbar}}
<script>
$('.summernote').summernote('code');
</script>
</template>

I think the issue is with the script tag you are using to activate the summernote. It should work if you use the onRender method of the template instead.
This may work:
Template.consigneModif.onRendered(function () {
this.$('.summernote').summernote('code');
});

AngularJS: Required attribute working for some fields but not others?

So I have a form with nested forms within. When I click submit, and if there are any required fields that are not filled, I want the boxes to highlight and for there to be an alert displayed.
What I have now works for all the fields within the Company Information field - the alert displays properly, the fields are highlighted, and the form does not get submitted. However, this does not work for the fields within Product Information. Even if there are unfilled required forms, the form continues to get submitted, and there is no invalid highlight.
I did notice, however, that if I had invalid fields in Company Information and invalid fields in Product information, all fields have invalid highlights and it does not proceed to submit. However the case where only Product Information has invalid fields does not work. Also, if I remove ng-class="{failedSubmit:model.failedSubmit}" from the product form attribute, then even in the case where both Company and Product have invalid fields, invalid Product fields do not highlight at all - so I'm puzzled as to why totalForm does not cover all the forms its wrapping.
Anyone have any insight? Thanks!
So here is my HTML:
<form name="totalForm" ng-class="{failedSubmit:model.failedSubmit}">
<div id="collapse3" class="row">
<h1 class="no-margin">Company Information</h1>
<form class="form-horizontal" role="form" name="company">
<div class="container">
<div class="col-md-12">
<div class="col-md-12">
<label for="companyName-md" class="control-label required">Company Name</label>
</div>
<input class="form-control" id="companyName-md" name="companyName"
ng-show=type="text"
ng-model="model.companyName"
required/>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<label for="companyDesc-md" class="control-label text-area-label required">Company
Description</label>
</div>
<textarea class="form-control" id="companyDesc-md" name="companyDesc"
ng-model="model.companyDesc" rows="5" required> </textarea>
</div>
</div>
</div>
</form>
</div>
<div id="collapse4" class="row email-pref">
<h1 class="no-margin">Product Information</h1>
<form class="form-horizontal" name="product" ng-class="{failedSubmit:model.failedSubmit}">
<div class="container">
<div class="col-md-12">
<div class="col-md-12">
<label for="productType-md" class="control-label text-area-label required">Product
Type</label>
</div>
<select class="form-control" id="productType-md" name="productType"
ng-options="item for item in productTypeList" rows="3"
ng-model="model.productType" required></select>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12">
<label for="productDesc-md" class="control-label text-area-label required">Product
Description</label>
</div>
<textarea class="form-control" id="productDesc-md" name="productDesc"
ng-model="model.productDesc" rows="5" required></textarea>
</div>
</div>
</div>
</form>
</div>
</form>
And here is my CSS class:
form.failedSubmit .ng-invalid
{
border:1px solid #f00;
}
And here is the relevant javascript code - this is fired upon pressing a submit button:
if (!$scope.totalForm.$valid || !$scope.product.$valid){
$scope.showAlerts.push($scope.alerts[0]);
window.scrollTo(0, 0);
$timeout(function(){
$scope.showAlerts.pop();
}, 3000);
$scope.model.failedSubmit=true;
}

I'm answering without testing it so let me know if you need example... first, my recommendation is to use one form, with different divs that you can toggle with ng-show. is there a special reason you want nested forms? second, labels don't need to have the required field and you also wrote twice few lines with the col-md-12. third, where are you submitting your form? I didn't see it in your code. let me know if you solved it.

how to show a div tag when i click on a button?

My program is to upload a file and when I click on Upload it will call a servlet. the same upload page contain some other fields which should b displayed when I click on upload button only. how to call the servlet as well as to show the remaining contents. Actually using the servlet I want to show the file contents on same page.
here is my code.
<form class="form-horizontal" name="regist" action="Registration"
onsubmit="return validateFile((this))" enctype="multipart/form-data"
method="post">
<div class="control-group" class="span12">
<label class="control-label" for="file">Please upload a
file:</label>
<div class="controls">
<input type="file" name="file"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>
<div id="showFrames" style="display:none;">
<!--
hidden contents are here -->
</div>
and my script is
function validateFile(form) {
var fileName = form.file.value;
if (!fileName) {
alert("No File Selected!!!");
return false;
}
else
{
$("#showFrames").show();
}
}
but it doesn't work. can anyone help me? thanks

With jQuery I'll do it like that :
$('.form-horizontal').sumbit(function(e) {
if($(this).find('input[type="file"]').val().length) { //check by length
$("#showFrames").show();
} else {
alert('No file Selected');
e.preventDefault();
}
});
It'll be better using a form ID if you need to have more than one form.
This way you can remove the onsubmit attribute.

Replace your as per below
<form class="form-horizontal" name="regist" action="Registration"
onsubmit="return validateFile(this)" enctype="multipart/form-data"
method="post">
<div class="control-group" class="span12">
<label class="control-label" for="file">Please upload a
file:</label>
<div class="controls">
<input type="file" name="file"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>