Password field hidden option in html - javascript

For my HTML password textbox, I have used input type as password but I am able to see what is being typed as password input. In any case we shouldn't be able to see what we type in a password input.
Can anyone suggest me how can I fix this issue? Try my below code , copy in a .TXT file and save as .HTML and open this HTML in Firefox or IE to replicate the issue.
Here is my problematic code:
<htm l>
<form id="login" method="post" action="index.html">
<div style="width: 450px; height: 250px; background: blue;BORDER=8"><br/><br/><br/>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br/> <br/>
<strong>Password : </strong> <input type="password " name="pswrd" size="18" maxlength="18"/> <br/><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form"/> &nbsp
</div><br/><br/></html>

Delete the space behind password after type parameter.

Ok, you have a extra space in type="password"
<input type="password" name="pswrd" size="18" maxlength="18"/>
Remove it. It will work fine.

Remove space in
type="password "
So, it should be
type="password"
If html does not understand any type like "password " then it assumes that element is type text

Related

Vue.js submit text button

I have a noob question.
i have a form with a text field. If i type something in, and push enter, no result. If i type something in, and push the button, i get the result i want. Can someone help me fix this - this is written in vue.js
<div class ="well">
<form class="form-inline" onsubmit="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
<input id="clickMe" type="button" value="clickme" v-on:click="searchName" />
You may add an event in your text field.
<input
type="text"
name="name"
class="form-control"
v-model="search"
v-on:keyup.enter="searchName"
/>
Or add a submit event in your form
<form
class="form-inline"
v-on:submit.prevent="searchName"
>
put your button inside the <form> tag and change the button type to submit:
<div class ="well">
<form class="form-inline" #submit.prevent="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
<input id="clickMe" type="submit" value="clickme"/>
</form>
</div>
EDIT
instead of onclick event in the button, use #submit.prevent in the form.

Showing a message in the same page after submitting a form

I have a simple HTML form with a name & email address field and a submit button.
After filling in the form and submitting it, I want a message such as "Thank you for your response" to appear on the same page.
I'm looking for a easy clean PHP fix for this. I want all the code to stay on one page (Not separate it into two different files).
I've been searching on Google, but they have much more complex situations.
Your help is greatly appreciated. Thanks.
EDIT: I want the form to disappear after pressing submit and just show the "Thank you for your response" message. I forgot to mention that. Sorry.
<form>
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>
Would something like the following help? Essentially, when you hit submit, some special variables are set in the $_POST array, and you can access those. If those variables are set when we're building the page in PHP, then we can do some processing/send an email/show a different response page.
<?php
if (array_key_exists($_POST['your_email'])) /* and other validation */ {
?>
<p>Thanks!</p>
<?php } else { ?>
<form action="POST">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>
<?php } ?>
please try below code.
<?php
if($_POST) {
echo "Thank you for your response";
}
?>
<form name="test" action="" method="post">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span> </span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>
in you form validate page
header('location: ../page.php?case=Thank you for your response');
in your page
<?php print $_GET['case']; ?>

How to assign GET parameter to Value attribute of HTML Input Text?

I have following HTML form in which I am getting name from get parameter. I am unable to assign the value of get parameter to the value attribute of form. In the text field "$_GET['name']" gets printed instead of its value. What I am doing wrong here in this code?
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Name: <input type="text" name="name" value=$_GET['name']><br>
Sex : <input type="text" name="sex" value="M"><br>
<input type="submit" value="Submit form">
</form>
</body>
</html>
Your code should be this:
Name: <input type="text" name="name" value="<?php echo $_GET['name'];?>"/>
^^^ you need to echo it
thats because u have not specified php tags and the browser wont be able to fetch your result.
if you are using asp than please use asp tags instead of php tags.
<form action="demo_form.asp">
Name: <input type="text" name="name" value="<?php echo $_GET['name'] ?>"><br>
Sex : <input type="text" name="sex" value="M"><br>
<input type="submit" value="Submit form">
</form>

On click of submit button of form A, form A should disappear, and in its place, form B should appear

I have two forms, one is shown and the other is hidden. On click of submit button of form A, form A should disappear, and in its place, form B should appear.
In my code, On click of submit button(id="signup-btn1") of form "signup", form "signup" should hide and form "signup2" should show. They are both in exactly the same position according to the styles. It's just a matter of switching the first form content for the second.
The HTML is as follows:
<div class="signup-form">
<form class="signup" name="sign-up" method="post" action="">
<input type="email" name="signup-email" value="" placeholder="E-mail" class="signup-email" />
<input type="password" name="signup-password" value="" placeholder="Password" />
<input type="password" name="signup-confirmpassword" value="" class="c-password" placeholder="Confirm Password" />
<input type="submit" id="signup-btn1" name="signup-btn" value="Sign up" class="signup-btn" />
</form>
<form class="signup2" name="sign-up2" method="post" action="">
<h2>Step 2</h2>
<p>Please enter your school name to complete the sign up.</p>
<input type="text" name="school-name" value="" class="school-input" placeholder="School Name" />
<input type="submit" name="complete-signup" value="Complete Sign up" class="signup-btn" />
</form>
</div>
Using jQuery is preferred and should result in far less code. Thanks
Place each form in a div, then:
$("button").click(function(){
$("#div1").toggle();
$("#div2").toggle();
})
Work if your page have only 2 above forms :)

Create elements in JQuery inside other

I know how to create a element whit JQuery, but I don't know how to place that element, exactly where I want.
<form action="/register" enctype="multipart/form-data" method="POST">
<span class="help-block">Username</span>
<input id="checkuser" type="text" name="nuser" placeholder="Username"/>
<span class="help-block">Email</span>
<input id="mail" type="text" name="nmail" placeholder="Your m#il"/>
<span class="help-block">Password</span>
<input type="password" name="npass" placeholder="Your password"/>
<span class="help-block">Avatar</span>
<input type="file" name="navatar" accept="image/*">
<br/>
<input type="submit" value="Submit"/>
</form>
I'm doing AJAX request with JQuery, so, depends of the result of the request, I create, or not an element to the left of the inputs. How I do that?
Thank's advance!
If by left of an input you mean before it then you can use .insertBefore().
$("<span/>", {
text: "My newly created span element"
}).insertBefore("input#checkuser");
Or, also you may use .before().

Categories