I have two forms on my page, one for username and password and one for a special verification pin. On my FIRST form I have the action set to return false, otherwise the page will refresh and will stop my hidden div from showing up with the second form which is a hidden div. I have a sign in button, which unhides the hidden div on click, and a submit button, which a user presses after their pin is entered. The problem I am having is that I want the final submit button to submit both forms. Is this possible?
This is what my sign in page looks like and when it is submitted it shows the hidden div which has another form that the user enters their pin. I would like the final submit button to process all 3 inputs.
This is the form that I have for the username and password, it is returning false so that it doesn't refresh the page
<form action="" method="POST" id="hello" onsubmit="return false;">
and the button that actually sign's in is here
<input class="btn_green_white_innerfade btn_medium" type="submit"
name="submit" id="userLogin" value="Sign in" width="104" height="25"
border="0" tabindex="5" onclick="showDiv()">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName"> username</label><br>
<input class="textField" type="text" name="username"
id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password"
id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left;
display: none;">It seems that you may be having trouble entering your
password. We will now show your password in plain text (login is still
secure).</div>
This is my second form
<form name="search-form" //this is the form that submits the final pin
id="search-form"
action="#"
class="form-search"
method="POST"
onsubmit="submitForms();">
This is the function I am using onsubmit
function() submitForms{
document.getElementById("search-form").submit();
document.getElementById("hello").submit();
document.getElementById("hello").action = "/loginaction.php";
}
Loginaction.php is the script that I have and I want it to process all 3 inputs, username, password, and the special verification PIN.
My overall question is can i use the final submit button to process all 3 inputs through the script and if so how would i go about doing it?
UPDATE
I now have only one form, however with two buttons in, one submit and one that shows the hidden div, but the forms are not seeming to be submitted.
This is the current form I have - The first button I need to have it just show the hidden div, which it is doing, however the submit button which I want to have submit the username, password AND pin, does not seem to be working, what should I add to my form?
<!DOCTYPE html>
<html>
<head>
<form>
<input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
<div class="checkboxContainer">
<div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select "Logout" from the account menu. This feature is only available to PIN Guard enabled accounts.">
<input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
</div>
</div>
</div>
<div class="modal_buttons" id="login_twofactorauth_buttonsets">
<div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
<button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">
<div class="auth_button_h3">submit</div>
<div class="auth_button_h5">my authenticator code</div></button></div></div>
</form>
</head>
You are taking the wrong approach here.
You should only be using submit buttons and the submit event when you are going to actually submit data somewhere.
You only need one form and one submit button.
Your first button should just be a regular button that shows the remainder of the form. Then, there's no event to cancel. Your second button then submits the form.
Also, you should not be using inline HTML event attributes (onsubmit, etc.), here's why and you should move away from inline styles and set up CSS style rules.
Instead, when the user clicks the login button, submit an Ajax request to the server to check the credentials:
// this is the id of the form
$("#loginForm").submit(function(e) {
var url = "path/to/your/login.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#loginForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//Show the hidden PIN div
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
Do a similar thing with the PIN validation:
// this is the id of the form
$("#pinForm").submit(function(e) {
var url = "path/to/your/pin.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#pinForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//WRONG PIN
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
Hi what you can do is get a button submit and send all the info.
Example:
- form 1 and form 2 fields have diff id so you get that ids to a var or data and send it. This way you can submit the forms you want and validate, but there can only be only 1 submit final btw.
You get all the data to var, ex:
$('#btnName').click(function() {
var form1 data = ...
var form2 data = ...
now if you set it a array, var, object, etc you can get the total data from the 2.
});
I hope this helps you
Ok so you wanna send for example 2 forms, you can just have 1 php which gonna receive.
<?php
$form1_id = $_POST['id'];
$form2_id = $_POST['id2'];
?>
Ok so you have 2 input which gonna have the name of id and id2 (separated forms)
Now you gotta go on your html and add those 2 forms:
<form id='form1' action='#'>
<input type="text" name="id" id="id"></input>
</form>
<form id='form2' action='#'>
<input type="text" name="id2" id="id2"></input>
</form>
<button id="yo"> Submit </button>
This was just an example i'm making on the phone.
After you have html and php or whatever you wanna do, this is just an example
you go at ur js script:
$('#yo').click(function(){
//btw just get the values now
var id_form1 = document.getElementById(etc)
var id_form2 = ...
//now check whatever and use HttpRequest
//to send it
});
I hope it has helped you beter
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I have a form element and span element as below:
//I have used following jQuery function to replace text in span:
$(document).ready(function () {
$("#btn").click(function () {
var new_text = "Sorry, username '" + $("#username").val() + "' is taken already. Try another one. ";
$("#name").text(new_text);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="#form">
<input id="username" name="username" type="text">
<input class="btn btn-primary" value="submit" type="submit" id="btn">
</form>
<span id="name"></span>
On form submit, I want add the text to the span with id "name". But on form submit, the text flashes for few seconds.
I want the text to be present on the page and I also want ?username=name to be present in the url after form submit i.e, I want form input to be the part of url because I want to try DOM XSS attack on my page. I rendering the html file using a flask server.
Can anyone tell me how to make the text on the page without compromising the url to contain form input data?
The text flashes for a few seconds because clicking the .btn button submits the form, which refreshes the page and removes and dynamic changes you made to the DOM since the page first loaded.
To keep the update you made to the text of the element you just need to call preventDefault() on the submit event of the #form element to stop the submission, and prevent the page reloading.
jQuery($ => {
$("#form").on('submit', e => {
e.preventDefault();
var new_text = `Sorry, username '${$("#username").val()}' is taken already. Try another one`;
$('#name').text(new_text);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="form">
<input id="username" name="username" type="text">
<input class="btn btn-primary" value="submit" type="submit" id="btn">
</form>
<span id="name"></span>
Note that from the context of the code and the message being shown, I would assume you would need to extend the logic by making an AJAX request to the server to check the validity and availability of the entered username. I will leave that as an exercise for the OP to complete.
Here is the login form from the site rutracker.org:
<form id="top-login-form" action="http://login.rutracker.org/forum/login.php" method="post" style="display: inline;">
<input id="top-login-uname" type="text" placeholder="имя" accesskey="l" tabindex="1" name="login_username">
<input id="top-login-pwd" type="password" placeholder="пароль" tabindex="2" name="login_password">
<input id="top-login-btn" type="submit" tabindex="3" value="вход" name="login">
</form>
Here is the Greasemonkey script to autologin:
// ==UserScript==
// #include http://rutracker.org/*
// #grant none
// ==/UserScript==
var f = document.getElementById("top-login-form");
f.elements.namedItem("login_username").value = "xxxxxx";
f.elements.namedItem("login_password").value = "yyyyyyy";
f.elements.namedItem("login").value = "%E2%F5%EE%E4";
f.submit();
The problem is that only two values are actually sent, so the Post request is login_username=xxxxxxx&login_password=yyyyyyy insread of login_username=xxxxxxx&login_password=yyyyyyy&login=%E2%F5%EE%E4
So the login=%E2%F5%EE%E4 is missing.
Is it some kind of protection against UserJS?
How can I solve this problem?
login is not a field, it's a button. You don't fill it - you click it. No need for submit too - it is implied by click.
f.elements.namedItem("login").click()
Is it some kind of protection against UserJS?
No.
When you submit a form, the clicked submit button is a successful control. Successful controls have their name and value included in the form data.
You are not submitting the form by clicking on a submit button. You are calling the submit method of the form object instead. Consequently, the submit button is not successful and its data is not included in the form.
How can I solve this problem?
Replicate the name and value of the submit button in a hidden input.
I have a strange behaviour in my form, it sends the data from the textboxes but it doesn't send the button data.
This is my form:
<form name="login_registro" method="POST" id="login_registro">
<input type="text" id="username" name="username" value="">
<input type="text" id="password" name="password">
<input type="submit" name="hacer_login" style="width:auto; height:auto; padding:5px;" class="button" onclick="submitForm('{{matches|last}}/entrar')" value="entrar">
<input type="submit" name="registro" style="width:auto; height:auto; padding:5px;" class="button" onclick="submitForm('{{matches|last}}/registro')" value="regístrate gratis!" >
</form>
The submit function:
<script type="text/javascript">
function submitForm(action) {
document.getElementById('login_registro').action = action;
document.getElementById('login_registro').submit();
}
</script>
In the two pages (entrar and registro) I did a print_R($_POST); and it only shows the two inputs, username and password. It doesn't shows the button pressed.
If I remove the onclick function, and add an action="page.php" it sends the two inputs plus the button pressed.
I know I can do a workaround, but I would like to know why this happend. Thanks.
PS: I commented all jquery.
Your problem here is that using onclick and submitting the form, will submit twice because the submit button already sends the form, and you add form.submit()
Use onsubmit="return submitForm('actionName')". If you return true at the end of the function, the form will get submitted. If you return false, the submission will be cancelled.
You can do this more elegantly by not setting the action dynamically and sending it as a field of the form, or parameter (set through the submitForm function), but this implies changes to your server-side code.
function submitForm(action) {
document.getElementById('login_registro').action = action;
}
I didn't understand at all your answer #Vicentiu Bacioiu, but you gave me a cue. How you said the form is submitted twice, so removing the line where it submit the form in the function worked for me.
I have a form that has two submit buttons. I want to submit the form manually using JavaScript and have the input button used to submit the form posted along with the other form elements, as it would be if the form was submitted automatically. There's quite a lot of chatter on this subject, but I can't find an answer.
<form method="post" action="echoToScreenAndLog.jsp" id="form1">
<input id="field1" name="field1"/>
<input type="text" size="20" id="field2" name="field2"/>
<input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
<input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form>
When the form is submitted above using the "Do One" button, the posted parameters are field1="xxx", field2="yyy", sub1_name="Do One".
But I want to submit the form manually...
<form method="post" action="echoToScreenAndLog.jsp" id="form1">
<input id="field1" name="field1"/>
<input type="text" size="20" id="field2" name="field2"/>
<input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
<input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form>
<script type="text/javascript">
var btn = document.getElementById('sub1_id');
btn.onclick=function() {
return mySubmit(document.getElementById('form1'), ...);
}
</script>
but doing a manual submission of the form in the mySubmit function does not post the sub1_name parameter. I can understand that - I've bypassed the submission so the form is not being submitted using the buttons and therefore it makes no sense to post a parameter representing the button used to submit the form.
When I look at the elements of the form in the onclick handler, I can see both buttons. I'm not overly surprised by that either, they are elements on the form after all, but what I don't get is that if I add an element inside my onclick handler then the element I add IS posted and the two original submit buttons are not posted. Just to complete the picture, here's the code that adds the element:
<script type="text/javascript">
var btn = document.getElementById('sub1_id');
btn.onclick=function() {
var f = document.getElementById('form1');
var s = document.createElement("input");
s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";
f.appendChild(s);
// s gets posted
return mySubmit(f, ...);
}
</script>
Adding the input element could work for me, but I'm confused how the browser knows to post my added element and not the original two input elements.
Thank you.
The specification says that the first step for form submission is:
Step one: Identify the successful controls
"Successful controls" are defined as:
A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.
However:
...
If a form contains more than one submit button, only the activated submit button is successful.
Since none of the submit buttons are activated, none are sent. Hidden input elements, on the other hand, are valid and will just be submitted along. Note that you add the hidden elements before calling mySubmit(), so at the time the above steps are executed (i.e. during submit), the hidden element is just another successful control part of the form, and thus sent.
may use
var btn = document.getElementById('sub1_id');
btn.onsubmit=function() {
return false;
}
btn.onclick=function() {
var f = document.getElementById('form1');
var s = document.createElement("input");
s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";
f.appendChild(s);
f.submit()
}