I have one span that contain a button when you click it button disappear and the span appear and show this text "wait..."
Im doing this with appendchild, so i write a code for it to stop appending new childs, the script is fine and worked but something else happen...
when i click on the button it disappear and the text appear but the LogIn wont happen anymore.
here's the code:
<script type="text/javascript">
function enterSystem() {
document.getElementById("btnLogin").style.display = 'none';
var span = document.getElementById('brain13');
while ( span.firstChild ) {
span.removeChild(span.firstChild);
}
span.appendChild( document.createTextNode("Wait...") );
}
</script>
HTML SIDE:
<span id="brain13" onclick="enterSystem();">
<asp:Button ID="btnLogin" runat="server" OnClick="btnLogin_click" />
</span>
the problem is that onclick for the button"btnLogin_click" stop working.
thanks for any suggestion.
I think that the span gets the click event first, and given that your login button is inside it, he gets removed before he can handle it. Try putting your login button outside the span.
Also, while jQuery is tagged, I assume we can do some logical abstraction with something like this:
$('#brain13').click(function(){
$('#btnLogin').hide();
$(this).html('<p>Waiting...</p>');
});
See this working FIDDLE.
your chunck of code works on document load i.e. first time the page is loaded, you should be writing that in a function and calling that function wherever or whenever you want to remove child
Related
This might be very basic but I couldnt really find a solution to this. I am creating my own website. I have written a javascript file, simply called "main.js".
I can call my entire script in my HTML file like so:
<script src="main.js">
</script>
And I see in the console that everything works as it should. However, this is not what I want. What I want is the code in the JS script to be fired upon a click on my button. This is what I tried:
<input class="button" onclick="main()" type="submit"
value="Submit" name="">
</div>
So I want the script that I have referenced somewhere else in the HTML file to fire the "main" function when my button is clicked. But what happens currently is that the click onto the button simply reloads the page.
So, to get this all into one question:
I want to click my html button and then fire a single function from another script that is called "main.js".
How can I achieve that?
Thank you
I think this might be because of your type: submit.
Try changing it to type="button".
Hope this helps!
You are trying to call a function called main, but you need to run a script that creates a function. The browser won't go looking in a JS file with the same name as the function automatically.
Edit main.js so the code appears inside a function.
function main () {
// Your code here
}
If you don't want the form to be submitted after the JS function is called, then don't use a submit button to trigger it. Use a type="button".
A submit button triggers a reload as it submits the formto the server, unless your main function returns false.
Adding
return false;
at the end of main should do the trick.
I'm trying to do what seems to be a simple task but I can't seem to figure it out . I'm replacing the contents of a tag using jquery .html method. I want to get it changed when I click on a button and it does change but then immediately returns back to its original value, I cannot understand why is that ? I tried .replaceWith as well and it has the same effect. Any ideas?
Here is the html part:
...
<div class="container">
<h1 id="putname">Hello</h1>
</div>
Submit
...
Here is the java script
<script>
$("#btn1").click(function(){
var name = $("#inputname").val();
$("#putname").html("<p> text </p>");
alert ("hello" + name); });
</script>
I added alert just to demonstrate that it works and you can see html is being replaced but then it switches back to its original value...
Thanks
I am guessing you have a submit button that submits the page, so you need to cancel the submission or prevent the default action of the button.
$("#btn1").click(function(event){
event.preventDefault();
Background: I have a form on a single page with several div's that start out with only the first div showing and all others hidden. As you make a selection, the next form div is dynamically built and displayed based on the choices in the previous div. All previous form divs are still displayed. You progressively end up with more of the form fields showing as you progress through the choices. I have not put the whole code up here for brevity.
I am using JavaScript for this. I am NOT using jQuery intentionally as I am still working on being completely comfortable in JavaScript before I start relying on a library.
My Problem: I want to hide the submit button at the end of the form until the last form div is revealed. Everything I am trying is not working and I've exhausted things I have found on the web. It should be really simple, but apparently their must be something special about a submit button that is not in my JavaScript knowledge yet.
What I've Done: Below is what I think should work, but does not (I have kept the code limited to the issue at hand, however if someone thinks it is deeper then this I will happily edit and add more code). The onclick() function is working properly for otherDiv. i.e. when you click on the 2nd to last Div, OtherDiv is displayed as expected. It should also reveal the submit button, but does not (and the submit button is not hidden in the first place).
The problem is as simple as for whatever reason, the submit button is not given the style of "none" on page load and also is not give the style of "block" when the onclick() event happens.
I see in my console the below error that shows when I use GetElemntsByName to target the submit button as shown below, but am not sure why I am getting it. I understand the error, just not why my targeting of the submit button with GetElementsByName is throwing the error.
I have also tried this targeting the submit button by Id with GetElementById and while the console error below goes away then, I still do not get the submit button hidden.
I have shown the code below with the GetElementsByName error because I want to understand that error as well as solving my hidden submit button problem.
Console
TypeError: pdfButton.style is undefined
if(pdfButton) {pdfButton.style.display = 'none'};
HTML
<form id="buildShopDrawing" name="BuildShopDrawing" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="submit" name="buildPDf" id="buildPDf" class="buildPDFbutton" value="Build the Shop Drawings PDF">
</form>
Javascript
function preparePage() {
// Set common divs to var for ease of use
var pdfButton = document.getElementsByName('buildPDF');
// hide: submit button until last form is revealed
for (var i = 0; i < door.length; i++) {
door[i].onclick = function() {
if(this.checked) {
otherDiv.style.display = 'block';
pdfButton.style.display = 'block';
}
};
};
//hide form divs on initial page load
if(pdfButton) {pdfButton.style.display = 'none'};
} //end preparepage
// Do not execute JavaScript until page is loaded
window.onload = function() {
preparePage();
};
As always, your help is appreciated!
You have a typo. id="buildPDf" != ('buildPDF')
(And as others pointed out, use getElementById)
You need to use document.getElementById instead of getElementsByName that return a collection, it mean you can access element by its index only.
I've got an old application in ASP.NET. In a form with a Submit button, I put this div at the top of the page:
<div id="submitIndication" class="saveIndication" runat="server" visible="false">
Your request has been submitted.
</div>
On btnSubmit_Click in the code-behind, I put this line:
submitIndication.visible = true
This code then handles a fading out of the div:
jQuery(document).ready(function () {
setTimeout(fadeOut, 4000);
});
function fadeOut() {
jQuery("#submitIndication").slideUp(400);
};
That all works fine. However, there are two other buttons on the page, "Prefill Form" and "Opt Out". These call their own methods (btnOptOut_Click and btnPrefillFormInfo_Click), neither of which touches the submitIndication div in any way.
But, after I submit the form the first time, when I click Prefill Form or Opt Out, the page refreshes, and the submit div appears at the top again. If I click them before submitting, this doesn't happen.
It seems the div is still on the page at this point, and just displaying until the JavaScript fades it out. I've tried all manner of things (setting CSS visible to false and display to none, remove(), hide(), attr(), etc.), and nothing seems to get rid of this div.
This feels like it should be so simple. How can I get this div to not show up after a submit and clicking other buttons?
Try this:
Declare DIV as:
<div id="submitIndication" class="saveIndication" runat="server" style="display:none">
Your request has been submitted.
</div>
And on btnSubmit_Click in the code-behind put this line (assuming u're using C#):
submitIndication.Style["display"] = "block";
And use your current fadeout code.
Update Come to think of it even simpler approach should work. Keep everything as it is in your setup, just add EnableViewState = "false" to your DIV's HTML definition.
I have a javascript method that creates a bunch of elements on click. When I call it from a button, it only stays on the screen for the duration of that click. when I enter the exact same code into the console, however, it stays on the page until I reload or navigate away (which is exactly what I want).
JavaScript code: (it's the only method in the js file)
function post() {
var postTitle = document.createElement('h3');
var nodeTitle = document.createTextNode('Immigration is good.');
postTitle.appendChild(nodeTitle);
etc....
Where I'm calling it in the html:
<input type="submit" id="post-button" value="Post" onclick="post()">
The script tag is in the header of the html page.
How do I get it to stay on the page past the duration of the click? Any ideas why it's being immediately obliterated?
You still need to cancel the form's submission. A return false; from post, if it exists, won't work because the onclick attribute is calling post() but not returning anything.
You could change it to onclick="return post();", but it would be better to attach the handler directly, and to the submit event of the form and not the click event of the button (people do use Enter sometimes!):
document.getElementById('some-form').onclick = post;
Look at what the button does. It is posting!
When you click the button it is redirecting you back to the page you are currently on! It seems like it is showing up and disappearing what is actually happening though is that the page is refreshing.
There are a couple of options to do what you want. Submitting via Ajax or having your server respond with a hashbang/cookie set to direct the page to do as you wish.