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).
Related
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>
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 am trying to remove a link(I want to make this as button please help in that too) with id=regbutton as soon as my index.jsp page is loaded as a response on clicking login button on regdata.jsp page
regdata.jsp
<script>
$(document).ready(function(){
$("button").click(function(){
$("#mainDiv").load("index.jsp");
$('#regButton').remove();
});
});
</script>
</head>
<body>
<div id="mainDiv" class="units-row">
<h2>Thanks For registering!</h2>
<button id="regLogin">Login Now</button>
</div>
index.jsp
<body>
<center>
<s:actionerror />
<h1 id="login_title"></h1>
<form action="checkLogin.action" method="post">
<p>
<input type="text" id="username" name="username"
placeholder="" >
</p>
<p>
<input type="password" name="password"
placeholder="" id="password">
</p>
<label> <input type="checkbox" name="remember_me" id="remember"><label for="remember" id="rememberlbl"></label></label>
</p>
<input type="submit" class="btn-log" method="execute"
key="label_login">
</form>
Register
</center>
</body>
The jQuery's load function takes a second or third parameter - a callback function to execute when loading is done. So if you want the button to disappear only when the load completes you should move your code for it into that handler:
$(document).ready(function(){
$("button").click(function(){
$("#mainDiv").load("index.jsp", function() {
$('#regButton').remove();
});
});
});
I can see a simple solution
#regButton
{
display:none;
}
If this ain't sufficient i am working on a jquery solution as well
I have a form that I want to submit when a radio button is selected. I already tried some methods to make it work, but it doesn't.
My form is something like this (just one radio option for ilustration, but the original one has 20 options):
<form action="http://spartanas.com.br/novo/wp-comments-post.php" method="post" id="votoscommentform" class="comment-form">
<div class="anuncio vitrine">
<a href="http://spartanas.com.br/novo/ninasalvattori/">
<div style="position: absolute; width: 172px; height: 285px;" class="fphover"> </div>
<img src="http://spartanas.com.br/novo/wp-content/plugins/nextcellent-gallery-nextgen-legacy/nggshow.php?pid=982" style="width:172px;height:285px">
</a>
<div class="infos">Nina Salvattori<br>Hotéis e Motéis</div>
<div style="text-align:center"><strong>1 Voto</strong><br>
<p><input onchange="this.form.submit();" value="6019" id="6019" name="comment" type="radio"><label for="6019">Votar</label></p></div></div>
<p class="form-submit">
<input name="submit" id="votarcomentform" value="Votar" type="submit">
<input name="comment_post_ID" value="6183" id="comment_post_ID" type="hidden">
<input name="comment_parent" id="comment_parent" value="0" type="hidden">
</p>
<input id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment" value="f33d177e03" type="hidden"><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
</form>
As you can see this version I tried to submit it with onchange event, but I've tried with JQuery too:
<script>
jQuery(document).ready(function($) {
$('input[type="radio"][name="comment"]').click(function() {
$(this).closest("form").submit();
});
});
</script>
What am I doing wrong?
you can use change event...
<script>
jQuery(document).ready(function($) {
$('input[type="radio"][name="comment"]').change(function() {
$(this).closest("form").submit();
});
});
</script>