so i have a form for registering user
so when page loaded firefox automatically set values for inputs from saved logins
what can I do to prevent that?
this is a part of codes
<div className="input-group mb-3">
<input
id="nameInput"
ref={nameRef}
type="text"
className="form-control"
placeholder="نام و نام خانوادگی"
onChange={nameChangeHandler}
/>
</div>
You can add the attribute autocomplete="off" to your form. However, different browsers may handle this differently.
<form action="/login" autocomplete="off" >
<input type="text" id="username" name="username" /><br />
<input type="text" id="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
To disable the autocomplete for input fields, we need to set its autoComplete attribute to off.
<input
autoComplete="off"
id="nameInput"
ref={nameRef}
type="text"
className="form-control"
placeholder="نام و نام خانوادگی"
onChange={nameChangeHandler}
/>
Related
<form action="mailto:info#gmail.com" method="post" enctype="text/plain" target="_blank">
<div class="first-column">
<div class="first-row">
<label>First Name</label>
<input type="text" name="First Name" id="Name" class="inp-1 input-con" placeholder="Enter your first name" />
<label> Email Id</label>
<input type="email" name="Email" id="Email" class="inp-2 input-con" placeholder="Enter your email id " />
</div>
<div class="second-row">
<label>Last Name</label>
<input type="text" name="Last Name" id="First Name" class="inp-3 input-con" placeholder="Enter your last name" />
<label>Mobile No.</label>
<input type="number" name="Mobile No." id="Mobile NO." class="inp-4 input-con" placeholder="Enter your mobile no." />
</div>
</div>
<div class="big-inp">
<label>Department</label>
<input type="text" name="department" id="department" class="inp-5 input-con" placeholder="Select department" />
</div>
<div class="last-row">
<div class="last-column">
<label>Date</label>
<input type="date" name="date" id="date" class="inp-6 input-con" />
</div>
<div class="last-column">
<label>Time</label>
<input type="time" name="Time" id="Time" class="inp-7 input-con" />
</div>
</div>
<div class="submit">
<button type="submit" class="submit-btn">
Submit <i class="fa-solid fa-arrow-up sub-arrow"></i>
</button>
</div>
</form>
When I am using mailto in an anchor tag it's opening in gmail but in form tag it's not opening in gmail . My gmail is default stiil it's not opening and it's only happening in my phone in other phones it's opening . When I click on it it redirects me and then in chrome it shows that url -
mailto:info#gmail.com?body=First%20Name%3D%0D%0AEmail%3D%0D%0ALast%20Name%3D%0D%0AMobile%20No.%3D%0D%0Adepartment%3D%0D%0Adate%3D%0D%0ATime%3D%0D%0A%0D%0A
Chrome just stuck there and nothing opens . Someone help me . I don't know how to fix it
here I have a contact form and i want all the values of form should be empty after submitting the form.
I have written following code.but this is not working after submitting the values of form remains same.
what is the problem here and how to solve it.
export default function contact() {
const[name,setName]=useState("")
const[phone,setPhone]=useState("")
const[email,setEmail]=useState("")
const[query,setQuery]=useState("")
const [submitted, setSubmitted] = useState(false)
const handleSubmit=(e)=>{
e.preventDefault()
console.log(e);
let data = {
name,
email,
phone,
query
}
console.log(data);
axios.post('http://127.0.0.1:8000/api/create/',data).then((res)=>{
console.log(res);
setSubmitted(true)
setName('')
setPhone('')
setEmail('')
setQuery('')
})
}
return (
<>
<div>
<h1>Contact Page</h1>
</div>
<div >
<form action="contact" method="post">
<input name="name" onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
<button onClick={(e)=>{handleSubmit(e)}} value="Send" >Submit </button>
</form>
</div>
</>
)
}
Currently you are missing value prop in your inputs so your inputs are uncontrolled components that's why you are not able to clear them after form submit.
Try to add value prop like below:-
<input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
Add value prop your inputs then your form shall be cleared after submit:
<form>
<input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
</form>
First, make sure that your api-call ends successfully, according your code, you clean form only when request passed successfully :)
I think a better way to do this is to rest the form using the .reset() method.
Like this:
document.getElementById("postCodeForm").reset();
folks.
I hope you don't see this as a silly question because i am new to JavaScript. I did my research on how to solve this problem but the answers i found on stack overflow were kind of too high for me right now. And i don't like to copy codes either. I want to learn it. My JavaScript code worked on one field but didn't work for all fields even when i did a loop.
Please you are free to show me how to do this professionally. I would be grateful to see many approaches or methods. Gracias
function Validate(x){
var required = document.getElementsByClassName("required");
for(var x = 0; x > required.length; x++){
if ((required[x].value == "") || (required[x].value == null)) {
required[x].style.backgroundColor = "red";
required[x].style.color = "white";
} else {
required[x].style.backgroundColor = "";
required[x].style.color = "#777";
}
}
}
<form id="form1" name="form1" method="post" action="">
<p>
<label for="textfield">Name</label><br />
<input type="text" name="name" id="name" class="forme required" onblur="Validate(name)" />
<br />
<label for="textfield">Surname</label><br />
<input type="text" name="surname" id="surname" class="forme required" />
<br />
<label for="textfield"> School</label><br />
<input type="text" name="school" id="school" class="forme required" />
<br />
<label for="textfield">Mobile</label><br />
<input type="text" name="mobile" id="mobile" class="forme required" />
<br />
<label for="email"> Email</label><br />
<input type="text" name="email" id="email" class="forme required"/>
</p>
<p>
<input type="reset" name="reset" id="reset" value="Reset" />
<input type="submit" onclick="Validate()" name="submit" id="submit" value="Submit" />
</p>
</form>
Be grateful for ya time.
as mentioned in the comments of your question, you used the wrong sign (">" ist false, "<" is true). But your code has some more failures.
The for attribute on the label elements should always point to the respective input field, so use the ID of the input field.
It's may better to use the JavaScript addEventListener method instead of the DHTML attribute onclick, but that is probably a matter of taste.
document.getElementById("submit").addEventListener("click", function(event){
var req = document.querySelectorAll("form input.required"),
error = false;
for(var i = 0; i < req.length; i++){
if(req[i].value.trim() == ""){
if(!error){
error = true;
}
req[i].style.setProperty("color", "#ffffff");
req[i].style.setProperty("background-color", "#ff0000");
} else {
req[i].style.removeProperty("color");
req[i].style.removeProperty("background-color");
}
}
if(error){
// Prevent Form Submit
event.preventDefault();
}
});
<form id="form1" name="form1" method="post" action="">
<p>
<label for="name">Name</label><br />
<input type="text" id="name" name="name" class="forme required" />
</p>
<p>
<label for="surname">Surame</label><br />
<input type="text" id="surname" name="surname" class="forme required" />
</p>
<p>
<label for="school"> School</label><br />
<input type="text" id="school" name="school" class="forme required" />
</p>
<p>
<label for="mobile">Mobile</label><br />
<input type="tel" id="mobile" name="mobile" class="forme required" />
</p>
<p>
<label for="email"> Email</label><br />
<input type="email" id="email" name="email" class="forme required" />
</p>
<p>
<input type="reset" id="reset" name="reset" value="Reset" />
<input type="submit" id="submit" name="submit" value="Submit" />
</p>
</form>
Please note: Don't use ONLY JavaScript to validate your form fields. You should always check the passed user informations on the server side too, because you can't control the user.
Have fun learning JavaScript.
Sincerely,
Sam.
I have an HTML form that looks like this:
ar form={
formName: document.getElementById("contactus"),
name: document.getElementById("name"),
email: document.getElementById("email"),
comment: document.getElementById("question")
};
//form submit
form.formName.addEventListener( "submit", checkform );
<form name="contactus" method="post" action="html_form_send.php">
<label for="name">Name:</label><br /><input <input type="text" name="name" maxlength="50" size="59" autofocus required/><br /><br />
<label for="email">E-Mail Address:</label><br /><input type="email" name="email" maxlength="50" size="59" required/><br /><br />
<label for="question">Question:</label><br /><textarea name="question" maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
<input class="c1_scButton" type="submit" value="send"/>
</form>
<script type="text/javascript" src="js/validate.js"></script>
The problem is that Firebug shows that form.formName is null, as are the rest of the form values. Why are they not acquiring the elements?
The ultimate goal of the script is to validate the form data. I think the rest of the form will work if the elements will load.
Because you are trying to get the element by ID, when there is no ID in it.
Adding the ID to the form tag should solve the problem:
<form name="contactus" ID="contactus" method="post" action="html_form_send.php">
But you may prefer to change your approach to document.getElementsByName("theName"), since you are not using IDs at all.
Here you go: http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp
Your form has the name contactus, but you're trying to get it by id.
Also, there seems to be a mistake with the name input:
<input <input type="text" name="name" maxlength="50" size="59" autofocus required/>
You'll probably want to remove the first <input.
Finally, if you include your JavaScript at the top of the page, it might run before the page has fully loaded, which means that the form and/or input elements might not be in the DOM yet.
To fix this is to add an event listener to be triggered when the DOM is ready. If you're using JQuery, you do this with:
$(document).ready(function(){
//do stuff here
});
If you have no need for JQuery, don't include it just to do this. You can find more info on how to do this in the answers to this question.
This will work sure..
<form name="contactus" id='contactus' method="post" action="html_form_send.php">
<label for="name">Name:</label><br />
<input type="text" id='name' name="name" maxlength="50" size="59" autofocus required/><br /><br />
<label for="email">E-Mail Address:</label><br />
<input type="email" id='email' name="email" maxlength="50" size="59" required/>
<br /><br />
<label for="question">Question:</label><br />
<textarea name="question" id='question' maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
<input class="c1_scButton" type="submit" value="send"/>
</form>
Since adding a contact form to my website, when I refresh the page it constantly scrolls the page to where the form is.
I don't know what could provoke this, so I came to ask. I searched for similar issues but couldn't find any.
Thanks for all.
Form from site:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" autofocus="autofocus" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Corrected form :
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
When you copy an old form, be sure to properly read each line (my biggest error there).
There was an autofocus attribute in my form and that's what caused the problem.
Your problem seems to be with the 'autofocus' attribute.
http://www.w3schools.com/tags/att_input_autofocus.asp
You should remove it from the following form like so:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Maamar Miloud" required="required" />
<input type="email" id="email" name="email" value="" placeholder="contact.maamar#gmail.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="06.15.73.0x.0x" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Here's a fiddle showing an extreme example: http://jsfiddle.net/xefq9t0z/1/
It's much easier to help you when you provide snippets of code so we don't have to dig through your entire site! You're very lucky that I'm very bored!