I have an file "dashboard.html" that I am trying to manipulate with jQuery. The contents are such:
<div id="dashboard">
<span id="contracts">
<div id="make-offer">
<button onclick="getDetails()">add</button>
</div>
<div id="offer-type" style="visibility:hidden">
<form action="">
"Offer what for what???"
<button id="add-good" onclick="addGood()">good</button>
<button id="add-service" onclick="addService()">service</button>
</form>
</div>
</span>
</div>
I am trying to hide the "make-offer" div upon clicking the button and show the "offer-type". However, when I run the following js file, the divs do not change their visibility, though my test message is successful.
function getDetails(){
console.log("getting details.");
$("#make-offer").css("visibility:hidden");
$("#offer-type").css("visibility:visible");
}
Can anyone spot what I'm doing wrong? thanks.
You're calling .css() improperly. Two choices:
$("#make-offer").css("visibility", "hidden");
or
$("#make-offer").css({ visibility: "hidden" });
The second way allows you to set more than one property at a time.
When you pass just one parameter, you're asking jQuery to give you the current value of that CSS property.
jQuery does things a little differently
function getDetails(){
console.log("getting details.");
$("#make-offer").css("visibility", "hidden");
$("#offer-type").css("visibility", "visible");
}
Related
I have programmed a point system, after successful redeeming I give with isset($succesMsg) a message that it was successful.
Now I want to show a small animation using JavaScript, but it does not work.
My PHP Code
$succesMsg= "<div class='body-overlay' id='body-overlay'></div>
<div class='overlay' style='display: none;'><h1><span>+ {$codeCoins['coins']}</span></h1></div>
My HTML Button is:
<input type="submit" name="code" class="btn btn-primary w-100" value="CODE EINLÖSEN">
My JavaScirpt Code is
<script>
$(document).ready(function(){
$(".overlay").hide();
$(".btn btn-primary w-100").click(function(){
$(".overlay").show();
setTimeout(function() {
$('.overlay').fadeOut();
}, 3000);
});
});
</script>
When I click on redeem I see in the source code that the div fields are set (body-overlay and overlay) but the animation does not work.
If I try without the PHP migration it works, but unfortunately brings me nothing.
I can't find the error, I'm searching all the time.
Two mistakes I can see in your code:
$(".btn btn-primary w-100")
Whenever you want to add an any event using multiple classes of single html element. It should be without space also with dot(.).
Explaining: .btn btn-primary w-100
It will look for an nested elements with mentioned classes. Like you have html elements are as
<div class=‘btn’>
<div class=‘btn-primary’ >
<div class=‘w-100’>
</div>
</div>
</div>
Change it to:
.btn.btn-primary.w-100
About $succesMsg
you have written a html code in it. Which needs to be loaded first
before javascript code.
Do like: keep your html ready in html only and set varibale true or false in php. And you can check that variable in script. If it is true thane .show() or else .hide()
Note: Isset checks whether a variable is set and is not NULL only.
I have a form in a php loop, and if there are 3 elements in the database, there are 3 forms with same name. Those forms do contain a button with the same name. So everything likes like this:
<form id="test">
<button id="testbutton"></button>
</form>
<form id="test">
<button id="testbutton"></button>
</form>
<form id="test">
<button id="testbutton"></button>
</form>
The problem appears when I try to call .on or .click function from javascript. It works only once.
This is the JS code:
$(document).ready(function () {
$('#testbutton').on("click", function() {
function();
});
});
The button fades out certain div's which have different names.
ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.
Give your elements a class instead :
<form>
<button class="testbutton"></button>
</form>
<form>
<button class="testbutton"></button>
</form>
<form>
<button class="testbutton"></button>
</form>
Now your selector can use the class:
$('form').on("click", ".testbutton", function(){ // event will bubble up to form
please try to bind event on button type rather than id like this
$(':button').on("click", function(){
// do other stuff
});
Please check here in fiddle
I have solved my problem with this sentence:
$(this).closest("form").find("input[name=testfield]").val()
It is a bit complicated to explain the problem, but the solution is here. Button click finds the closest form and closest value of the field required. So, my problem is gone, but thanks for all the help, you have helped me to clear out some doubts! :)
Using jQuery I need to hide a DIV and show an image when the Submit button on a form is clicked.
The relevant part of the HTML is below:
<div class="form-group">
<div id="submitDiv" class="col-md-offset-4 col-md-1">
<button id="Submit" name="Submit" type="submit" class="btn btn-primary">Submit</button>
</div>
<div id="SpinWheelDiv" class="col-md-offset-4 col-md-1">
<img id="SpinWheel" height="20px" src="../img/spin.gif" hidden="">
</div>
</div>
The jQuery script being used is below:
<script type="text/javascript">
$('#formCForm').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
$('#SpinWheel').removeAttr('hidden');
$('#submitDiv').attr("hidden","true");
return true;
}
});
</script>
The problem is that when return is set for false this works on both Safari and Chrome. With the return set to true it does not work on Safari anymore. Strangely enough if a put an alert("Hello") before the return Safari does show the alert but fails to hide the div and show the image.
On Chrome everything works as expected.
Maybe I should add that I am using Bootstrap along with Bootstrap Validator
Any ideas please?
Try using:
$('#submitDiv').attr("hidden","hidden");
instead of using
$('#submitDiv').attr("hidden","true");
Simply you can write following code to show an element.
$('#submitDiv').show();
To show or hide best and easy way is to use method .show() and .hide()
e.isDefaultPrevented() by the jQuery API's definition is only true when you e.preventDefault();
I'm not sure if this checks does what you want, but if you don't prevent the default behavior of your submit button; it will trigger an action on the above laying <form> which usually results in a page refresh.
Do e.preventDefault() and start handling your form from there.
I am using divs to hold all inputs. When I refresh F5 in Firefox values that were entered (but not saved) remains on the form.
How do I force all inputs to be empty when they are really empty after page refresh?
A solution would be autocomplete='off', but it's good only for a form.
Is there a similar functionality when a div is holding the input elements?
A HTML, JavaScript or jQuery solution would be ok.
EDIT:
Also another solution could be applying autocomplete='off' to all inputs but I think this is not an elegant solution..
You can use autocomplete="off" property for each input.
While loading of page, just put inside the document.ready statement of jquery
$('#<form_id>')[0].reset();
Example :
<script type="javascript">
$(function() {
$('#<form_id>')[0].reset();
});
</script>
Just try this at your html page.
<div class="test_value"> Test </div>
<div class="test_value"> asdfTest </div>
<div class="test_value"> Tes asd fast </div>
<div class="test_value"> Testa dfasdf </div>
$(function(){
$('.test_value').text('');
});
JsFiddle
Code:
<script type="text/javascript">
$(".reset_form").click(function() {
$(this).closest('form').find("input, textarea").val("");
});
</script>
Button:
<div class="reset_form">
<a class="anchor_link">
<span class="reset_button">
Reset
</span>
</a>
</div>
Using the code above I want to be able to clean input fields of their content when a user clicks on reset_form. However, being new to JS/JQuery I am unsure as to how to accomplish this since I am not using an input button but a div that looks like a button.
Question
How can i tweak my code so that when a user clicks on .reset_button that the fields will be cleared?
<div class="form-container">
<form>
<input type="text" />
<textarea></textarea>
</form>
<div class="clear-form">
<span class="reset_button">Reset form</span>
</div>
</div>
$(document).ready(function() {
$('.clear-form').on('click', function() {
$(this).closest('.form-container').find('input, textarea').val('');
});
});
Fiddle
In order to help you use the DOM traversal selectors like closest() and find(), it is first necessary to know roughly where your form is in relation to the .reset_form <div>, does it have an ID attribute (which makes it very easy to select the form), etc.
However, assuming there is only one form on the page, then this code will work:
Working jsFiddle example
$(".reset_form").click(function() {
$('form').find("input, textarea").val("");
});
As Jedediah mentions below, the above code will reset/clear all forms on the page. If you only wish to clear one specific form, then you can specify an ID in your form tag, thus:
<form id="justthisform"> ... </form>
You can clear only that form by modifying the active line as follows:
$('#justthisform').find("input, textarea").val("");
If you want to clear all elements in the form (radio reset to defaults, dropdowns, etc) you can use the native reset on the form DOM object but use jquery to find it like this:
<script type="text/javascript">
$(".reset_form").click(function() {
$(this).closest('form')[0].reset();
});
</script>
Well one thing to note is that HTML forms natively support resetting via a reset function in the browser:
$(".reset_form").click(function() {
$(this).closest('form')[0].reset();
});
But yeah if your function isn't working then it looks like your (fake) button isn't embedded within the form itself. jQuery's .closest() function will find the form if you do
$(this).closest("form")
So the only thing you need to fix is finding that form.