I have created simple login button,which can only admin log in (only 1 password works).After clicking on a button "LOG IN" it takes me to the new html file.There is a form in this new html file that is hidden but I want it to be visible when i enter it with login.So I was thinking about document.getElementById("hidden_form").style.display = "block"; but that form is not in that HTML file so that cant work.
This is the javascript of the button (so when i click on it it opens a new html document)
<input type="password" id="password" /><br />
<input class="orangebutton" type="submit" value="Nastavi"
onclick="if (document.getElementById('password').value == 'password')
location.href='index.html'; else alert('Wrong password!');
" />
And this is the form that is hidden in index.html:
<form class="echo" id="form" style="display:none">
So I want it to change from display:none to display:block when I get redirected to the new site.I havent really got any ideas so far, except this one:use javascript to check which was the previous page client went on, and if it was the page of the login then put display:block , but if it isnt then do display:none.
Im sure there is some much easier way, but cant think of any at the moment.
If you want to change something on a new/other page, you should do that in the other page. With javscript you cannot change something that isn't loaded yet.
Easiest way to do this with javascript would be something like this:
<script type="text/javascript">
if (location.search == "?show") {
document.getElementById("hidden_form").style.display = "block";
}
</script>
Note that this script should be executed after the <form> is added to the DOM. So preferably in some document.ready function or in a script block that is placed below the <form>.
Related
I am trying to build a PHP webpage with the following behaviour:
1- A client access the webpage (that contains some buttons);
2- When the webpage is loaded, the PHP script opens a file stored on the server and, based on the information in this file, enables/disables some of the buttons, so that the client can see the webpage with the correct buttons enabled or disabled.
To enable/disable buttons, I know I can use javascript, while to read the file on the server I use PHP as stated above.
How do I put the two things together? Or should I use a PHP code equivalent to the following javascript line:
<script>document.getElementById("button1").disabled = true;</script>
At first I thought that inserting this line in the PHP code was the solution, but then I found out that this can't work for obvious reasons.
Thanks for the help!
Is it correct if I add the following javascript function in the head section of my webpage?
<script>
function enableButtons() {
<?php
if($state=="state1") {
echo 'document.getElementById("button1").disabled = true;';
}
else if($state=="state2") {
echo 'document.getElementById("button2").disabled = true;';
}
?>
}
</script>
I call the enableButtons() function when loading the page by using
<body onload="enableButtons()">
The php code above is just an example, the number of states and buttons is higher, that's why I would like to use this solution.
The common thing to do is to have php read the settings file, and echo the "disabled" attribute on the buttons before sending the output to the user browser. You can get more info about the attribute here here.
You do not need javascript.
Do something like this:
<button type="button" <?php if($state === 'state1') echo 'disabled'; ?>>Button text</button>
Usually you send to the client the buttons already disabled and use js to respond to any event that happens after sending the page, like selecting a combo box value..
You can omit the code, using an if sentence, or hide them using css. First approach is preferred.
Script
<script>
function isValid(f){
if(f.test.value==''){
alert('please enter name');
return false;
}else{
$(".bbutton").html("Processing please wait");
return true;
}
}
</script>
HTML
<form method="post" onsubmit="return isValid(this);">
<input type="hidden" name="te">
<input type="text" name="test">
<div class="bbutton">
<input type="submit" value="send">
</div>
</form>
When you submit the form then it will automatically hide the submit button to avoid pressing again and again, and you can redirect it to other page. May be this idea helpful.
Alright, after hours and hours of research and trying things I am completely stuck at the moment. I coded quite a lot for a web page so I'll try to summarize it as good as possible.
So I've got this ASP CLASSIC page where a user can create a ticket using a form.
The coded page consists out of 3 main parts:
Javascript client side error handling.
ASP CLASSIC server side error handling after submission (checking if
database values exists like email).
The form submitting (sending an email + inserting the data into the
database).
After the form is submitted there is some ASP error handling. When a error is encountered a Javascript popup box will be shown with the error and the data submission and email is being cancelled.
The form is auto filled with the inputted values (with asp code) so that after a error the inputted values are kept in the form. This all works.
The form code:
<div align="left"><form name="myForm" method="post" style="display:inline" onsubmit="return(validate());">
<div class="FormTitel">Voor welke afdeling is de ticket bestemd?
</div>
<div class="radio">
<input type="radio" class="radio" name="automatisering" value="Automatisering" checked <% if Request.Form("automatisering") = "Automatisering" then response.write("checked")%>>Automatisering
<input type="radio" class="radio" name="automatisering" value="Software" <% if Request.Form("automatisering") = "Software" then response.write("checked")%>>Software
<div id="Error1" style="display:none" color="white"></div>
</div>
<div class="FormTitel">Soort ticket
</div>
<div class="radio">
<input type="radio" class="radio" name="probleem" value="Probleem" <% if Request.Form("probleem") = "Probleem" then response.write("checked")%>>Probleem
<input type="radio" class="radio" name="probleem" value="Wijziging"<% if Request.Form("probleem") = "Wijziging" then response.write("checked")%>>Wijziging
<div id="Error2" style="display:none" color="white"></div>
</div>
<div class="FormTitel">Uw gegevens
</div>
<div>
<input type="text" name="Name" class="name" placeholder="Vul hier uw voor- en achternaam in" style="color:#888;"
onfocus="inputFocus(this)" onblur="inputBlur(this)" value="<%=Request.Form("Name")%>">
<div id="Error3" style="display:none" color="white"></div>
</div>
<div>
<input type="text" name="EMail" class="name" placeholder="Vul hier uw emailadres in" style="color:#888;"
onfocus="inputFocus(this)" onblur="inputBlur(this)" value="<%=Request.Form("EMail")%>"/>
<div id="Error4" style="display:none" color="white"></div>
</div>
<input type="submit" class="ticketVerstuur" value="Verstuur ticket" />
</form></div>
*The error id's are client side styling boxes that are being showed when a Validation returns false (with javascript).
*Sorry for not translating the title's, names, etc. but that would be quite some work;)
The ASP IF statements in the form make sure that the inputted values are returned and not lost when a error is being showed.
Alright now for the part where it goes wrong.
After submission, which is being activated by If Request.ServerVariables("REQUEST_METHOD") = "POST" Then some stuff is happening. Namely, the input values are being parameterized for sql injection, some input values are being checked on the server side, for example; does the submitted email exists in the database? and if the server side validation is all fine then the data is being inserted in the database and a email is being send.
The error messages on the server side are being shown to the user as javascript popup boxes. This works.
The javascript popup code:
function popup(popup,container) {
var thisPopup = this;
thisPopup.load = function() {
container.animate({
"opacity": "0.3"
},250, function() {
popup.fadeIn("250");
});
container.off("click").on("click", function() {
thisPopup.unload();
});
$('#closePop').off("click").on("click", function() {
thisPopup.unload();
});
}
thisPopup.unload = function() {
popup.fadeOut("250", function(){
container.animate({
"opacity": "1"
},250);
});
}
}
The function is called in the submit code like so: new popup($("#popup_box"),$("#container")).load(); The popup div is put above the form and the container is wrapped around the form. (popup works).
The problem though is that after the server side validation is all good, so the data goes into the database and the email is send, I popup a new javascript box saying that the everything was successful. When it is successful I want to clear my form (to avoid confusion).
First I try'd to do this with a response.redirect ("mypage.asp"). Though, when I use this the javascript popup box wont show.
Then I try'd to use a window.location.replace("http://stackoverflow.com"); on my close / unload function of the popup box, this has no effect though (data is not being cleared). Also try'd it with setting a var to true when the popup is unloaded and then later checking the var if it is set to true (then redirect) but this also doesn't work, even a direct javascript redirect, so without the popup, in the submission code (after all is successful) doesn't seem to work for some reason. In matter of fact only alert seems to work. Here the example of the adjusted popup unload:
thisPopup.unload = function() {
window.location.replace("http://stackoverflow.com");
popup.fadeOut("250", function(){
container.animate({
"opacity": "1"
},250);
});
}
So what causes this problem and how can I fix it? I can imagine it requires a bit more of my code so don't hesitate to ask for it, but the post is big enough as it is.
Last but not least a short summary of how my code is setup:
<html>
<head>
stylesheet
<title></title>
</head>
<body>
<javascript>
Pop up box code + validate form code
</javascript>
<form>
</form>
</body>
</html>
<asp server side code (on submit)>
Some functions (mail - anti injection) + request form values
Validation server side (with javascript poups)
Insert data in database
Sending mail
I think you were on the right track with the redirect. To get a pop-up to show after a redirect, do something like this:
response.redirect "mypage.asp?ShowSuccess=true"
Then in mypage.asp use this:
<%
if request("ShowSuccess") = "true" then
onload = "alert('Success message here!');"
end if
%>
<body onload="<%=onload%>">
I need to validate my form fields displayed in facebox.
The problem is that i am unable to get the values of the fields by using javascript.
for ex: document.form.field_name.value doesnt return its value.
Code sample :
<script type="text/javascript">
function validate()
{
if (document.form1.field.value=='')
{
alert ("Field cannot be left blank");
}
}
</script>
<form name="form1" onsubmit="return validate()">
<input type="text" name="field" />
</form>
A way to do this would be to pass the value directly from the form to the validation code.
<form name="form" id="form" onsubmit="return validate(this.field.value)">
<input type="text" id="field" />
</form>
Or you could even use a text box without the form using:
<input type="text" id="field"
onkeydown="if (event.keyCode == 13) return validate(this.value)" />
Update the script to allow for the new value parameter:
<script type="text/javascript">
function validate(val) {
if (val.length < 1)
{
alert ("field cannot be left blank");
return false; //to stop the default action of submitting the form
} else {
alert ("Value: "+val);
return true; //allow to submit the page
}
}
</script>
This is actually a pretty easy and simple validation, but don't forget to set the return action based on whether you want the system to proceed with the submit or not.
I'm not sure where your pulling your page from whether from a remote html address or a locally stored div. So I'm not sure why your solution of pulling the value from the DOM does not work. I generally have no problems using jquery to get and set the values from the different fields in facebox windows.
NOTE: you have to be careful where you place your scripts. It depends on your application but sometimes you may want to place the script in the root document instead of the facebox page because if you load a remote facebox div you have a scope change and may need to refer to parent.document to access parent fields when the script is embedded in the remote facebox div.
Facebox copies the chunk of DOM displayed, effectively creating elements with duplicate ids. This is not allowed by HTML standard. Your javascript goes bonkers looking for a single element uniquely identified by its id, yet it finds 2 of them...
This is a huge bug in Facebox. Any code in a facebox should not have ids. All your bindings should be renewed when the facebox is revealed.
I have a html form, with a custom file upload field. And by that I mean that I have moved the actual file field beyond the borders of the page with css, that I have a custom input field and button in place, and that I have a jquery click event attached to that custom button to trigger the file input dialog.
It all works fine, in every browser.
But I need to submit the form through javascript. And I got somewhere that IE remembers my actions with javascript as a malicious manipulation of the file input field and blocks my access with an error "access denied" when I invoke document.formName.submit().
Is there a way around this, because I have gone completely mad by trying to search for a solution. I seriously don't want to use the default file input field, as every browsers renders it differently and messes up my design..
code:
<form name="thisForm" onsubmit="return false;" enctype="multipart/form-data" method="post" action="index.cfm/somepage">
<input type="file" class="hidden" name="hidden" id="hidden" />
<input type="text" name="shown" id="shown" />
<button id="button">browse..</button>
<input type="submit" id="submitForm" />
</form>
<script>
$('button').click(function(){
$('#shown').val($('#hidden').val());
});
$('submitForm').click(function(){
validateForm();
});
function validateForm()
{
//regular expression validation against all other input fields in the form
//not the file input field
validateVAT();
}
function validateVAT()
{
//connect to external service to check VAT
submitForm();
}
function submitForm()
{
document.thisForm.submit();
}
</script>
UPDATE:
I just tried to first upload the file, before submitting the form, through ajax, but that also gave me the acces denied error.. >_>
I was having the same problem, and I solved it by using a styled <label> tag with a slight workaround in Firefox.
http://jsfiddle.net/djibouti33/uP7A9/
The Goals:
allow user to upload a file by using standard html file input control
hide standard html file input control and apply own styling
after user selects file to upload, automatically submit the form
The Browsers:
Firefox, Chrome, IE8/9, Safari
IE7 didn't work, but it might if you add it to the workaround detailed below.
The Initial Solution:
Hide the file input by positioning it offscreen. Important not to display:none as some browsers won't like this.
Add another styled element to the page (link, button).
Listen for a click on that element, then programmatically send a click to the file input to trigger the native 'file explorer'
Listen for the file input's onchange event (occurs after a user chooses their file)
Submit the form
The Problem:
IE: if you programmatically send a click to a file input in order to activate it (2), programmatically submitting the form (5) will throw a security error
The Workaround Solution:
Same as above
Take advantage of the accessibility features built in to the label tag (clicking on a label will activate it's associated control) by styling
a label tag instead of a link/button
Listen for the file input's onchange event
Submit the form
For some reason Mozilla browsers won't activate a file input by clicking on it's label.
For Mozilla, listen for the click on the label and send a click event to the file input to activate it.
Hope this helps! Check out the jsfiddle for details on the html/js/css used to make it all work.
I found the answer myself, After 2 days of crazy trial&error. I hope I can help somebody with this..
I removed the hidden file input field from my coldfusion page and replaced it by an iframe tag. That iframe tag linked to another coldfusion page, containing another form with the removed file input field.
Now when I use javascript to click the file input field, which is still hidden from view, it still gives the browse file dialog without a hitch. But when I use javascript to submit the form, through the iframe, miraculously, it submits the form in the iframe, making it possible to upload the file in some serverside scripting of your preference.
iframe code:
<form id="formFileUpload" class="formFileUpload" name="formFileUpload" method="post" action="../actions/act_upload_file.cfm" autocomplete="off" enctype="multipart/form-data">
<input type="file" class="buttonFileHidden" id="inputFile" name="partnersLogo" />
</form>
iframe itself:
<iframe src="admin/dsp_file_upload.cfm" id="ifu" name="ifu" class="buttonFileHidden">
</iframe>
javascript click & submit:
ifu.document.formFileUpload.partnersLogo.click();
ifu.document.formFileUpload.submit();
If you're like me, and you don't want to use an iframe, and you weren't too keen on the label solution mentioned above, you can just position the original button above the styled button with an opacity of 0.
Using the example above, you would still have:
<input type="file" class="hidden" name="hidden" id="hidden" />
<input type="button" name="shown" id="shown" value="Add File" />
But .hidden would be defined like so:
.hidden {
position: absolute;
left: -150px;
opacity: 0;
filter: alpha(opacity=0);
}
Config: Set the opacity to 0.5 (or =50) to see the transparent element and tweak the left positioning.
Arguably just as hacky as the answers above, but a bootstrap-friendly solution, and in my case, the only one that worked.
I found a weird solution to solve this problem.
It thought about the js click thread. If it goes out of this thread, there no more security issues.
I chose to use window.setTimeout. see sample below:
<script type="text/javascript">
$(function () {
$("#<%= this.fuDoc.ClientID %>").bind('change', uploadFile);
$("#<%= this.btnUpload.ClientID %>").click(chooseFile);
});
function chooseFile() {
$("#<%= this.fuDoc.ClientID %>").click();
}
function uploadFile() {
var fu = $("#<%= this.fuDoc.ClientID %>");
if (fu.val() != "") {
window.setTimeout(function () {
<%= this.ClientScript.GetPostBackEventReference(this.btnUpload, "") %>;
}, 100);
}
}
</script>
<asp:FileUpload ID="fuDoc" runat="server" style="display: none;" />
<asp:Button runat="server" ID="btnUpload" Text="upload" OnClick="btnUpload_Click" />
<asp:Label ID="lbltext" Text="" runat="server" />`
then, no more acces denied!
This is an old post but the problem still arises. This may not be working because jQuery kindly fails silently. I was having this problem and wondering why my hidden form would not submit and the file get uploaded. I started off by using jQuery, but then I went vanilla. It still didn't work but looked as though an exception was being thrown in my .click() function.
Running
try {
document.getElementById('formid').submit();
} catch (e) {
alert(e);
}
showed that we indeed were throwing an error, and quick research showed that this was because IE DOES NOT SUPPORT SIMULATED CLICKS ON A FILE INPUT. This means that when the form went to be posted, IE would refuse to post the form
Excuse the bold caps, but I know many people will see text and not read it
Have you tried
$('button').click(function(){
$('form[name=thisForm]').submit()
});
You need to change onsumbit='return false;' to onsubmit='return validateForm()'.
Then have validateForm() return true if the form passes your validation checks, or false if it does not.
The onsubmit='return false' is preventing the form from submitting via document.thisForm.submit(); as well as when the user clicks the submit button.
I commented these lines in j query.form.js then every thing works fine for me. Don't ask me the reason even i don't have the solution for that but it works for sure.
if (io.contentWindow.document.execCommand) {
try { // #214
io.contentWindow.document.execCommand('Stop');
} catch(ignore) {}
}
Can an onsubmit event insert an image into the page before the page submits/transfers control to the next page?
I am using classic asp.
Of course. The function resolves before the form is submitted.
(Although… while an img element may be inserted into the page, it might not load before the browser has gone to the next one, and even if it does, the user might not have time to see it clearly)
Yes . You can insert the HTML code (through javascript):
<img src="imgsrc">
But it takes a little time for loading the image. The form send the user to another page in new window or in the same window? Why would you want to insert an image in the current window if the page will be replaced with the new one?
Yes you can do this. It would be easier (for me to write) if you used jquery:
html:
<form id="myForm" action="">
<input type="text" id="someId" />
<input type="submit" id="submit" value="submit" />
</form>
and then JavaScript would be:
$(document).ready(function() {
$("#myForm").submit(function() {
$(this).append('<img src="someImage.jpg" alt="" />');
});
});
http://jsfiddle.net/rYUbQ/
But like others have said it might not be loaded and displayed before the form submits so you might want to instead look in to preloading the image and then just setting it to visible before the page submits.