As a college student at QANTM I regularly use its portal system to check information that is relevant to my study. However, the site uses a specific system that makes it impossible to view on small resolutions, such as mobile browsers.
I'm developing a small personal application that should allow me to view the contents of the site in my own formatted view. However, I'm having some issues executing JavaScript to submit credentials.
<form id="userslogin" method="post" action="javascript: saePortal.users.submitLogin();" onsubmit="return false" class="x-hidden">
<input type="text" id="username" name="username" />
<input type="password" id="password" name="password" />
<button type="submit" id="submit" value="Login" class="x-hidden" /></button>
</form>
This is basically the form structure of the portal and I am successfully able to alter the username and password field with my desired contents using
document.forms[0].username.value = 'text';
However I am unable to submit the results. I have done some searching online and it's not a simple matter of submitting the form. It refreshes the page.
document.forms[0].submit();
I've also tried non-standard compliant code such as document.forms[0].submit.click(); and many variants of this, as well as using getElementById with no luck.
The site in question https://portal.qantm.com.au/. I'm unsure if this is a form of protection that's built into the site or if I'm simply using the wrong syntax.
You could use JavaScript FormData-class if your browser supports it.
var fd = new FormData();
fd.append("username", username);
fd.append("password", password);
Then you could post this using jQuery or something.
$.ajax({
url: portalurl,
type: 'POST',
data: fd,
contentType: false,
processData: false,
success: function(data){
console.log(data);
}
});
Change attribute onsubmit="return true" in form tag.
Related
I am currently making a login interface that posts user data to a NodeJS server. Here is the code for the form.
<form action="http://127.0.0.1:8080/" method="POST" id="login_form">
<div class="input">
<input class="input-box" id="username" type="text" name="username" placeholder="Username">
</div>
<div class="input">
<input class="input-box" id="password" type="text" name="password" placeholder="Password">
</div>
<input type="submit" class="button blue" value="Login">
</form>
Now the form submission is intercepted by a javascript file that takes the form data and posts it to a NodeJS server using AJAX. The server validates the user login and if successful, returns an HTML page to be loaded using jQuery. Here is the code:
$(document).ready(function(){
$('#login_form').submit(function(event){
event.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $('#login_form').serialize(),
dataType: 'html',
success: function(response) {
$("html").html(response);
}
});
});
});
Now the login form works properly and loads the HTML response, but with one minor issue. Before the final rendered page (with all the css styles and images) is loaded, all the text on the page gets displayed with no formatting, then the final design is displayed. This gives a strange transition between the login form page and the final user portal. Does anyone know why this might be happening and any solutions to fix it?
This is called FOUC (flash of unstyled content).
Here’s an existing answer to avoid it:
https://stackoverflow.com/a/5983338/3044358
Or just google the term. Lots of suggestions.
First thing to try: put your css link tags at the top of the head element
I've asked this question to the admins of Smartjobboard software yet they are so inactive ill ask here...
On mobile phones/Ipads a jobseeker is able to apply to a job with a CV by uploading it and submitting it. However for some reason when a user uploads a CV it will sometimes refresh the page and the CV will not be uploaded..However on desktop the upload never breaks and works flawlessly
I'm pretty sure its something to do with the page speed or/and how the page loads. But to be proactive in getting this fixed and working as it should I thought id ask you genius people for help :)
Anyway the codes... (Posted in pastebin)
Apply_now.php - http://pastebin.com/JasSWTEg
The form for applying :
<form method="post" enctype="multipart/form-data" id="applyForm" action="{$GLOBALS.site_url}/apply-now/">
<input type="hidden" name="is_data_submitted" value="1">
<input type="hidden" name="listing_id" value="{$listing_id}">
<fieldset>
<div class="inputName" style="width:19%">
[[Attach your CV]]:
</div>
<div class="inputField" style="margin-top:7px;">
<input type="file" name="file_tmp" />
</div>
</fieldset>
<input class="button-green" type="submit" value="[[Apply Now]]" onclick="return applySubmit();"/>
</form>
Apply Script :
function applySubmit() {
$("#ApplicationForm").hide();
$("#applyForm").ajaxSubmit(
{
url: $("#applyForm").attr("action"),
type: "POST",
success: function (data)
{
$("#messageBox").html(data);
}
});
return false;
}
I'm unsure if there is a problem within the applying script/php/code it self. I'm working on the pagespeeds now to eliminate render blocking etc etc to see if its causing the issue.
As said in the comments, add a action tag to your html form.
In many sites, I have seen after clicking on "Sign Up" or "Register" button we are either re-directed to other page where the insertion of our data in database takes place. Like in Facebook, when you click "Sign Up" it goes to the facebook.com/r.php page. I want to create a registration form which when submitted, will be not re-directed but will validate and insert data in database in the same page.
For example, Facebook uses a form such as:
<form id="xyZ" name="abc" method="post" action="r.php">
It redirects us from index.php to r.php.
But I want to use:
<form id="xyZ" name="abc" method="post" action="index.php">
i.e Without redirecting.
Which one is safe?
Redirecting does not effect the security of the website at all in the slightest. I recommend taking a look here about possible authentication solutions you can use for your site.
Whether you authenticate and log them in/register them using index.php or r.php, it doesn't matter in the slightest. Forum systems such as phpbb used to at one time to everything in the index.php file, and depending on the ?page $_GET variable, it would display different things (Like a login form, or a registration form). How you handle it, is entirely up to you, but neither method is more insecure than the others.
Both are safe!
Redirect method, kind of link using which user redirects to another page where they can register
Ajax Method, here you can make calls using Javascript / jQuery which returns you html source, which you can just plug in appropriate place.
Your Page where you need your registration form to be displayed, when user click on sign up link
<div id="ajax-response"></div>
<a id="signup" href="signup.php">SignUp</a>
<script type="text/javascript">
jQuery("#signup").on('click', function(e){
e.preventDefault();
var _context = this;
jQuery.ajax({
url: jQuery(_context).attr('href'),
success: function(response){
jQuery("#ajax-response").html(response);
}
})
})
</script>
and signup.php, will contain the registration form
<form>
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit" />
</form>
This question already has answers here:
Pass parameter between pages using jquery mobile
(2 answers)
Closed 8 years ago.
I am using jquery mobile for phonegap on an app I am making, so I am only allowed HTML, JavaScript, and CSS.(no PHP) I need to pass the input from a text box to the next page when they fill out the text area, I am just not sure how to do it in JavaScript without php.
//text input feild
<div data-role="fieldcontain"><label for="name-c">Enter Challenge:</label>
<input id="name-c" name="name" type="text" value="" /></div>
//button labels for selection
<div data-role="fieldcontain"><label class="select" for="select-choice-c">Challenge Type:</label> <select id="select-choice-c" name="select-choice-c"><option value="standard">Challenge</option><option value="rush">Public Challenge</option> </select></div>
Any help would be awesome! Thanks!
you have to use Jquery to do a more effective way I'll give you an example of how to do it:
Below is the Simple HTML Form.
<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
First Name: <input type="text" name="fname" value =""/> <br/>
Last Name: <input type="text" name="lname" value ="" /> <br/>
Email : <input type="text" name="email" value=""/> <br/>
</form>
For jQuery Ajax Form Submit, we can use jQuery.ajax() or jQuery.post() method. To serialize form data, we can use jQuery.serialize() or jQuery.serializeArray().
//callback handler for form submit
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#ajaxform").submit(); //Submit the FORM
Write your data in cookies or in the local storage of the browser.
After that you can access it on the other page.
Are any of these solutions acceptable?
http://www.gajotres.net/passing-data-between-jquery-mobile-pages/
I would advise against the local storage since there is a known "feature" that it is not accessible in any browser private browsing mode
(html5 localStorage error with Safari: "QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.")
Also I could consider cookies, but these can be manipulated. Depending on how sensitive your data is
http://www.javascripter.net/faq/settinga.htm
Could this be submitted to a servlet without a Action or Method? I.E.(could you use Jquery alone to send this?, or some other method?)
<form id="form2">
<input type="text" value="12" name="ID"/>
<input type="text" value="NameThatComesFirst" name="FirstName"/>
<input type="text" value="NameThatComesLast" name="LastName"/>
<input type=submit id="submit" value="submit"/>
</form>
No, it doesn't need to be there, by default it will submit to the currently loaded script, using a GET.
If you want to submit it with AJAX, you can define it when calling it instead of through the action/method attribute if you want using the jquery form plugin.
$('#form2').ajaxForm( {
url: 'comment.php',
type: 'PUT',
success: function() {
alert('Thanks for your comment!');
}
});
// The suggested way is to put action and method on the form and `$.ajaxForm`
// will find it.
$('#form2').ajaxForm({ success: function() {
alert('Thanks for your comment!');
}});
You can always send the form yourself by querying the DOM and sending an AJAX request
The answer is yes if you want something to actually happen. By default if no value for the action attribute is specified then it will use the existing page. As for using jQuery only to handle for submission the answer is no. You must use some type of server-side code such as PHP, ASP, JSP, etc to handle the form. Optionally, you can also use server-side JavaScript like node.js if you want.
You can, however submit the form via ajax using jQuery. See the API
Default action for form submission is METHOD="GET" and ACTION="SELF". From the docs.
If the ACTION is missing, the URL for the document itself is assumed.