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.
Related
Okay, so I have form information on a modal, and I need to close the modal (But not submit the form) and then open up another modal and then once they hit the submit button on THAT modal, it makes an AJAX call to a PHP file, with the old form.
I am doing this by taking the form information and moving the whole element to a hidden_div, and then I just append the info onto a form when I am ready.
Works on Chrome, doesn't work on Firefox.
switch_form_event = button.closest('.create-event-form');
hiddenDiv = $('#hidden_inner_div');
parent = switch_form_event.closest('.reveal');
hiddenDiv.attr("name", parent.id.toString());
switch_form_event.style.display = "none";
$(hiddenDiv).append($(switch_form_event)); //FAILS HERE
I have tried other things like: hiddenDiv += switch_form_event but that doesn't work.
The error I get is:
Node cannot be inserted at the specified point in the hierarchy
The node should just be form info without the form tags, aka: <input value='123'/> etc.
Both hiddenDiv and switch_form_event are already JQuery objects. Also, style is not a property of a jQuery object. It may be that your error is actually being caused by something else that you don't realize.
Try this:
switch_form_event = button.closest('.create-event-form');
hiddenDiv = $('#hidden_inner_div');
parent = switch_form_event.closest('.reveal');
hiddenDiv.attr("name", parent.id.toString());
switch_form_event.css("display", "none");
hiddenDiv.append(switch_form_event);
If that still doesn't work, please post the relevant HTML code.
I'm new to JavaScript and want a function that activates when you click on a link that leads outside the website. It should alert that you are about to leave the page and bring up a box that says "Do you really want to leave the site?" with response alternatives "OK" and "Cancel".
I've managed to do this like this (with an img that works like a link):
HTML:
<a href="http://www.urbanoutfitters.com"
onClick="return confirm('Do you really want to leave the site?')"
class="relaterade"> <img src="img5.jpg"/> </a>
I wonder if you can make a function so all in the class "relaterade" gets this confirm box instead of writing this on every single link. Maybe with document.getElementByCLassName? I want all JavaScript in a separate document.
Thanks! :)
You can get the element collection by doing document.getElementsByClassName. You must then loop through the collection and set the onclick event handler
var elements = document.getElementsByClassName('yourclass');
for (var element in elements) {
elements[element].onclick = function() {
return confirm('are you sure?');
}
}
this is from the top of my head, so dont know if it works for sure.
You could do this more easily with a library like jQuery though, cause IE < 9.0 will fail on the getElementsByClassName function
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 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
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.