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().
Related
If I select my span element by ID it gets executed but I want to select multiple span elements. I tried with class and name but it also not working.
const uname = document.getElementById('fname')
const form = document.getElementById('form')
const errorElement = document.getElementById('formerror')
form.addEventListener('submit', (e) = \ > {
let messages = \ [\]
if (uname.value === '' || uname.value == null) {
messages.push("Name is required")
}
if (messages.length\ > 0) {
e.preventDefault()
errorElement.innerHTML = messages.join(', ')
}
})
<div id="error">
<form name="signupform" action="signupdetails.php" method="get" id="form">
<input type="text" class="text" placeholder="Username" id="fname"><b><span id="formerror"></span></b>
<input type="text" class="text" placeholder="Roll:no" name="froll"><b><span id="formerror"></span></b>
<input type="email" class="text" placeholder="Email" id="femail"><b><span id="formerror"></span></b>
<i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i>
<input type="password" class="text" placeholder="Password" id="password1" name="fpass">
<i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i>
<input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass">
<button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
</form>
</div>
An id should be unique in the entire document, see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
Use a class on your span elements and query them with document.querySelectorAll('.formerror').
const uname = document.getElementById('fname')
const form = document.getElementById('form')
const errorElements = document.querySelectorAll('.formerror')
console.log(errorElements)
<div id="error">
<form name="signupform" action="signupdetails.php" method="get" id="form">
<input type="text" class="text" placeholder="Username" id="fname"><b><span class="formerror"></span></b>
<input type="text" class="text" placeholder="Roll:no" name="froll"><b><span class="formerror"></span></b>
<input type="email" class="text" placeholder="Email" id="femail"><b><span class="formerror"></span></b>
<i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i>
<input type="password" class="text" placeholder="Password" id="password1" name="fpass">
<i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i>
<input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass">
<button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
</form>
</div>
Just had a somewhat similar issue to this, & as others have already mentioned. You will want to change this snippet of code below in you're javascript
document.getElementById('formerror')
To instead
document.querySelectorAll(".formerror") // Be sure to also change from and ID to instead using classes for the form error
Also as ID's are only meant to be used once, trying to assign them and use them more than once should not work as they are meant to be unique to one element. So this is why you should instead transition to adding them as classes instead.
Now as for when you are trying to access you're span elements by Javascript, since there is more than one span element. You will need to ensure that you use the "querySelectorAll" function as this will allow you to target all of you're span elements. Otherwise if using just the "querySelector" it will only apply to the first span element, while the other two span elements remain un affected.
Hope this could help to add a bit of insight and clear some things up for you.
First change the id to a class attribute, because the id should be unique to the entire document.
<span class="formerror"></span>
Then Instead of using document.getElementById(), use document.querySelectorAll(".formerror").
It will solve your problem.
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.
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"/>  
</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
I'd like to validate a form step by step via Javascript. For example, I've like that as soon as a user fills an input box and goes to another one, a Javascript function is called. In other words, I've like to create a real-time validation.
HTML:
<form id="form_register" method="post" action="">
<fieldset>
<legend>Register</legend>
<ul>
<li>
<label for="username">Username:</label>
<input type="text" name="username" id="username" maxlength="25" />
</li>
<li>
<label for="password">Email address:</label>
<input type="text" name="email" id="email" maxlength="50"/>
</li>
<li>
<label for="password">Password:</label>
<input type="password" name="password" id="password" maxlength="32"/>
</li>
<li>
<label for="password">Confirm Password:</label>
<input type="password" name="cpassword" id="cpassword" maxlength="32"/>
</li>
</ul>
<input type="submit" value="Create Account">
</legend>
</fieldset>
</form>
I've already created the .js file and it looks like the following one.
Javascript:
function checkUsername(){
//etc..
}
function checkEmail(){
//etc..
}
function checkPassword(){
//etc..
}
function checkConfirmPassword(){
//etc..
}
How do I link the HTML page with the script?
Thank you.
Use the onblur event, as described here
<input type="text" name="username" id="username" maxlength="25" onblur="checkUsername()" />
It sounds like you're looking to execute these functions on the blur event for each input element. Something like this:
var usernameInput = document.getElementById('username');
usernameInput.onblur = checkUsername;
//How do I link the HTML page with the script? Thank you.
using the script tag:
also, i am not sure why everyone is suggesting onblur, isn't onchange is better for validation purpose? why would we want to validate when the value is not changed? onblur may be required only when the validation of a field is dependant on the value of other fields.
You could do this:
$('input').onblur(function() {
if ($(this).is('[name=username]')) checkUsername()
// etc
})
I'm using panelbar, hence form tag is disturbing it's open/close animation
I found that form tag is creating issue, so I want div tag to convert to form tag when I click submit button.
Eg:
<div class="myForm">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income"/>
</div>
<input type="submit" value="Submit" />
</div>
Convert to:
<form name="input" id="" action="html_form_action.php" method="post">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income"/>
</div>
<input type="submit" value="Submit" />
</form>
So all I want is change the div with class ".myForm" to Form element
and closing div with closing form tag.
Is there any way to do this?
Use Javascript + jQuery:
$('.myForm').children().unwrap().wrapAll("<form name='input' id='' action='html_form_action.php' method='post'></form>");
This removes the wrapping div ".myForm" with the unwrap method. Then wraps it's children with the wrapAll method.
You can done this work simply using Jquery -
$(document).ready(function(){
$('form').html($('.myForm').html());
});
But if you want to do this, this is not correct because you use assign id of some element. So after append whole HTML into <form> you should remove .myForm.
Try This
For remove div with class .myForm after append innerhtml into form, you can simply use .remove.
$(document).ready(function(){
$('form').html($('.myForm').html());
$('.myForm').remove();
});
Try This
If you do like html5, you can check out html5 "form Attribute", which allows you to use the form elements wherever you like, and you don't need to wrap the contents inside form tags.
Check this out
<form name="input" id="myform" action="html_form_action.php" method="post"></form>
<div class="myForm">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit" form="myform" />
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income" form="myform" />
</div>
<input type="submit" value="Submit" form="myform" />
</div>