removeChild not working - javascript

Hi all i am just trying to remove my form when i click on a button but i have no results. I am sure that function "sign()" was called but with no effect on my layout:
<body>
<div id="divSign">
<form action="#" method="post">
<div class="header">
<p>All Together</p>
</div>
<div class="description">
<p>Hi friend</p>
</div>
<div class="input">
<input type="text" class="button" id="chiave" placeholder="Chiave Segreta">
<input type="submit" class="button" id="submit" value="ENTRA" onclick="sign();">
</div>
</form>
</div>
</body>
<script>
function sign() {
document.body.removeChild(document.getElementById("divSign"));
// OR THIS
var f = document.getElementById("divSign");
while (f.hasChildNodes()) {
f.removeChild(f.lastChild);
}
// OR THIS
var f = document.getElementById("divSign").style.visibility = "hidden";
}
</script>
Nothing seems affect my page, i just to clear my page after click.

On clicking, your form get submitted and the page refreshs.
Use this onclick instead, the return false; will prevent the form from being submitted and your page will not be refreshed anymore :
<input type="submit" class="button" id="submit" value="ENTRA" onclick="sign(); return false;">

It's not removed because the page is reloaded after your click on the button, because it's a form. To prevent that, you can use return false; at the end of your function.
function sign() {
/*********
Your code
**********/
return false; //add this line
}

With jquery you can do by using empty
$("#divSign").empty()
or
$("#divSign form").remove()

Related

Why is my button that calls a function on click making my page reload

