I don't know much about WEB probramming, so feel free to ask if I'm missing any details.
There is a certain website which I'm visiting very frequently, and it requires users to log in every time they visit. For the login page of this website, I'm trying to write down a userscript which will automatically log me in.
I managed to fill in the form fields, but don't have any idea how to click the submit button by JavaScript. The below is a condensed version of the original login code. How can I automatically click this submit button in this code?
<div id="start">
<div id="header">
<div id="login">
<form id="loginForm" name="loginForm" method="post" action="#">
// ...
<input type="submit" id="loginSubmit" onclick="changeAction('submitInput','loginForm');document.forms['loginForm'].submit();" value="Log in" />
// ...
</form>
</div>
</div>
</div>
The usual way to submit a form in general is to call submit() on the form itself, as described in krtek's answer.
However, if you need to actually click a submit button for some reason (your code depends on the submit button's name/value being posted or something), you can click on the submit button itself like this:
document.getElementById('loginSubmit').click();
document.getElementById('loginSubmit').submit();
or, use the same code as the onclick handler:
changeAction('submitInput','loginForm');
document.forms['loginForm'].submit();
(Though that onclick handler is kind of stupidly-written: document.forms['loginForm'] could be replaced with this.)
You can do :
document.forms["loginForm"].submit()
But this won't call the onclick action of your button, so you will need to call it by hand.
Be aware that you must use the name of your form and not the id to access it.
Related
greeting developers. i am doing project for university related to Javascript. i create one page got button add and unfriend button which is disable.once user click add button the prompt box appear and after they click Ok for promp, the unfriend button will able to click while add button become disable. if click unfriend, add button will able to click. i don't know how explain it. may be read my question can be headache. sorry for that. my problem is button does not disable,if i never put inside form it work but since i put inside form doesnt work. guys is there any solution please help me
function myFunction(add){
var subject = prompt("Please enter Subject that want to study");
if (subject != null){
document.getElementById("subject").value = subject;
document.getElementById("btn").disabled=false;
document.getElementById("add").disabled=true;
document.getElementById("add").value="request sent";
}
}
function disableButton(btn){
document.getElementById("add").disabled=false;
document.getElementById("btn").disabled=true;
document.getElementById("add").value="Add friend";
form.submit();
}
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" >
<input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>
<input type="hidden" id="subject" name="subject"/>
<input type="submit" value="add" id="add" onclick="myFunction(add)" /></form>
The "add" and "unfriend" buttons both submit a POST request which is refreshing the page since there is no form action specified. Perhaps you need to read up on HTTP methods. https://www.w3schools.com/tags/ref_httpmethods.asp is a good resource.
If your plan is to add a server side page to handle the request at a later time you can temporarily add the following to the form tag onsubmit="return false".
If you simply want to use the form inputs without submitting the form you should remove form.submit() from the disableButton function and change the types of the add and unfriend buttons from type="submit" to type="button". You can also remove the method and enctype of the form.
Personally I don’t really use forms unless its more than 3 fields.
Two things to think about:
You got the right written idea, you are however missing event.preventDefault(), which will make your website refresh itself, which will then force out everything to refresh.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The other is that try between the both buttons as they are both i suggest one myfunction to be onclick in a button tag. just to avoid two inputs types.
Additional:
I suggest you add jquery to make things easier with the toggle function.
I need to create a webpage that on first visiting it asks you to put just your name, then once they click login my jQuery will slide away that panel and they will be in the main part of the website. The next time they visit the web page it will go straight to the "main part" rather than ask their name again.
I've never made cookies before how, possible is this?
Also I've created my login form but when i click my submit button it refreshes the page, i want the submit button to be the thing that activates the jQuery.
<div class="login-page">
<div class="form">
<form class="login-form" method="POST" action="">
<!-- user inputs -->
<p class="name">Name:</p><input type="text" name="username" placeholder="Enter Your name Here" />
<!-- your submit button -->
<input class="login" type="submit" name="submit" value="login">
</div>
</div>
I need it to be an input form because that data is going to be saved onto a database by someone else.
In JS, creating a cookie is as simple as document.cookie = "username=John Doe";
And then reading cookies is var cookies = document.cookie; which will give you a semi-colon delimited string of cookies.
As for the second problem, you are using an HTML submit button, which submits the HTML Form. You have to instead capture the click event and prevent the default action. Something like this:
$('.login').click(function(event){
event.preventDefault();
//Do more stuff
})
I'm trying to essentially have the submit button of search.htm be able to create a pop up with a text area which the users are required to enter a comment describing their actions and click the submit button in the pop up to effectively submit both forms to the same processing page. Both the forms in search.htm and frm_comment.htm will submit both sets of data back to search.htm which calls cfinclude on the server processing logic (server.htm).
In the below code I'm having the the "createPeriod" button submit everything that is in the "srch" form. It is also creating a pop up window which has a html textarea that allows the user to enter a comment. There is a reason that I need to split up the main form from the comment form (frm_comment.htm) but it's very specific to the task I'm trying to accomplish.
search.htm is structured roughly as such:
//include the template here to process the forms
<cfinclude template="../server.htm">
<cfform method = "post" action = "search.htm" name="srch" format="html">
<table>
//bunch of form fields here
.
.
.
.
//bunch of form fields here
<cfinput type="submit" name="createPeriod" value="Create"
onClick="ColdFusion.Window.create('comment', 'CommentBox',
'frm_comment.htm', {center:true,modal:true})">
</table>
</cfform>
I've tried to change the submit button in search.htm to just a cfinput type="button" because keeping it as a submit will make it so that the comment box will appear for a brief moment while the page reloads and disappear as soon as the page reloads. However, I was unable to preserve the form data from search.htm when changing the submit button to a regular button.
I've also tried to have my comment form's submit button's onClick function call a javascript function to submit both forms (to no avail) like so:
submitForms = function(){
document.forms["srch"].submit();
document.forms["srch1"].submit();
}
<cfinput type="button" name="submitComment" value="Submit" onClick="submitForms()"/>
Please advise on the best way to accomplish this task, sorry about the messy code.
This a very basic example, on how to have your 2 forms in one. The JavaScript will just show the comment form when the user clicks on "Search".
<!DOCTYPE html>
<html>
<head>
<style>
#hiddenStuff {
display: none;
}
</style>
</head>
<body>
<form action="...">
// search fields here
<input type="button" value="Search" onclick="document.getElementById('hiddenStuff').style.display='block';">
<div id="hiddenStuff">
// comment form stuff here
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
I also made a fiddle, if you want to see the result in action.
Sorry I'm not familiar with ColdFusion, but it shouldn't be too hard for you to translate :)
This should be a very easy thing to do but I can't find a good reference on how to do it.
I want to submit a form upon clicking a checkbox. To make it a one click process and save user the step of clicking the check box and then clicking form submit, I'd like the form to be submitted upon clicking the checkbox.
My question is do I need to call a javascript function to do this or can html do this natively?
<form action="post.php" method="post"><input type="checkbox" name="done" id="done" value="1" onclick="post.php"></input></form>
doesn't seem to work. Do I have to call a javascript function, or am I missing something simple. Thanks
Try to replace
onclick="post.php"
By
onclick="submit();"
Try onclick="this.parentNode.submit()"
I have two forms and a button. Everything works fine in Firefox. I get a new window, with a Paypal payment, and in the window where everything happened i get the send_mail form submitted that will send an e-mail to the user. How can I make this work in Chrome? Why it's not working? I've tried anything (or so I think)!
So:
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post" onsubmit="$('#send_mail').submit();">
...
</form>
<form name="send_mail" id="send_mail" action="" method="post">
...
</form>
<a onclick="$('#registerForm').submit()">Go to paypal and send confirmation mail</a>
Unless you have a really good reason to use a javascript-only submit, why set up the form to be unusable if there is a javascript error?
Use a standard form input of type submit, give it an id, alter the look or text of the submit via javascript as necessary, and create onclick & onsubmit events as a layer on top of that functionality and have them return false. Better fallbacks.
I'm not sure why you're trying to submit two forms at once, but how about this alternative (note that I haven't tested this code, but it should convey the idea):
<script type='text/javascript'>
$('#fallback-register-submit').hide(); // Hide the submit button.
$('#registration-link').show().click(function (){ // Show the link and attach the action.
$('#registerForm').submit();
return false; // Don't bother following the link anchor.
});
</script>
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post""><!-- Single form that does all of the submitting. -->
...
...
<input type='submit' id='fallback-register-submit'>Register</input><!-- In the event of a javascript error for their browser, they can still buy your stuff! -->
<a id='registration-submit' style='display:none'>Go to paypal and send confirmation mail</a>
</form>
why not just bind both submits to your a?
onclick="$('#send_mail').submit(); $('#registerForm').submit();"
if you want the other form to submit AFTER the first one:
onclick="$('#send_mail').submit( function() {$('#registerForm').submit();}); "
assuming you're using jquery here
As far as i understand, you want to submit the form using a link?
Why not use "plain" javascript then? Without jQuery: document.getElementById(....).submit()
Or link the submit event to the link in a normal jQuery way:
$(document).ready(function() {
$(".yourLinkClass").click(function() { // or "#yourLinkId" for that matter
$("#registerForm").submit();
});
});
And you also could use the submit button ;)