Blur Body except div element - javascript

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.

Related

Cursor in search form by clicking on button

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).

How do I use jQuery to select an input for use with .empty()?

In the HTML below, how can I use jQuery .empty to remove <div class="password-link"> and everything inside - the href link, the text Log in and the </a> - as well as the closing </div>?
I'm trying to use
jQuery('#lostpasswordform input#wp-submit').empty('password-link');
but I must not be selecting the input or the form in the correct way.
<form name="lostpasswordform" id="lostpasswordform" action="http://localhost/~user/wp-core/wp-login.php?action=lostpassword" method="post">
<input type="hidden" name="redirect_to" value="">
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="">
// Remove this:
<div class="password-link">Log in</div>
</p>
</form>
Make sure you want to remove that element or clean the content of it
$('.password-link').empty() will return:
<div class="password-link"></div>
while $('.password-link').remove() will remove/delete that element .password-link
You can try this way
$('#lostpasswordform input#wp-submit').on("click", function(){
var $passwordlink = $(".password-link");
$passwordlink.empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="lostpasswordform" id="lostpasswordform" action="http://localhost/~user/wp-core/wp-login.php?action=lostpassword" method="post">
<input type="hidden" name="redirect_to" value="">
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="">
// Remove this:
<div class="password-link">Log in</div>
</p>
</form>
.empty() removes the child nodes and content. So the div you want to remove should be wrapped around another div and you can call the .empty() method on that parent div.

How to hide form submit button unless input is focussed (vanilla JS)

I have a form where I would like to hide the submit button unless the input is focussed/selected.
There is only one input apart from the submit.
I need to do this using pure JS (or perhaps CSS/Sass), not jQuery etc.
Basic example:
<form>
<input type="text" placeholder="Example field">
<input type="submit value="Submit">
</form>
First get references to your objects, so change the HTML for example :
<form>
<input id="input_1" type="text" placeholder="Example field">
<input id="submit" type="submit" value="Submit" />
</form>
With some CSS we will hide the submit by default:
#submit{
display:none;
}
We have added Id's, now we add the event listeners for focus on input..
document.getElementById("input_1").addEventListener('focus', function(){
document.getElementById("submit").style.display = 'block';
}
, true);
The second param into the eventListener will execute when the event is fired..
You will need to do more work on this..
https://jsfiddle.net/7uzkzr67/
Here is the pure CSS solution;
.showonfocus{
display:none;
}
.inputfield:focus + .showonfocus{
display:inline;
}
<form>
<input type="text" placeholder="Example field" class="inputfield">
<input type="submit" value="Submit" class="showonfocus">
</form>
You can use the onblur and onfocus events to manipulate your html elements. You can try something like,
HTML
<form>
<input type="text" placeholder="Example field" onblur="setVisible('hidden');" onfocus="setVisible('visible');">
<input id="submit" type="submit" value="Submit" style="visibility:hidden">
</form>
Javscript
function setVisible(state) {
document.getElementById("submit").style.visibility = state;
}
Here is the working DEMO: https://jsfiddle.net/qbotxpL6/
Hope this helps!

javascript to remove dynamically added div

i have 3 textfield which i want to clone with one remove icon on add button click ...upto this my code works fine.
Now i want to remove the last 3 textfields of that particular div on remove button click...but my code removes all the dynamically added textfields of my form..
please help me to resolve this....
$('#add_exercise').on('click', function() {
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><button class="remove">x</button></div>');
return false;
});
$('#exercises').on('click', '.remove', function() {
$(this).parents("#exercises").remove();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
<div class="exercise">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
</div>
<button id="add_exercise">add exercise</button>
<button class="remove">x</button>
</fieldset>
The issue is with your use of .parents('#excercises') as this selects the top level container and removes it.
A better solution would be to wrap all the 3 inputs you append in their own div and then remove that using closest(), like this:
$('#add_exercise').on('click', function() {
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><button type="button" class="remove">x</button></div>');
});
$('#exercises').on('click', '.remove', function() {
$(this).closest(".exercise").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
<div class="exercise">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<button type="button" class="remove">x</button>
</div>
<button type="button" id="add_exercise">add exercise</button>
</fieldset>
Note that I added type="button" to your <button> elements as it would make sense for them not to submit any parent form elements.

How to remove a cloned div in Jquery

<div id="file">
<input type="file" name="txtImage[]" class="upload" />
<input type="text" name="txtImageDesc[]" class="desc" />
</div>
<input type="button" value="Add" name="addButton" id="addButton" />
<input type="button" value="Remove" name="removeButton" id="removeButton" />
This is my html div i need to add and remove on button click and here is my jquery code
<script type='text/javascript'>
$('#addButton').click(function(){
$('.upload:last').clone().appendTo('#file');
$('.desc:last').clone().appendTo('#file');
});
$('#removeButton').click(function(){
$('.upload:last').clone().remove('#file');
$('.desc:last').clone().remove('#file');
});
</script>
Problem is The On add button, it works perfectly but on remove button, it does not.
I need to remove the cloned div when i click on remove button.
I think your remove code should be like this:
$('#removeButton').click(function(){
$('#file > .upload:last').remove();
$('#file > .desc:last').remove();
});
Try this:
$('#removeButton').click(function(){
$('.upload:last').remove();
$('.desc:last').remove();
});
You can also use this,
$('#removeButton').click(function(){
$('#file').css('display','none');
});

Categories

Resources