processing form with javascript - javascript

I'm working on a login page in asp but I'm having trouble processing a form with javascript. This happens when password and email don't match, so I want to send the user back to the login.asp page with an error message. I'm using the following script:
<form name="login" id="login" method="post" action="login.asp">
<input type="hidden" name="errorlogin" id="errorlogin" value="error" />
</form>
<script type="text/javascript">
$(document).ready(function() {
window.document.login.submit();
});
</script>
but my page stays white, without going back to login.asp. Tried on Chrome and Firefox.

You don't need the ready-block, because the script is at the end of the page. So the form exists when the script is executed. You can try
<script type="text/javascript">
window.document.login.submit();
</script>

Related

JavaScript validation in html form

With my page I need to enter several things like title, content, picture etc. This information are sent to script.php and I need to validate those things with php but i get error.
This is how I include JavaScript:
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="js/form-validation.js"></script>
In head i write JS:
<script type="text/javascript">
document.getElementById("submit").onclick=function(event)
</script>
And this is form in html:
<form name = "my_form" enctype="multipart/form-data" method = "POST" action = "skripta.php">
<div class="form-group row ">
<div class="col-md-6">
<span id="porukaTitle" class="bojaPoruke"></span>
<label for="naslov">Naslov</label>
<input type="text" name="naslov" class="form-control" id="naslov">
</div>
<div class="form-group row ">
<div class="col-md-1">
<input type="submit" name="submit" value="Ucitaj" id="submit"/>
</div>
</form>
But I get this error in browser console:
When I press submit button page goes to skripta.php where I display page with php.
I'm using xampp !
add javascript validation script at the end of body tag
and also use onload like
$(document).ready(function() {
$("#submit").click(function(e){
e.preventDefault();
// validation code here
// if validation is successful
$("form").submit(); // Submit the form
})
});
You have added script in head, it should be actually added at the end of page load, When your selected element is loaded in DOM.
Also you are posting form to php page so when you'll submit page it'll get redirect to other page and your javascript onSubmit will never be called
Instead what you can do is add onClick function like I explained and do your validation part inside and once all data is validated you can call submit() to route the page to php file.

Is there any way to stay on same bootstrap modal after submitting the form?

<form id="upload_form" method="post" action="uploadfile.asp">
<div class="row">
<input type="file" name="file" id="file" accept=".csv,.xls"/></span>
<input type="submit" value="submit">
</div>
</form>
This form is on bootstrap modal.
uploadfiles.asp, I am using FreeASPUpload class that I got from internet.
if Upload.UploadedFiles.Count = 1 Then
Response.redirect("/admin/login_list_import.asp?file_upload=1-0")
else
Response.write("No files sent or only one file required. Script is OK!<br>") ' Say to Flash that script exists and can receive files
End IF
when I submit the form it redirect me to login_list_import.asp page.
I want to stay on the same modal after submitting the form.
Is there any way to do this?
I think when you are redirected to the page
login_list_import.asp?file_upload=1-0
using the same condition (file_upload=1-0), you can manually fire the js code to open the modal window on page load
For example
<%
if Request.Querystring("file_upload")="1-0" then
%>
<script type='text/javascript'>
$( document ).ready(function() {
$('#divmodal').modal('show');
});
</script>
<%
end if
%>
Send the Formdata via Ajax-Request.

Send HTML form to external service

