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>
Related
I want to click the submit form button using javascript DOM manipulation with the textarea value. I have another button if I click on the button the form will be submitted.
<form class="sendXMPPMessage">
<button type="submit" class="btn send-button fa fa-paper-plane" title="Send the message"></button>
<textarea type="text" class="chat-textarea suggestion-box__input
chat-textarea-send-button
" placeholder="Message" aria-autocomplete="list" spellcheck="false"><!----><!----></textarea>
<span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
</form>
<button class="submit-message">Submit</button>
You could do this. You can listen to click event on .submit-message button and then once that is clicked call click method on .send-button
document.querySelector('.submit-message').addEventListener('click', () => {
document.querySelector('.send-button').click()
})
<form class="sendXMPPMessage">
<button type="submit" class="btn send-button fa fa-paper-plane" title="Send the message"></button>
<textarea type="text" class="chat-textarea suggestion-box__input
chat-textarea-send-button
" placeholder="Message" aria-autocomplete="list" spellcheck="false"><!----><!----></textarea>
<span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
</form>
<button class="submit-message">Submit</button>
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>
Have HTML (part):
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
</form>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</div>
I need to add class "modal-error" for div.modal-write-us if submitted form have empty field/fields.
JS:
var modalWriteUs = document.querySelector('.modal-write-us');
var form = modalWriteUs.querySelector('form');
var userName = modalWriteUs.querySelector('[name=user-name]');
var eMail = modalWriteUs.querySelector('[name=e-mail]');
var textArea = modalWriteUs.querySelector('[name=text]');
form.addEventListener('submit', function(event) {
if (!userName.value || !eMail.value || !textArea.value) {
event.preventDefault();
modalWriteUs.classList.add('modal-error');
}
});
But class is not added. Where is my mistake?
First of all, you need to place your submit button into the form.
Then, change submit button to input:
<input class="btn btn-red" type="submit">Submit</input>
Now you need to make some fixes in your JS.Use double quotes in atttribute selectors:
querySelector('[name="user-name"]')
Attribute required doesn't allow to submit empty form, so your submit callback never runs.If you remove required attribute your code will work.
If you put <button class="btn btn-red" type="submit">Submit</button> inside the <form> it should work.
See working Plunker.
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</form>
</div>
EDIT: More explanation here:
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
I am trying to do a function like I have one input field and two buttons for two different actions but fetch the same input value.
Button 1
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmit" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
</form>
Button 2
<form id="formAddUser" name="search" method="post" action="/biodata">
<button id="btnSubmit" class="btn btn-info primary" type="submit">View BioData</button>
</form>
I have one text where I take the ID of pilgrim and provide two buttons 'view biodata' and 'view location'
How can I get the input value of one html element to pass to two javascript functions to perform some actions with the inputs?
I've typically put both buttons on the form and used jQuery to attach On Click events to change the action of the form. Try this ...
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmit1" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button id="btnSubmit2" class="btn btn-info primary" type="submit">View BioData</button>
</form>
Then, also add (jQuery must be loaded) ...
$("#btnSubmit1").on('click', function() {
$("#formAddUser").attr("action", "/maps");
});
$("#btnSubmit2").on('click', function() {
$("#formAddUser").attr("action", "/biodata");
});
The default action of the form submit will still operate, with different actions.
First: do you have two buttons with same ID? You need to choose different IDs, like btnLocate and btnBiodata.
Second: put the two buttons inside the same form. Sorry if I wrong, but I understand that you have two forms with same ID (again). So, you need just one form, somethink like this:
<form id="formAddUser" name="search" method="post" action="/maps">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnLocate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button id="btnBiodata" class="btn btn-info primary" type="submit">View Biodata</button>
</form>
Later, you need to create a JavaScript function. You know how to create? With JavaScript function you can call elements by ID. Example, if I want to change the text of btnLocate:
<script type="text/javascript">
function changeText() {
document.getElementById("btnLocate").innerHTML = New Text;
}
</script>
To add JavaScript on
Now, call the function on the click event of the button, for example:
<button id="btnLocate" class="btn btn-info primary" type="submit" onClick="changeText()">Locate Pilgrim</button>
This is simple example, with ID of element, you can change what you want. If you want to display something on screen, use alert("Text here") inside JavaScript function.
Hope I can help.
Bye,
Pasch.
Put everything in the same form and use the formaction attribute on one or both of the buttons.
formaction overrides the action attribute on the form tag if that particular button is clicked.
I'm on my phone right now, so it's hard to type up an example, but http://www.wufoo.com/html5/attributes/13-formaction.html has some good information.
<form method="post" action="/selector">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<button name="action" value="view-data" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
<button name="action" value="locate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
</form>
In selector you can figure out what to do using value of the action.
You could combine both buttons and a text input into single form and use JavaScript (via onclick attribute) to change form action based on the button clicked.
<script>
function setMapsAction(){
formAddUser.action = "/maps";
}
function setBioAction(){
formAddUser.action = "/biodata";
}
</script>
<form id="formAddUser" name="search" method="post" action="see-script">
<input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
<br>
<br>
<button id="btnSubmitMaps" class="btn btn-info primary" type="submit"
onclick="javascript:setMapsAction()"
>Locate Pilgrim</button>
<button id="btnSubmitBio" class="btn btn-info primary" type="submit"
onclick="javascript:setBioAction()"
>View BioData</button>
</form>
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>