im currently learning css/js/php
everytime i click the button it shows the div by split second and the hides it again immediately
can someone help
this is the part of the code that im talking about
function showError() {
document.getElementById('error').style.display = "block";
}
<form>
<input type="password">
<div id="error" style="display: none;">Invalid Password</div>
<br/>
<button type="submit" onclick="showError()">LOG IN</button>
</form>
<form>
<input type="password">
<div id="error" style="display: none;">Invalid Password
</div>
<button type="button" onclick="return showError()">LOG IN</button>
</form>
<script>
function showError(){
document.getElementById('error').style.display="block";
}
</script>
There are couple of mistakes first the span tag should be removed since its not closed properly and div should be closed correctly and button should be outside the div tag and mostly importantly button type should not be submit it should be button if its submit the form will be submitted and page will reload as a result it will show the div again
Related
I have a button this name is manuel. When I click this button I want to change display:none property. Actually, its works but my element inside a form. When I click button form posted. I can't stop the post.
<div class="form-group">
<input type="text">
<button onclick="myFunction()" class="btn btn-primary btn-sm">Manuel</button><br>
<input type="text" style="display:none;" id="hide1">
</div>
function myFunction() {
document.getElementById("hide1").style.display = "block";
}
How to create input without form post?
Just change button type="submit" to type="button", so you can do display: none function and if you want to submit the form you can do it with javascript.
This question already has answers here:
Loading GIF on normal form submit
(5 answers)
Closed 1 year ago.
I'd like to show a "please wait" message to the user after hitting "submit" on a form. For now I've managed to at least disable the button after the user clicks it, but how can I display a "please wait" message / modal while the next page loads?
This is my code:
<input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next">
$('form').submit(function(){
$(this).children('input[type=submit]').prop('disabled', true);
});
For this answer, I have provided a hidden <div> with the "Please Wait" text. This could be any HTML in any style you want. When the button is clicked, the wait message is displayed and the submit button is disabled. Since this does not wait for the UI changes to happen, it is possible that the form will submit before the user sees the Please Wait message.
$('form').submit(function(){
$('#waiting').show();
$(this).children('input[type=submit]').prop('disabled', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<div>Please submit the form</div>
<input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next">
</form>
<div id="waiting" style="display:none">Please wait...</div>
You can create a div styled with display: none; and then you show it while triggering the submission.
<div style="display: none;" id="please_wait" class="text-center">
<p>Please Wait...</p>
</div>
$('form').submit(function (e) {
$(this).children('input[type=submit]').prop('disabled', true);
$('#please_wait').show();
});
I have a angular js form and a button that, if pressed, shows the login fields (2 inputs for username and password, and 1 submit button) and another button that hides it.
I've written this simple code below that uses the ng-if directive. it is working fine only problem that after the use press on show login, the div is being shown but the form is being submitted automaticly (without the user press on the submit button).
someone knows why this is happening and how to fix it?
thanks
<form name="loginForm" width="70%">
<br>
<button ng-click="NewConversation=true" >show login</button>
<button ng-click="NewConversation=false" >hide login</button>
<br><br>
<div ng-if="NewConversation">
<input autocomplete="off" name="name" ng-model="name" required placeholder="Name">
<br>
<input autocomplete="off" name="room" ng-model="room" required placeholder="Room">
<br><br>
<button ng-click="updateMsg({name: name,room: room})">Start Talking!</button>
</div>
</form>
Every button inside form tag has default behavior - submit, to prevent it add type="button" to every button inside the form tag.
<button type="button" ng-click="NewConversation=true" >show login</button>
This should help
show login
this will prevent it from submitting automatically
I have a small form inside of a modal window. The window pops up when a link is clicked.
The form has 2 buttons, submit and close.
After something is submitted, the form posts to php. Php returns a thank you message. When I click the close button, it clears the info from the form, but it doesn't clear the thank you message, that remains.
How can I accomplish this? Here is my code. Thank you in advance.
The form
<div class="panel3">
<form id="form1" onsubmit="return submitForm2();">
<input type="text" name="url" size="34" />
<textarea placeholder="Please tell us why this should be reviewed." style="resize:none" name="flag" cols="25" rows="5"></textarea>
<br>
<input type="submit" name="submit" value="Submit" />
<input type="button" onclick="formReset()" value="Close" class="trigger3" />
<div class="form_result2"></div>
</form>
</div>
and the script
<script>
function formReset(){
document.getElementById("form1").reset();
}
</script>
Thanks!
Where is the "Thank you" message displaying? If it is inside the "form_result2", the reset() function won't clear the message. That function only clears the form elements. You have to clear the "form_result2" div separately.
You can use
document.getElementsByClassName("form_result2").item(0).innerHTML="";
I am opening up a small modal dialog using facebox with a form and then trying to access the value inside a text field on that form with javascript. This is the HTML code -
<div id="dialog-form95" style="display:none">
<div class="block">
<form action="" method="post" name="form95">
<h3>Setting URL</h3>
<p></p>
<p><label>URL : </label></p><input type="text" class="text" id="du95" name="url"/>
<p><input type="submit" class="submit small" value="save" onclick="updateUrl(95,109); return false;"/></p>
</form>
</div>
</div>
This is the javascript onclick -
function updateUrl(bid, cid){
alert(document.getElementById('du'+bid).value);
}
I even tried hardcoding "du95". Whenever i update anything in the textbox and submit, it shows a blank alert dialog. Nothing shows up in the js console as well.
That's because it has no value. Try and see what happens:
<input type="text" class="text" id="du95" name="url" value="testing" />
For some reason you have display: none in you container div.
After removing that it seems to work fine in jsfiddle: http://jsfiddle.net/8bSdK/