Retrieving POST form input using Dart - html

I am using IIS, so I need to avoid using port numbers. I have this index.html...
<body>
<div id="output"></div>
<p> </p>
<form action="verify.html" method="post">
<div>First name: <input type="text" name="first_name" required=""></div>
<div>Last name: <input type="text" name="last_name" required=""></div>
<div><input type="submit" value="Add Name"></div>
</form>
</body>
All I want to do right now is display the user's input on verify.html. I wired a "verify.dart" to verify.html. I know that input can be retrieved in PHP 7 using
$firstName = filter_input(INPUT_POST, 'first_name');
Is there an analog to that code in the Dart SDK?

Related

nodejs not listening to post requests and returns error 505

i'm just a begineer to nodejs and I am trying to complete this project and i have been stuck since almost 2 days and i'm unable to figure this out.
it seems nodejs is not listening to POST requests, I am console logging but it instead returns 405 error page.
Here's the code:
import express, { urlencoded } from 'express';
import path, {dirname} from 'path';
import { fileURLToPath } from 'url';
import mysql from 'mysql';
const app = express();
app.use(express.json());
app.use(urlencoded({ extended : true}));
app.use(express.static('public'));
// const __dirname = path.dirname(fileURLToPath(import.meta.url));
app.post('/' , (req, res)=>{
console.log(req.body);
// res.sendFile(path.join(__dirname ,'/public/index.html'));
});
app.listen(5501, ()=>{
console.log('Server is running at port 5501')
})
<form action="/" method="post" id="cont-form">
<h1 class="contact-h1">Contact us</h1>
<div>
<input type="text" name="name" placeholder="Your name" autocomplete="off">
</div>
<div>
<input type="text" name="subject" placeholder="Subject" autocomplete="off">
</div>
<div>
<input type="email" name="email" placeholder="Email" autocomplete="off">
</div>
<div>
<label for="name">
<textarea name="message" placeholder="Type your message" cols="30" rows="10"></textarea>
</label>
</div>
<input type="submit" name="submit" id="submit-ms" value="Send message">
</form>
<div class="buy">
<div class="quantity">
<i class="fa-solid fa-xmark close-buy"></i>
Select Quantity
</div>
<form action='/buy' method="post" >
<div class="inputs">
<div class="buy-input-div" style="margin-top:16px">
<box-icon name='user'></box-icon>
<input type="text" class="buy-input" name="title" id="title-text"></div>
<div class="buy-input-div" >
<box-icon name='user'></box-icon>
<input type="text" class="buy-input" placeholder="Full Name" name="fullname" id="person-name"></div>
<div class="buy-input-div">
<box-icon name='phone'></box-icon>
<input type="text" class="buy-input" placeholder="Phone Number" name="phone" id="phone"></div>
<div class="buy-input-div">
<box-icon name='envelope'></box-icon>
<input type="text" class="buy-input" placeholder="Email" name="email" id=""></div>
<div class="buy-input-div">
<box-icon name='building'></box-icon>
<input type="text" class="buy-input" placeholder="Address" name="address" id=""></div>
<div class="buy-input-div">
<box-icon name='plus'></box-icon>
<input type="number" class="buy-input" placeholder="Quantity" name="quantity" id="">
</div>
<button class="buy-btn">Buy</button>
</div>
</form>
</div>
my file structure:
--root
--node_modules
--public
--index.html
--AdminPanel.html
--styles.css
--script.js
--index.js
--package-lock.json
--package.json
This is how it looks like:
You've got only one endpoint using POST method. Browsers sends only GET requests. (405 means Method not allowed).
You need to define a GET endpoint which will serve the html code. And in browser you have to access that endpoint. When you'll press the submit from you server html it will send a POST request.
Edited: If you access that file statically (opening the html file in a browser) then you need to specify in action property of form tag the full address, since / will simply try the location on your machine

How to trigger form input pattern validation without submitting?

