I have a button that when clicked reveals a form. The user then has to click the form to begin typing.
I would like to make it so that when the user clicks the "click here" button the form appears and text input is already activated, so that the user can type in the form without having to actually click on the form.
Is it possible to have a button activate text input on a form?
$("#button1").click(function(){
$(".form").show();
});
.form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
<input id="form1" type="text" placeholder="type here"/>
</div>
<button id="button1">click here</button>
Definitely possible. You are looking for the .focus() method on the textbox. I have included it in my answer below:
$("#button1").click(function(){
$(".form").show();
$("#form1").focus(); // IMPORTANT
});
.form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
<input id="form1" type="text" placeholder="type here"/>
</div>
<button id="button1">click here</button>
Using the focus method to change the cursor focus, this solution will wait for the animation to complete then have the focus change.
$("#button1").click(function(){
$(".form").show(function() {
$("#form1").focus();
});
});
.form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
<input id="form1" type="text" placeholder="type here"/>
</div>
<button id="button1">click here</button>
Related
I have an invisible search form that only appears when I click a button.
Is it somehow possible that when you click the button, the cursor is directly available in the search field? The "autofocus" attribute doesn't work here. Is there maybe a script solution?
Search form:
<div id="searchform">
<form action="bla" method="post">
... <input type="text" name="item" id="search" placeholder="bla" autofocus /> ...
</form>
</div>
Button:
<a id="button"></a>
Script:
<script>
$(document).ready(function(){
$('#searchform').hide();
$("#button").click(function(){
$("#searchform").slideToggle("fast");
});
});
</script>
To do what you require call focus() on the input as you make it visible:
$(document).ready(function() {
$("#button").click(function() {
$("#searchform").slideToggle("fast");
$('#search').focus();
});
});
#searchform { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchform">
<form action="bla" method="post">
<input type="text" name="item" id="search" placeholder="bla" autofocus /> ...
</form>
</div>
<a id="button">Toggle form</a>
Note that I used CSS to hide the #searchForm element on load instead of JS, as this avoids the element being visible for a fraction of a second before the DOM is ready (aka a FOUC).
I have a one word <p>, and I'm looking to change the content of that paragraph to the value of a input box. It's really simple but I'm new to JavaScript and jQuery.
This is the paragraph to change
<p class="editor-example" id="screen-name">Name</p>
and this is the form and the button I'm using to get and apply the change
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time.
Thanks!!
Put the button inside the form and add an event listener to it. Then grab the value from the input and use innerHTML to replace the content inside p tag
document.getElementById('apply').addEventListener('click', function() {
document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim()
})
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
<button id="apply" type="button">Apply</button>
</form>
You need to write keypress event for the text box
$("#text").keypress(function() {
$("#p").html($("#text").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">p</p>
Please change the value of imput to change p: <input id="text"></input>
You can do like this:
$(document).ready(function(){
$("#nameID").keyup(function(){
var name = $("#nameID").val();
$("#screen-name").text(name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
As you said:
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!
In Jquery:
$(document).ready(function(){
$('#nameID').keyup(function(){
$('#screen-name').text($(this).val());
});
});
In html:
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
$("#apply").click(function() {
$("#paragraph").text($("#nameID").val());
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p id="paragraph">This Text changes from the form below</p>
<form>
<input id="nameID" type="text" >
<button id="apply" type="button">Apply</button>
</form>
I am pretty new to jquery, and was trying to create a search button. I wanted to append some code to a div on button click, but the changes apply for a second, and goes off (Flashes as if the page is loaded again)
My code as below:
HTML:
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>
Jquery:
jQuery(document).ready(function() {
$("#search").click(function () {
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});
Both the console log message and div append get applied for a second and then immediately goes off
The page is, in fact, reloading because you are submitting the form by clicking on it (note: this is quite evident since your console clears when you click. Console output typically only clears on reload). If you don't want to submit the form, you could replace it with a regular button:
<input type="button" name="search" id="search" value="search" class="tfbutton">
or prevent the default event from triggering:
$("#search").click(function (e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
Demo:
jQuery(document).ready(function() {
$("#search").click(function(e) {
e.preventDefault();
console.log('your message');
$("#container").append('<div><p>Results displayed here</p></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- HTML for SEARCH BAR -->
<div id="tfheader">
<form id="tfnewsearch" method="get" action="">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" name="search" id="search" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<div id="container" class="cntnr">
<p>My text here</p>
</div>
</body>
Change input type from submit to button.
<input type="button" name="search" id="search" value="search" class="tfbutton">
This is my code in which I m trying to blur whole body except one textarea div nut could not succeed When I click on textarea whole body gets blur even using not in my script function
$(document).ready(function(){
$(".form-control").focus(function(){
$("body").not("div #hide").addClass("blur");
}).blur(function(){
$("body").removeClass("blur");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text_area_home" id="hide">
<form action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="xAction" value="uploadFile" />
<textarea class="form-control" name="detail" placeholder="Upload File"></textarea>
<div class="text_area_button">
<input type="file" name="uploadDoc"/>
<input class="btn btn-primary btn-xs btn-rect" type="submit" value="Post" />
</div>
</form>
</div>
Take a look at this Fiddle. It accomplishes it finally :)
I had to remove the class from all of the parent elements to the div class as well.
$(document).ready(function() {
$(".form-control").focus(function() {
$("div").addClass("blur");
$('#hide').parents().removeClass("blur");
$('#hide').removeClass("blur");
$('.text_area_button').removeClass("blur");
}).blur(function() {
$("div").removeClass("blur");
});
});
Would like to see if anyone has a 1-liner for that add and removing classes.
I have my HTML structure in the following format
<div>
<form class="form-inline" style="padding-top:10px" action="javascript:function()"> <!-- a search bar-->
<input id="id" type="text" " placeholder="Something">
</form>
<button onClick="somefunction()"> b</button>
</div>
the problem is I want the search bar to work when I press enter in it but unfortunately it is submitting the button element , I am slightly confused as the button is not a form element and I have specifically defined onClick. I am new to javascript so I am sure it is something small but I have not been able to solve it.
ie when I press enter , the "somefunction()" gets active as opposed to "function()"
Try this
HTML
<div>
<form class="form-inline" style="padding-top:10px" action="someFile.php" onsubmit="return someFunc();">
<input id="id" type="text" placeholder="Something">
<input type="submit" name="btn_submit" value="Submit" />
</form>
</div>
JS
function someFunc(){
// code goes here
return false;
}
Just an example.
You may put your button inside the form and have the function called in onClick return false, as discussed here.
EDIT
According to your edit and your comments on what you want, you may do the following:
<html>
<head>
<script>
function formfunction(){
alert("form function is called.");
}
function somefunction(){
alert("the button is clicked.");
}
</script>
</head>
<body>
<div>
<form name="myform" action="#" onsubmit="formfunction(); return false;">
<input id="id" type="text" placeholder="Something">
</form>
<button type="button" onClick="somefunction()"> b</button>
</form>
</div>
</body>
</html>