Develop Reference

JavaScript code gives no answer to my isset, how do I solve the problem?

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.

How to show loading-div after submitting a form with jQuery?

I am new at Javascript and jQuery. I want to show a "loading-gif" after the user submitted a form but can't figure out why my code is not working. That's the situation:
the form has the id="form"
the loading-div has the id="loading" and the style="display:none" (and some others of course)
the submit-button has the class="formtrigger" (and no type="submit")
That's my javascript (initialized after jquery at the bottom of the html-page):
$('.formtrigger').click(function() {
$('#loading').show();
$('#form').submit();
});
When I click the button, the form is submitted, but the loading-div doesn't appear. I tried the line "$('#loading').show();" without binding it on the click-event and it worked. I also tried this code:
$('.formtrigger').click(function() {
alert('blablabla');
$('#form').submit();
});
and both statements worked! First the alert is shown and then the form is submitted. Why does the other code not work?
Thanks in advance.
EDIT: I've also tried the following variations without success
$('.formtrigger').click(function() {
$('#form').submit();
});
$('#form').submit(function() {
$('#loading').show();
});
and
$('.formtrigger').click(function() {
$('#loading').show();
window.setTimeout($('#form').submit(), 5000);
});
and
//HTML
<button type="submit">...</button>
//JS
$('#form').submit(function() {
$('#loading').show();
});

In your .submit(), show your loading spinner:
$("#loading").show();
And after your .submit() is done, hide it:
$("#loading").hide();
And make your spinner display: none; by default since the jQuery above simply changes the css properties for your specified element.
I provided you with a simple demo where I have an AJAX function echoing your message from the text input. It will show a loading spinner until it reaches success.
Fiddle Demo

In the Head put...
<script type="text/javascript">
<!--
function showHide(){
//create an object reference to the div containing images
var oimageDiv=document.getElementById('searchingimageDiv')
//set display to inline if currently none, otherwise to none
oimageDiv.style.display=(oimageDiv.style.display=='none')?'inline':'none'
}
//-->
Put this where you want the spinner to appear... (of course you'll need to find an animated gif for a spinner)
<div id="searchingimageDiv" style="display:none"> <img id="searchingimage1" src="http://www.pathtoyourimage/images/searching.gif" alt="" /> </div>
Your submit button text should be...
<input type='submit' value='Next' name='submit' onclick='showHide()'>

How to create an HTML button that show more text same page

I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?

First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>

Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}

How to disable a submit button after one click?

I have this form inside a div and the submit button inside another div.
<div class="container1">
<form name="reg-form" id="signup" action="" method="post">
<div class="sep"></div>
<div class="inputs">
<input type = "submit" id="submit" name="submitkey" value="GENERATE KEY" />
</div>
</form>
</div>
How would I disable the submit button after one click? I tried every javascript code I find but it doesn't work on me. I dont know if it is because the form is inside a div and the submit button is inside another div. Thank you.

document.getElementById('signup').onsubmit = function() {
document.getElementById('submit').disabled = true;
};
Demo
The code should be put under the script, or wrapped inside a DOMContentLoaded/window.onload handler. Make sure your HTML does not have duplicated IDs.
Also, if the button must stay disabled after a page refresh/form submission, you will need cookies or a server-side session. None of these methods are foolproof though, and this is outside of the scope of the question I believe.

If you have jquery you can use this code:
$('#signup').submit(function(){
$('#submit').attr('disabled', 'disabled');
});

More submit button disabling on click with Jquery, doesn't work

I got this code here:
It works fine as far as disabling and replacing the Submit button goes, but it will not submit the form. My form uses the 'get' method and submits data to another page.
<script type="text/JavaScript">
$('.button').click(function() {
$('.button').remove();
$('.holder').append("DONT DOUBLE CLICK ANYTHING IN A BROWSER");
$('.form').submit();
});
</script>
I have tried most things, including changing .form to the id of my form, still no joy, any ideas would be helpful.
HTML code
<form action="liftingConfirm.asp" method="get" id="frmArchiveConfirm">
<input name="con_id" type="hidden" id="con_id" value="<%=request.querystring("con_id")%>" />
<input name="sub_id" type="hidden" id="sub_id" value="1" />
<input name="liftingDate" type="hidden" id="liftingDate" value="<%=Session("currentUSDate")%>" />
<div class="holder"><input name="btnConfirm" type="submit" class="button" id="btnConfirm" value="Start New Lifting Gear Examination" /></div>

You're using the wrong selector, the .form is looking for a <form> with a class of form. Furthermore you should be using the on() syntax:
$('form').on('click', '.button', function() {
$('.holder').append("DONT DOUBLE CLICK ANYTHING IN A BROWSER");
$('#frmArchiveConfirm').submit();
$('.button').remove();
});

For your jQuery code to work you should include the frmArchiveConfirm to your jQuery code as below.
Replace $('.form').submit(); with $('#frmArchiveConfirm').submit();
else if you only having one form in the page just use $('form').submit();
When you come across bug like this don't forget to make use of the firebug or the browser development tools. You can easily figure out the bug and what's wrong in your code.