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>
Related
i'm trying to use login and register in one page in react tsx and this is my code but when i click to show login it's show for like 1 second and then return to signup i don't know why the state change
import React, { ReactElement, Fragment, useState } from 'react'
interface Props { }
function Home({ }: Props): ReactElement {
const [login, setlogin] = useState(false);
return (
<Fragment>
<div className="welcomdiv">
<h1 id="weltxt">Welocme to your Todo List</h1>
<h3 id="strtxt">Let's Start By Making a Account</h3>
</div>
{login ?
<form className="form-signin">
<input type="email" id="inputEmail" className="form-control" placeholder="Email address" required />
<input type="password" id="inputPassword" className="form-control" placeholder="Password" required />
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
:
<form className="form-signup">
<input type="text" name="username" className="form-control" placeholder="Username" required />
<input type="email" name="email" className="form-control" placeholder="Email address" required />
<input type="password" name="password" className="form-control" placeholder="Password" required />
<input type="password" name="password2" className="form-control" placeholder="Confirm Password" required />
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
</form>}
<p id="logintxt">Alrady have an Account , Want to <a href="" onClick={() => setlogin(true)}>Login</a></p>
</Fragment>
)
}
export default Home;
This is because button with the type, submit, will actually try to trigger the form's default submit action.
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
If you do not wish that to happen, you can simply switch the type to button, and manually bind the onClick event to your custom click handler method.
type="button"
You may read more about the submit behaviour over here.
In addition, it will be more specific if you type your functional component as React.FC<Props>, instead of ReactElement.
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>
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>
My alert message pop ups before the loading/submission of a record, so if the user didn't input any data. It still pops up. What additional javascript function should I use for my alert box?
Here's my code
function myFunction() {
alert("Adding Succesful!");
}
<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
<input name="bName" class="form-control req" required/>
<button type="submit" class="btn btn-default bt" onclick="myFunction()" style="align:right;">ADD</button>
Use HTML5 validity checks to see if the form is valid or not.
var form = document.getElementById('f');
function myFunction() {
if (form.checkValidity()) {
alert("Adding Succesful!");
}
}
<form id="f">
<label for="bName" class="control-label col-xs-4">
<p class="left">Brand Name</p>
</label>
<input name="bName" class="form-control req" required/>
<button type="submit" class="btn btn-default bt" onclick="myFunction()" style="align:right;">ADD</button>
</form>
Try using:
<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
<input name="bName" class="form-control req" required/>
<button type="submit" class="btn btn-default bt" onclick="return myFunction(this)" style="align:right;">ADD</button>
(note I changed the onclick to include a return and a this)
And use it with the JavaScript:
function myFunction(t)
{
if($(t).prev().val())
{
alert('Adding Succesful!')
return true;
}else{
return false;
}
}
while i am pressing enter key its calls function which automatically refreshing the page. the function i wrote for cancel button
<form name="myForm">
<div >
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div >
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<div >
<button type="Cancel" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</div>
</form>
after filling any of textfield press enters its calls the clearDetails function
$scope.addDetails = function() {
var postObj = new Object();
// add details stuff here
}
$scope.clearDetails = function() {
//refresh the page stuff here
//here i am redirecting to the same page
}
Change the type of the cancel button to reset:
<form name="myForm">
<div>
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div>
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<button type="reset" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</form>
On many browser enter consider as submit form or associate with first button click .. just a suggestion move submit button up and cancel button down in html it might solve the problem.
make sure there must be space between two attributes of submit button. You wrote the code as
<button **type="submit"ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>
it must be
<button **type="submit" ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>