I am new to javascript and jquery.
I have a form which has only one text box and type is email and I have a submit button. After clicking the submit button value in text box will not disappear and I don't want to(Not clearing form). Now my problem is Button should disable after clicking on it and it should active only value in text box changes.
My code is
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);">Send message</button></div>
And jquery is
$(document).ready(function(){
$("input[name='email']").change(function(){
if ($(this).val() != $(this).val())
{
$("input[name='submit']").removeAttr('disabled');
}
});
});
please help to solve this issue.
Because following statement $(this).val() != $(this).val() will always be false.
You don't need to do this because change function already does what you need.
$(document).ready(function(){
$('#g-email').on('input', function(){
$("button[name='submit']").removeAttr('disabled');
});
});
Working example
$(document).ready(function(){
$('#g-email').on('input', function(){
$("button[name='submit']").removeAttr('disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);" disabled='disabled'>Send message</button></div>
You can set the messageButton disabled initially and listen for the keyup event in the g-email input. Then, if the input g-email has text enable the button else disabled it:
$(document).ready(function(){
$('#g-email').on('keyup', function(){
if($(this).val()){
$("#messageButton").removeAttr('disabled');
} else {
$("#messageButton").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);" disabled='disabled'>Send message</button></div>
Use jQuery .prop() method to change submit button disabled value:
var submit = $("#messageButton");
var input = $("#g-email");
input.on("keyup", function(ev) {
var isDisabled = submit.data("submitted") && submit.data("submitted") === input.val();
submit.prop("disabled", isDisabled);
});
submit.on("click", function(ev) {
submit.prop("disabled", true);
submit.data("submitted", input.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
<button type="submit" name="submit" class="btn btn-md btn-default" id="messageButton" value="Place Order" onclick="$(this).attr('disabled', true);">Send message</button>
Related
I have a form that has an input field that has autofocus with a reset button. When resetting the form, I would like the input set to focus again. Does anyone have a solution?
<form>
<input type="text" name="focus" required class="search-box" autofocus="autofocus"
placeholder="search items" />
<button type="submit" class="btn btn-primary filtersearch"
data-id="<?php echo $_POST['search']; ?>"><span class="glyphicon glyphicon-filter"></span>
Filter items</button>
</form>
A) Use a reset button instead of an anchor element to retain the form-reset behavior of the browser.
B) Bind a reset event handler to the form and focus the field that has an autofocus attribute. Example: (without jQuery)
var form = document.querySelector('form');
form.addEventListener('reset', function(event) {
var autofocusField = form.querySelector('[autofocus]');
if(autofocusField instanceof HTMLInputElement) {
autofocusField.focus();
}
});
<form>
<input type="text" name="focus" required class="search-box" autofocus="autofocus"
placeholder="search items" />
<button class="close-icon" type="reset">Reset</button>
<button type="submit" class="btn btn-primary filtersearch">Filter items</button>
</form>
How do I change "Please match the required format" with "Not valid"
I've Looked all over the Stackoverflow couldn't find anything that help it may be a duplicate but please help me!
If I type 'asd' in the field, then press GO, and then continue to type the message "Please match the required format" will appear
I don't want messy code, I want it to be in the html tags if possible!
<form id="banner-message">
<input value=""
name="email"
id="inputEmail"
class="form-control"
placeholder="email"
required=""
autofocus=""
oninvalid="this.setCustomValidity('Not Valid')" oninput="setCustomValidity('')"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
<button class="btn btn-lg btn-block" type="submit">Go</button>
</form>
You need to use onchange and this.setCustomValidity
<form id="banner-message">
<input value=""
name="email"
id="inputEmail"
class="form-control"
placeholder="email"
required=""
autofocus=""
oninvalid="this.setCustomValidity('Not Valid')"
onchange="try{setCustomValidity('')}catch(e){}"
oninput="setCustomValidity(' ')"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
<button class="btn btn-lg btn-block" type="submit">Go</button>
</form>
<form id="banner-message">
<input value=""
name="email"
id="inputEmail"
class="form-control"
placeholder="email"
required=""
autofocus=""
oninvalid="this.setCustomValidity('Not Valid')" oninput="setCustomValidity('')"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
<button class="btn btn-lg btn-block" type="submit">Go</button>
</form>
You can also just set the title attribute:
<form id="banner-message">
<input value=""
placeholder="email"
required=""
title="Not Valid"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
<button class="btn btn-lg btn-block" type="submit">Go</button>
</form>
Also pay attention to add oninput="this.setCustomValidity('')" to input tag. Because if you don't, you may get a situation where warning messages are mixed.(One input tag's warning message appears for another input tag)
The answer from Hyyan Abo Fakher kind of works, however it's buggy because we set the "customError" validity state by using setCustomValidity, this causes a lot of false positive validations.
Instead of using oninvalid, we should just use onChange and also check the Validity State for errors we are expecting and ignore customError. This code is for React:
<input
...
onChange={event => {
const target = event.target as HTMLInputElement;
if (target?.validity?.patternMismatch) {
target?.setCustomValidity(customInputError);
} else {
target?.setCustomValidity('');
}}
Here I am only setting my custom error message when I see the "patternMismatch" validity state. If you would like to check all states then check for all of them except target?.validity?.customError as it's a false positive (set by our setCustomValidity call).
I am trying password mismatch error to be displayed when user put two different passwords in input fields on user registration form, but in my program it displays error message already in input field. In my program, the unbind() method is not working.
HTML:
<form action="adduser.php" method="POST" id="registerCandidates" enctype="multipart/form-data">
<div class="form-group">
<input class="form-control input-lg" type="password" id="password" name="password" placeholder="Password *" required>
</div>
<div class="form-group">
<input class="form-control input-lg" type="password" id="cpassword" name="cpassword" placeholder="Confirm Password *" required>
</div>
<div id="passwordError" class="btn btn-flat btn-danger hide-me" >
Password Mismatch!!
</div>
<div class="form-group">
<button type="submit" class="btn btn-flat btn-success" name="register">Register</button>
</div>
</form>
Jquery:
<script type="text/javascript">
$(document).ready(function(){
$("#registerCandidates").bind("submit", function(e) {
e.preventDefault();
if( $('#password').val() != $('#cpassword').val() )
{
$('#passwordError').show();
}
else
{
$(this).unbind('submit').submit();
}
});
});
</script>
Image (it is my user registration form image):
You don't need to unbind. Just avoid calling e.preventDefault() when you want to allow the form to submit. So put that call in the if branch where validation fails.
$("#registerCandidates").bind("submit", function(e) {
if( $('#password').val() != $('#cpassword').val() )
{
$('#passwordError').show();
e.preventDefault();
}
});
When the user edits the password fields after a failing submit, you should hide the error message.
$("#password, #cpassword").on("input", function() {
$("#passwordError").hide();
});
Here is full working code
$("#registerCandidates").bind("submit", function(e) {
if ($('#password').val() != $('#cpassword').val()) {
$('#passwordError').show();
e.preventDefault();
}
});
$("#password, #cpassword").on("input", function() {
$("#passwordError").hide();
});
.hide-me {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="adduser.php" method="POST" id="registerCandidates" enctype="multipart/form-data">
<div class="form-group">
<input class="form-control input-lg" type="password" id="password" name="password" placeholder="Password *" required>
</div>
<div class="form-group">
<input class="form-control input-lg" type="password" id="cpassword" name="cpassword" placeholder="Confirm Password *" required>
</div>
<div id="passwordError" class="btn btn-flat btn-danger hide-me">
Password Mismatch!!
</div>
<div class="form-group">
<button type="submit" class="btn btn-flat btn-success" name="register">Register</button>
</div>
</form>
I would like to press the Enter Key and send a message. I try this:
But there is an error.
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
And I want to manage my function:
handleSendMessage = e => {}
I already try OnKeyPressed but I can't call my functions there.
Thank you.
I prefer a solution without jquery
You would add a keyPress event on the input text input and then detect for an enter key press using e.which ===13
onKeyPress = (e) => {
if(e.which === 13) {
this.handleSendMessage();
}
}
render() {
return (
<div style={styles}>
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} onKeyPress={this.onKeyPress} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
</div>
);
}
You can use a form for it and change your button type to submit
<form onSubmit={this.handleSendMessage}>
<input type="text" className="form-control input-sm chat_input"
placeholder="Write your message here..."
onChange={this.handleTextChange} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm"/>
</span>
</form>
Im trying to make the form of registration or login hide and when the register or login button is clicked, the form will collapse. The codes work just fine but i want to make it when the login button is clicked, the login form will collapse and when the user wants to click on the register button, the login form will hide and the register form will collapse vice versa. I've tried the javascript but it turns out to be a mess. Somebody please help
<button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#loginform" aria-expanded="false" aria-controls="collapseExample">LOGIN
<script type="text/javascript">
var button = document.getElementById('loginbtn')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('loginform').style.display = 'block';
this.style.display = 'none'
}
document.write("<br>")
</script>
</button>
<button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#registerform" aria-expanded="false" aria-controls="collapseExample">
REGISTER
<script type="text/javascript">
var button = document.getElementById('loginbtn')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('loginform').style.display = 'block';
this.style.display = 'none'
}
document.write("<br>")
</script>
</button>
<div class="collapse" id="loginform">
<form class="form-horizontal" role="form" id="loginform">
<br>
<legend></legend>
<input type="text" class="form-control" placeholder="USERNAME" required>
<input type="password" class="form-control" placeholder="PASSWORD" required>
<br>
<input type="submit" class="form-control" role="button" id="logsubmit" value="LOGIN">
</form>
</div>
<br>
<div class="collapse" id="registerform">
<form class="form-horizontal" role="form" id="registerform">
<br>
<legend></legend>
<input type="text" class="form-control" placeholder="USERNAME" required>
<input type="text" class="form-control" placeholder="CONFIRM USERNAME" required>
<input type="password" class="form-control" placeholder="PASSWORD" required>
<input type="password" class="form-control" placeholder="CONFIRM PASSWORD" required>
<input type="email" class="form-control" placeholder="EMAIL" required>
<input type="email" class="form-control" placeholder="CONFIRM EMAIL" required>
<br>
<input type="submit" role="button" class="form-control" id="regsubmit" value="REGISTER">
</form>
</div>
did you consider to use JQuery ? i am asking it because using Jquery is will be much more easy for you. Jquery contains some method which helps you handle hide/show/toggle forms and even with out of the box animations.
You can read more about it in the following links:
jQuery show jQuery hide jQuery toggle
If i will try to apply jQuery to your code it will look something like the following:
$("#loginbtn").click(function(){
$("#loginform").toggle(); // toggle will show hidden element and vice versa
});
where is your form's action? if you can add it, then you can replace your code like this
<script type="text/javascript">
function hideshow() {
document.forms[0].submit();
...
<input type='button' class="form-control" value='LOGIN' onclick="hideshow()" />