I am working on a form that uses javascript to create a paragraph. For some reason, when I click my button, it forces my page to reload. Could you anyone let me know what I'm doing wrong here?
console.log('everything is linked')
function createParagraph() {
console.log('function called');
var wordOne=document.getElementById('textOne').value
var wordTwo=document.getElementById('testTwo').value
var paragraph = '<p>My first word is' + wordOne+'. My Second word is '+ wordTwo+'.</p>';
document.getElementById('answer').innerHTML= paragraph
}
<body>
<form action="">
<input id='textOne' type="text">
<input id='textTwo' type="text">
<button onclick="createParagraph()">Click Me</button>
</form>
<div id="answer"></div>
<script src="app.js"></script>
</body>
The default behavior of a <button> inside a <form> is to submit that form. Set the button's type to explicitly not be a "submit":
<button type="button" onclick="createParagraph()">Click Me</button>
Additionally, if you have no use for the actual <form> (don't want to submit it) then it's probably best to just remove it:
<body>
<input id='textOne' type="text">
<input id='textTwo' type="text">
<button type="button" onclick="createParagraph()">Click Me</button>
<div id="answer"></div>
<script src="app.js"></script>
</body>
That way there's nothing to accidentally be submitted in the first place.
Your button acts as a submit button, so your form is being submitted. To prevent this, you can use attribute onSubmit on your form and prevent sending form.
<form onSubmit="return false">
Because the button is in a form and the form is probably submitted.
add the type="button" to not submit the form.
console.log('everything is linked')
function createParagraph() {
console.log('function called');
var wordOne=document.getElementById('textOne').value
var wordTwo=document.getElementById('testTwo').value
var paragraph = '<p>My first word is' + wordOne+'. My Second word is '+ wordTwo+'.</p>';
document.getElementById('answer').innerHTML= paragraph
}
<body>
<form action="">
<input id='textOne' type="text">
<input id='textTwo' type="text">
<button type="button" onclick="createParagraph()">Click Me</button>
</form>
<div id="answer"></div>
<script src="app.js"></script>
</body>

How to add a loading gif when submitting a form

None of the current questions asked about this topic seem to help me, I am fairly new to this and I need some help. Currently I have a form, and on submit (currently do not have any validation) it shows a hidden div using this function.
function showDiv() {
document.getElementById('showme').style.display = "block";
}
I would like to add a loading gif, that shows for around 2 seconds after clicking the button and then carries on to show the hidden div.
My form is as shown -
<form action="" method="POST" id="hello" onsubmit="showDiv(); return false;">
The button to log in is here
<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
function showDiv() {
document.getElementById('Login').style.display = "none";
document.getElementById('loadingGif').style.display = "block";
setTimeout(function() {
document.getElementById('loadingGif').style.display = "none";
document.getElementById('showme').style.display = "block";
},2000);
}
<div id="showme" style="display:none;">You are signed in now.</div>
<div id="loadingGif" style="display:none"><img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"></div>
<form action="#" method="POST" id="hello" onsubmit="return false;">
<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
</form>
The issue is that you have return false in your code that executes when you submit the form, effectively cancelling the submit, so your function doesn't get called.
You should not use inline HTML event attributes in the first place and do all your JavaScript separately. Here's why.
Additionally, if you aren't actually capturing data and sending it anywhere, then you shouldn't have a form, a submit button or deal with submit events, you just need a regular button and its click event.
Also, don't name your form submit as this will prevent you from programmatically calling the submit() method on it.
Here's what that should be:
// Get references to the DOM elements you'll need:
var button = document.getElementById('Login');
var special = document.getElementById("special");
var pleaseWait = document.querySelector(".hidden");
// Set up your event handlers in JavaScript, not with HTML attributes
button.addEventListener("click", function(evt){
// Show the message by removing the class that hides it:
pleaseWait.classList.remove("hidden");
// Wait 2 seconds and then run a function that re-hides the message and
// submits the form.
setTimeout(function(){
pleaseWait.classList.add("hidden");
special.classList.remove("hidden");
}, 2000);
});
.hidden {
display:none;
}
.img {
width:50%;
position:absolute;
}
<form action="#" method="POST" id="myForm">
<input class="btn_green_white_innerfade btn_medium"
type="button" name="Login" id="Login" value="Sign in"
width="104" height="25" border="0" tabindex="5">
<img class="hidden img" src="https://www.cluecon.com/theme/img/pleasewait.gif">
<div class="hidden" id="special">Here I am</div>
</form>

Javascript innerHTML Not Posting

I am trying to get a function to print out whatever the user inputs into the text-box. I am using onClick as an attribute on my submit button. I know I set it up properly because it flickers the answer, but only for a split second. How can I get the input to stay on the page? Here's the code: HTML: Type what you want to post to the website!
HTML:
<div id="main_div">
<section id="leftbox">
<form name="mybox">
Type what you want to post to the website!:
<br />
<input type="textbox" size="15" maxlength="15" name="text" id="text">
<br />
<input type="submit" value="Submit!" onClick="doFirst()">
</form>
</section>
</div>
<div id="insert"></div>
Javascript:
function doFirst(){
text = document.getElementById('text');
insert = document.getElementById('insert');
if(text.value == "")
{
insert.innerHTML = "Please input something!";
return false;
}
else
{
insert.innerHTML = text.value;
}
}
try this:
Using type=button
<input type="button" value="Submit!" onClick="doFirst()">
OR using type=submit
<form name="mybox" onsubmit="doFirst(); return false;">
<input type="submit" value="Submit!">
</form>
Explain:
The action for onclick in submit button DO executed. You keep see the page does not have any changes, because of there are a FORM. And the key point: the form handle the submit action after the JS function doFirst() immediately. Adding the onsubmit in the form with return false to stop default action, means:
<form name="mybox" onsubmit="return false;">
<input type="button" value="Submit!" onClick="doFirst()">
</form>
To simplify the changes, use button instead of submit type, or using onsubmit instead of onclick in form trigger.
onClick="doFirst()"
gets converted into an anonymous function:
function(){ doFirst() }
and whatever that function returns determines if the submit should be completed or aborted, so you should use:
onClick="return doFirst();"
In other words, it's not enough that doFirst return something, whatever doFirst returns should be returned again inside the onClick.

Why dynamic created button not working?

I have a search page, when click the button, then it display the search result.
however, in the result page, when I continue to search for something, it seems that the button is not responding:
here is script:
<div id="mainpage" >
</div>
<script id="search" type="text/xml" >
<div>
<input type="search" name="search" data-style="mini" data-theme="d" placeholder="search" value=""/>
<button id="searchButton" type="submit" onClick="app.navigate('#home/search',{trigger: true});">Search</button>
</div>
<div>
<table >
{{result}}
</table>
</div>
</script>
here is part render the page at back:
if(route=='search'){
var data = $.mobile.activePage.find("input[name=search]").val();
/*
code to filter the result
*/
$('#mainpage').html(_.template($('#search').html())(
{
result: resultvalue }
));
}
Your javascript is invalid is the first problem.
You're closing your _.template method call early.
Try replacing it with this:
if (route === 'search') {
var data = $.mobile.activePage.find("input[name=search]").val();
...
$('#mainpage').html(_.template($('#search').html(), {
result: resultValue
}));
}
EDIT
Try replacing the onclick event on your button with this:
onclick="app.navigate('#home/search',{trigger: true}); return false;"
Your onclick event was probably happening, but you weren't stopping the default behaviour of the submit button.

E-mail form interactivity

I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.

Categories

Resources