I have a form:
<form action="/index.html" method="POST" id="form">
<div id="namediv">
Full Name:
<input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"/ id="name" required/></div>
<div>
Date:
<input type="date"/>
</div>
<div id="emaildiv">
Email:
<input type="email" id="email" onblur="validateEmail()" required/><br>
<emailerror class="invisible">Incorrect email address!</emailerror>
</div>
<div id="urldiv">
Favorite webpage:
<input type="url" name="favurl"id="url" onblur="validateFavURL()" required/><br>
<urlerror class="invisible">Incorrect webpage!</urlerror>
</div>
<div>
<input type="button" value="Validate" onclick="validateAll()"/>
</div>
</form>
How can I trigger the name's pattern validity without submitting the form? I tried checkValidity() but didn't succeed. What is the exact syntax for it?
Not sure that I clearly understand the question. But the problem appears to be invalid regex. But the field does say "full name" so you'd likely need to allow a space as well.
<div>
<label>This field accepts upper and lowercase letters only</label>
</div>
<input type="text" pattern="[A-Z][a-z]+" id="name" required/>

Why does required attribute in html doesn't work?

I wanted to try and verify input before being submitted therefore I used the required attribute at the end of input, but it's not working and I've already tried some of the recommended solution like wrapping the input in form tag or trying to close the tag of input () but when i submit my form with an empty input it stills submited normally and doesn't declare a required field .
I would appreciate any help, thank you!!
this is a part of my code
<form id="form" style="background-color:honeydew ;" class="container text-center">
<div><br><h2> Contact Us </h2></div>
<div id="contact">
<div>
<label> Name</label>
<input type="text" placeholder="Your name " name="name" required/>
</div>
<br>
<div>
<label> Email</label>
<input type="email" placeholder="name#gmail.com" name="email" name="email">
</div>
<br>
<div>
<label> Message</label>
<input type="text" style="height:50px;" name="message">
</div>
<br>
<div><input type="button" value="submit" name="submit"><br></div>
<br>
</div>
<br>
</form>
and this is the javascript file linked to it :
//we take informations subbmitted by user from the form and we replace the form with a reply
//containing these pieces of information on the click on the submit button
var form=document.getElementById('form'),
contactForm=document.getElementById('contact'),
submitButton=contactForm.children[6].children[0];
var processForm= function(){
name=document.getElementsByName('name')[0].value,
email=document.getElementsByName('email')[0].value,
sitereplyText=document.createTextNode('this is a initialiazing value'),
sitereplyEl=document.createElement('p');
mytext= 'Hey '+name+'! Thanks for your message :) We will email you back at '+email;
sitereplyText.nodeValue=mytext;
sitereplyEl.appendChild(sitereplyText);
form.replaceChild(sitereplyEl,contactForm);
}
submitButton.addEventListener('click',processForm);
So i firstly corrected the input type into submit
<input type="submit" value="submit" name="submit">
then in the javascript file i changed
submitButton.addEventListener('click',processForm);
to
submitButton.addEventListener('form.submit()',processForm);
and it seems to work :)

How to set different url into <form>, using parameter

I want to call different controllers, depending on start parameter:
(parameter start is boolean)
I am try to implement this task, using thymeleaf framework, but in this case him not working:
<div class="w3-container" align="center">
<input class="w3-input w3-border" name="competition" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for competitions.." title="Type in a competition name">
<form th:if="${start}" action="/challenger" method="post">
<form th:if="${!start}" action="/competition" method="post">
.............
........
<input class="w3-button" type="submit" value="Go"/>
</form>
</form>
</div>
How to accomplish this task in my case?

HTML label control doesn't pass form data to controller

This format of html form control doesn't pass form data
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label class="field" for="firstName">First Name:</label>
<input type="text">
</fieldset>
<input type="submit">
</form>
but this one does
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label>First Name:</label>
<input type="text" name="firstName">
</fieldset>
<input type="submit">
</form>
Unless I'm missing something obvious, the difference is in the label control..Are both valid and if so, can anyone explain to me why only the second one passes form data to my PHP controller method.
<input type ="submit"> is not part of the fieldset in the first bit of code, but I don't think that's really the issue.
I believe changing the code on the first bit to:
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label for = "firstName">First Name: </label>
<input type="text" name = "firstName">
<input type="submit">
</fieldset>
</form>
will work. You need to make sure the name of the input is the same as the property you are trying to set.