<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');
});
Related
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.
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 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.
I'm trying to make my submit button a image and also when clicked it links to another page.
This is the current submit button which works but isn't a href or image
<input type="submit" name="submit" alt="add" onclick="add()" >
These are the multiple methods I've tried but none of them seem to work. Can anyone see where I'm going wrong?
<input type="image" name="submit" src="img/add.png" class="addButton" id="addButton" />
2.
<img src="img/add.png" class="addButton" id="addButton" alt="add button" />
3.
<img src="img/addToBookmarks.png" class="addButton" id="addButton" alt="add button" />
Lastly the form itself on stadiumLargeSymbol.php:
<form class="form" action="stadiumLargeSymbol.php?submit=true" method="post">
<img id="enlargedSymbol" type="text" size="60" name="pathOfSymbol" src='' />
<br />
<input class="inputBox" type="hidden" name="pathOfSymbol" id="pathOfSymbol" />
<script>
var querySrc = URI(window.location.href).search(true).src;
$("#enlargedSymbol").prop("src", querySrc);
$('#pathOfSymbol').val(querySrc);
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
<input type="submit" name="submit" alt="add to bookmarks button" onclick="add()" >
</form>
Check this link:
https://jsfiddle.net/0e2rykap/
<html>
<body>
<h1>
<button type="submit" class="btn_submit">
<img src="http://www.smartwebby.com/imgs/tutorials/fireworks/website-design/submit-button.jpg" />
</button>
</h1>
</body>
</html>
you can use javascript to mimick the href redirection
Try giving id to div where your image is being rendered, Assuming id of your div is "divImage",You can write following is JS :
$("#divImage").click(function(){
//On Click Event
});
You can write your form submission code and redirecting code inside "on-click" event.Your problem will be solved.
Apply a background image to the submit button using css.
// html
<input type="submit" name="submit" alt="add" onclick="add()" >
// css
form input[type=submit]{
background-image: url('img/example.png');
}
And add other styling properties as necessary. Don't forget to remove the border and such from the button in the css.
Instead of input type submit
Use a div , inside div set a image tag like below
<div id="yoyo">
<img src="whateva" />
</div>
Now on click of img tag ID or Div ID , submit the form.
Like :
$( "#yoyo" ).click(function() {
$( "#FormID" ).submit();
//or if you want to redirect than
window.location.href = "http://stackoverflow.com";
});
Here is the HTML of the button i would like to click:
<div style="" class="widgetPlaceholder widgetExpireTurbo" data-widget="turboBinary_tradologic_expireTurbo">
<input type="button" value="15s" class="expireTurboRuleInterval activeRule" data-ruleid="149">
<input type="button" value="30s" class="expireTurboRuleInterval" data-ruleid="148">
<input type="button" value="45s" class="expireTurboRuleInterval" data-ruleid="147">
<input type="button" value="1m" class="expireTurboRuleInterval" data-ruleid="106">
<input type="button" value="2m" class="expireTurboRuleInterval" data-ruleid="107">
<input type="button" value="5m" class="expireTurboRuleInterval" data-ruleid="108">
</div>
I wish to click the button with the value="30s" progmatically via jquery.
Here is the URL: https://binarykings.co.uk/traderoom-aspx?game=turbo&view=single&lang=en&filter=currencies
Thanks
You can use Attribute Equals Selector [name="value"]
Live Demo
$(':button[value="30s"]').click();
Use attribute-equals-selector
jQuery('input[value="30s"]').click();
$('input[value="30s"]').click();
You need to use selector on attibute and also call click when page is loaded:
$(function(){$('input[value="30s"]').click();})
FIDDLE