I've got a request to figure out if it's possible to send excisting HTML forms to an external service without losing the current form handling on the website.
Basically the idea is:
Visitor fills in form
Form data is send to external webapplication which does it's own form handling
Form continues to execute it's own POST data on the website itself (sending emails to visitor etc)
I'm looking for some input on step 2. I'm requested to build a simple dashboard that saves all the form data with an export functionality but they want to keep all the current form handling on the website as well.
I'm hoping someone can give me some input on what to look for as in keywords to google or some techniques to check out.
Thanks in advance
Maybe the following code is helpfull
<html>
<head>
<script language="Javascript">
<!--
function OnButton1()
{
document.Form1.action = "response1.php"
// document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = ""
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
<noscript>You need Javascript enabled for this to work</noscript>
</head>
<body>
<!-- create the form -->
<form name="Form1" method="post">
<!-- Add the data entry bits -->
Your Name <input type="text" name="name" size="10" /><br />
<!-- Add some buttons -->
<INPUT type="button" value="Button1" name=name onclick="OnButton1(); OnButton2();">
<!-- close the form -->
</form>
</body>
</html>
Found it here
Idea is to read the data that is needed to post and to the external and local site first then post it with help of AJAX request that would be much better (as shown below).
Or have two forms once user click submit populate both forms and the submit request programatically.
<div>
<form action="" id="helloForm">
Enter Text: <input type="text" id="txt" />
<input type="button" value="submit" id="submitButton"/>
</form>
</div>
$("#submitButton").click(function(e){
//extract data
var data = {
text: $("#txt").val()
};
alert(JSON.stringify(data));
//make external request one
$.post( "externalpage.php", data);
//make external request two
$.post( "ownserverpage.php", data);
});

Change page after submitting the form using javascript

I have a form that after submitting goes to page "http://qwertyasdfgh.rozblog.com/New_Post" ( the action value )
I don't want to change the action but I want to redirect to another page after submitting.
I tried to redirect to "http://qwerty.rozblog.com/page/success" after submitting but it doesn't work .
here is the code I tried :
(html)
<form method="post" action="http://qwertyasdfgh.rozblog.com/New_Post" id="f1">
<input type="text" name="title" style="width:300px"><br />
<input type="text" name="pimg" style="width:300px" maxlength="3072"><br />
<textarea dir="rtl" id="post" name="post" style="width:300px;" aria-hidden="true"></textarea><br />
<input type="submit" name="postsubmit" value=" submit " style="background:#333;" onclick="location()">
</form>
(js)
function location() {
window.location.replace("http://qwerty.rozblog.com/page/success");
}
and here is the fiddle
You can submit the form using jquery and AJAX (or I misunderstood you):
$('#f1').submit(function(e)
{
e.preventDefault();
$.post('http://qwertyasdfgh.rozblog.com/New_Post',
formDataAsJSON, //use eg. jquery form plugin
function(data)
{
window.location = 'somewhere';
}
);
});
You have two choices.
1) Submit that form using AJAX and after recieving response from server redirect browser to your desired page. You can use for example jQuery with Ajax form plugin. The code would look like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'f1' form and provide a simple callback function
$('#f1').ajaxForm(function() {
window.location = "/page/success"
});
});
</script>
OR
2) You can leave your form and js as is, and use for example php to redirect user after doing some stuff.
New_post.php
<?php
// some stuff without printing (you cant change headers if you print something)
Header("Location: /page/success");
If possible, you can configure /New_Post to redirect to /page/success using meta refreshing in head:
<meta http-equiv="refresh" content="0; url=http://qwerty.rozblog.com/page/success">

JavaScript not working inside iframe in Firefox

I am using an iframe that loads a page with a form. The form action is overridden using javascript. The javascript form action is working in IE and Chrome. But in Firefox the javascript is not working and the form is getting submitted to http://example.com/index.php
The code is given below:
<script language='Javascript' type='text/JavaScript'>
function submitFunction() {
document.Insert.action = 'http://example.com/page2.php';
return true;
}
</script>
<FORM ACTION='http://example.com/index.php' METHOD='POST' ENCTYPE='x-www-form-urlencoded' name='Insert' id='Insert' autocomplete='off' onsubmit='return(submitFunction())'>
<input name='num' SIZE='45' MAXLENGTH='45'>
<input name='Submit' type='submit'/>
</FORM>
Thanks in advance.
Change
document.Insert.action = 'http://example.com/page2.php';
to
document.getElementById('Insert').action = 'http://example.com/page2.php';
But it seems a little strange to change the action URL of the form in the onsubmit. You could as well have it defined from the start.

Categories

Resources