I have hidden a div tag and I am using JavaScript to make that div tag appear on the screen upon form submission, the problem is that the div tag appears but then it quickly disappears, I have no idea what is going on, I need it to stop disappearing, once the form is submit the div tag should remain visible on the page, the div tag only contains a p tag with some text, I have tried onClick on the button but I get the same result.
<html>
<body>
<form onSubmit="validateRadio()">
<div style="display: none" id="validationText" >
<p style="border: 1px solid black;">
"This field is mandatory".
</p>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
<script type="text/javascript">
function validateRadio(){
validationText.style.display="block";
}
</script>
</html>
Your page is likely refreshing (the action parameter defaults to the current URL if it isn't provided) which causes the DIV to "reappear". If you would like to block the form submission, use onSubmit but make sure to return false in your method.
function validateRadio(){
validationText.style.display="block";
// returning false will prevent the form submission
return false;
}
You're not doing anything to prevent the form from actually being submitted. Change your function to return false:
function validateRadio() {
validationText.style.display = "block";
return false;
}
and your handler to <form onSubmit="return validateRadio()">
jsFiddle example
Yes..
when you submit form, a new page is loaded (or same page is reloaded)
If you will see your validationText, you did'nt submit page, for example transform your
<form onSubmit="return validateRadio()">
and
function validateRadio(){
validationText.style.display="block";
return false
}
Related
this is my problem:
After submitting a form I want to see some data from a database (MySQL) for the selected object in a div-element. This element was set to “display:none” when the page starts.
If the user clicks a button the <div> should become visible and the data should be seen. With another click the <div> should become invisible again. To achieve this I use the jQuery function toggle().
If I use an input-element with “type=submit” the form is submitted and I get the data due to the php statements in the <div>. But unfortunately the <div> will disappear immediately. I guess the submit is starting the page again by default and therefore the <div> is set to “display:none” again.
If I use a button-element instead I am able to toggle the <div> but the form is not submitted, the $_POST is not filled and therefore I did not get any data from the database for the object. The idea was to use the name of the object to set a value for an $id variable to start the SQL-statement.
I tried to keep the source code very short and therefore I did not program the database related statements here. This is not the problem – I am able to get data for the object when I used a normal submit and no toggle function for the <div>.
As you can see in the source code I tried it with three variations of input types. But none of it works like I want it to work.
I know that everything would be easy using another extra page to show the data. But I want to realize it with the <div>.
How can I solve this situation?
Here is my source code:
<!DOCTYPE html>
<html>
<head>
<style>
#wbtogdiv {
width:30%;
height:100px;
border:6px solid green;
display:none;
}
</style>
<script language="JavaScript" src="jquery-1.11.2.js"></script>
<script language="JavaScript">$(document).ready(function(){$("#btn").click(function(){$("#wbtogdiv").fadeToggle(20);return true;});});</script>
</head>
<body style="color:#FF004C;">
<!-- I tried also with this
action="<?php $_SERVER['PHP_SELF']?>"
but of course then the page is fired again and the <div> is not visible due to the
CSS-->
<form method="post">
<input type="text" name="customer">
<input type="submit" id="btn" value="submit:Toggle div green">
<!--
<input type="submit" id="btn" value="submit:Toggle div green">
<input type="button" id="btn" value="input button: Toggle div green">
<button type="button" id="btn">Button: Toggle div green</button>
-->
</form>
<div id="wbtogdiv">KASTEN: <?php echo print_r($_POST)?></div>
</body>
</html>
By default, a button element will submit a form, however, you overrode that behavior by setting type="button". (A tad counterintuitive, I agree.)
Since you're already using jQuery, you can take advantage of its built-in AJAX support and override the default form submission behavior. That's an approach that degrades gracefully: if a user is running in an environment that doesn't execute JavaScript, they will submit the form using default browser behavior and still see the results. (You would tweak your CSS to make your div visible by default in that case, and use JS to hide it during page load.) DEMO jsFiddle
var $form = $('form');
var $resultDiv = $('#wbtogdiv');
$resultDiv.hide();
var successHandler = function(data, textStatus, jqXhr) {
$resultDiv.html(data);
$resultDiv.fadeToggle(200);
};
$form.submit(function(ev) {
ev.preventDefault();
if (! $resultDiv.is(':visible')) {
$.post(
'/path/to/your/script',
$form.serialize(),
successHandler
);
} else {
$resultDiv.fadeToggle(200);
}
});
(Also, since this is a test post, it's possible you aren't doing this in your actual code, but for heaven's sake, be extremely careful about a script that reveals information about its internal working to a user, or a script that echoes user-supplied content, unescaped, back to a web page. These are the first steps toward a fairly major security hole.)
You can try this :
Do not use display: none; in CSS and instead do it by JQuery.
<style>
#wbtogdiv {
width:30%;
height:100px;
border:6px solid green;
}
</style>
And this is what you do :
<div id="wbtogdiv" form-submitted = "no">KASTEN: <?php echo print_r($_POST)?></div>
<script>
$(document).ready(function(){
if($('#wbtogdiv').attr('form-submitted') == "no") {
$('#wbtogdiv').hide();
}
});
$(document).ready(function(){
$("#btn").submit(function(event){
$("#wbtogdiv").fadeToggle(20);
return true;
$("#wbtogdiv").attr('form-submitted', "yes");
});
});
</script>
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');
});
I'm using JavaScript and button to display a portion onclick and hide on re-clicking that portion.
JavaScript code:
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
and the code for button is:
<input type="button" onclick="return toggleMe('para2')" value="Technical Quiz" id="button">
and the content is:
<div id="para3" style="display:none; color:#FFF;">
Rules are Coming UP...
</div>
The main problem is when viewed in opera mini and uc browser, onclicking that button it reloads the page and displays the content. I don't want to reload the page. I just want to display the content without reloading the page.
return true doesn't prevent the default action. the default action reloads the page. Therefore, you should return false to prevent the page reload.
return false;
Additional note. The page reload is likely due to a form being incorrectly submitted by said button.
I am pretty sure that the reload page is caused by the form submit. Are you sure the input is not wrapped by a element?
you can try add e.preventDefault() in the toggleMe function which would block the default operation of the input button.
i am trying to load a html page with the results of a "get" from another link.The idea is when I open the page, I should see the results of the get displayed.
I tried the following with javascript but with no success. The problem is I always get a submit button on the page. I want the submit to be "pre" done!
Please help. Here is what I have:
<body onLoad ="subMe()">
<script>
function subMe(){
document.getElementById("formButton").submit();
}
</script>
<div align="center">
<div style="display: hidden;">
<form action="http://localhost:8000/getusers/" method="get">
<input type="submit" id="formButton" />
</form>
</div>
..
</body>
Any idea? This is linked to my previous post:Cgi C program return value to main HTML and display result
The problem is that you are submitting a button, not the form.
Try:
function subMe() {
document.getElementsByTagName('form')[0].submit();
}
Since you have no need for the submit button, there is also no harm in removing it from the html.
I believe that you have to submit the form, not the button.
document.getElementsByTagName('form')[0].submit();
submit() should be called on the form element, not on a submit button.
Probably something stupid I'm doing. I want to populate a hidden DIV with values of a form on submit.
The DIV does open with correct data, but then resets after the page is finished loading. What am I doing wrong?
Here's my test:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<title>Test</title>
<script type="text/javascript">
function test(){
var usr = document.getElementById('user').value;
var pwd = document.getElementById('passwd').value;
document.getElementById('out').innerHTML = usr + " " + pwd;
document.getElementById('out').style.display = "block";
return true;
}
</script>
</head>
<body>
<form action="" onsubmit="return test()">
<input type="text" id="user" name="user" />
<input id="passwd" type="text" name="passwd" />
<p><input type="submit" value="Go" /></p>
</form>
<div id="out" style="display:none;">
</div>
</body>
Short answer:
Change this
return true;
to this
return false;
Long answer:
Forms are designed to load a new page when they are submitted. However, with scripting we can prevent this behavior by stopping the submit event. This can be achieved in many ways, but for your example, simply returning "false" from your handler will cancel the event, but only if the onsubmit attribute also has a return statement (which you already had).
The onsubmit function is submitting the form back to the page. You need to cancel the event to prevent it from submitting the data and reloading the page. The easy way to do this is to have your test() function return false. If you still want the form to submit and display the data in a div you'll want to submit the form via AJAX or in an iFrame.
Try replacing "return true;" at the end of your function with "return false;". My reasoning is, because you have the action attribute specified but value, it may think that the current page is the value and since you're not cancelling the event the page reloads.
You need to return false
You see, the return value of onsubmit is used to decide whether to continue to submit the form. So if it's true, the page will reload and the values will be lost. If its false, it won't!
This line is probably your problem:
<form action="" onsubmit="return test()">
The blank action attribute causes the page to bounce to itself (reload) when the form is submitted. You can prevent this by making sure test() returns false rather than true, which will keep the form from submitting at all.
When you post the form, the data will be lost. You could stop the form from posting by setting return true to return false, or you could add some logic to print out the user and passwd fields in the DIV id="out" and set the display to block if user and passwd fields have a value.
As an alternativ you can use a link which do the job without submittig the form.
Do
Your problem is on the line
you should fill the action with the name of the page or with php code to directing to the page itself:
i have tested.