I am going to design the "forget Password" Link
in loginPage.jsp I have :-
<form name="testForm" action="passwordValidationController" method="post">
User Id: <input type="text" name="userId" id="userId"><br>
.
.
.
</form>
Click for forget password
.
.
.
forgetPasswordController.java
doPost(.........)
{
//I want to get the "userId" (textbox value) here
}
My question is that:- how can I get the value of "userId" (textbox) of LoginPage.jsp in the "forgetPasswordController" (servlet) when I click on the "Click for forget password" hyper link?
Please help me .....
#R Chatterjee While clicking the hyperlink, open dialog box and show the form to get the values like login id, emailid and secret question with answer. Finally when they clicking button send those values by jQuery ajax. All yuo need to do is include the jQuery plugin. Here your html may looks like this,
Forgetten your Password?
This will open hidden dialog form,
function openForm() {
//This Script is used for load pop up div to forgot password screen
$("#dialog").css({
"display" : "block"
});
$("#dialog").dialog({
minWidth : 600,
modal : true
});
}
This function will show the dialog box div,
<div id="dialog" title="Forgot Password" style="display: none;">
<input type="text" name="userLogin" id="userLogin" class="text-box">
<input type="text" name="userEmailId" id="userEmailId"
class="text-box">
<input type="button" value="Send" class="btn"
onclick="sendEmail();" />
</div>
jQuery ajax to send parameters to servlet,
function sendEmail() {
var loginId = $('#userLogin').val();
var emailId = $('#userEmailId').val();
if (loginId != '' && emailId != '' ) {
$.ajax({
url : "forgetPasswordController&userLogin=" + loginId
+ "&userEmailId=" + emailId,
async : false,
dataType : "json",
success : function(data) {
$('#userLogin').val('');
$('#userEmailId').val('');
}
});
return false;
} else {
//Display error message
}
}
By the way this is one kind of implementation. You can grab some idea from this.
Related
What I want to achieve
To send an email from an HTML form and show a popup to tell the user whether the input is valid.
Background
I'm developing a website where users can input their email addresses on a contact form and submit it to a certain email address. Besides, I want to show a popup to let the users know whether the input email address is valid i.e. not empty in this case.
Here's a diagram to show what it's like.
The procedure in detail is as follows.
A user inputs an email address in a form
The user clicks a submit button
If the email address is valid i.e. not empty, it is sent to a certain email address then a popup is shown to tell the user the email address was successfully sent.
If the email address is empty, a popup with an error message should be shown.
The flowchart is below.
After hours of searching, I decided to implement the features above as follows.
For user input, <form> and action attribute will be used like:
<form action="send_mail.php" method="post">
Email <input type="text" name="email">
<input type="submit" value="Submit">
</form>
To send a mail, mail() function in PHP will be used like:
<?php
$sender = 'from#websiteform.com';
$recipient = 'recipient#recip.com';
$subject = "from website";
$message = $_POST['email'];
$headers = 'From:' . $sender;
mail($recipient, $subject, $message, $headers)
?>
And the code for a popup is as follows.
<html>
<style type="text/css">
<!--
#gray-panel{
background : #000;
opacity : 0.5;
width : 100%;
height : 99999;
position : fixed;
top : 0;
left : 0;
display : none;
z-index : 50;
}
#popup{
height: 200px;
width: 400px;
border: solid 2px black;
background: yellow;
display: none;
z-index : 51;
position: fixed;
top: 70;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<form>
<input type="text" name="email"/>
<input type="submit" value="Send"/>
</form>
<div id="gray-panel"></div>
<div id="popup">this is a pop up window!<div>
<script>
var left_position = $("body").width()/2 - $("#popup").width()/2;
$("#gray-panel").fadeIn("slow");
$("#popup")
.css("left", left_position)
.fadeIn("slow");
$("#popup").click(function(){
$( "#gray-panel" ).fadeOut("slow");
$( "#popup" ).fadeOut("slow");
});
</script>
</body>
</html>
But there are a few problems.
the user is sent to a new page after clicking the submit button. I'd like to show a popup in the same page. I googled "form action php not transition" but couldn't find any useful resource.
jQuery for a popup can't be called from PHP since they are on different pages. echo "<script> function(); </script>"; or echo "<script src=\"popup.js\"></script>"; doesn't seem to be applicable in this case.
What should I do? Any help would be appreciated.
To address your first issue you will need to submit the form via AJAX. This will prevent the page from refreshing.
To do this you will need jQuery which i can see you are already using which is excellent. To make a basic AJAX call you will want to do something like this:
This code basically does the following: When the form has been submitted, it prevents the page from being refreshed using event.preventDefault(); and then sends the following data to the script specified using a post request.
jQuery('.sign-up-form').on('submit', function(event){
event.preventDefault();
jQuery.ajax({
type : 'POST',
url : '/path/to/file.php',
data : jQuery('.sign-up-form').serialize(),
beforeSend: function(){
jQuery("#error").fadeOut();
},
success : function(response){
var left_position = $("body").width()/2 - $("#popup").width()/2;
$("#gray-panel").fadeIn("slow");
$("#popup").css("left", left_position).fadeIn("slow");
}
});
});
Please note you will need to add the sign-up-form class to your form to make it look like this:
<form class="sign-up-form" method="post">
Email <input type="email" name="email">
<input type="submit" value="Submit">
</form>
For functionalilty for verifying email addresses you will need to add some extra logic into your php file (dependant on how far you need to verify). If it is just to make sure what has been sent is in the email format then you will see i have changed your input from type text to type email.
first you need to prevent default form submission with this
$(".form").click(function(e){
e.preventDefault();
i suggest you use sweet alert plugin if you don't want to get you hands dirty with css, if you are using sweet alerts then your ajax code should be like this:
swal({
title: "Are you sure you want to send us a mail?",
text: "You will get a feedback in 24hrs",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, Please!",
closeOnConfirm: false
}, function (isConfirm) {
if (!isConfirm) return;
$.ajax({type: "post",
url: "sendmail.php",
data: $('.form').serialize(),
success: function (response) {
var res = JSON.parse(response);
var strres =JSON.stringify(res);
console.log(strres);
if(strres === '"Sent"'){
swal("Sent" ,"Email sent sucessfully" ,"success");
}
else{
swal( "An error occurred!!!", "Please try again" ,"error");
}
}
});
});
});
then your html will be:
<form class="form" method="post">
Email <input type="email" name="email" pattern="^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$" required">
<input type="submit" value="Send">
</form>
then you can further do you validation and sending in php.
I hope this helps you.
I have the following form and input box. However, when there is nothing in the input box, the javascript doesn't execute. I need to detect if someone clicked "submit" without filling in the form. I have tried many things I've found on SO and none have worked. When there is an input value, everything works perfectly to execute the js. However, when there is nothing, the console.log(bidz) doesn't produce anything and it appears as if the script quits. From what I've read, I understand that the input box doesn't exist without a value in it. But then I tried to say if it doesn't exist, then something, but that also didn't work.
Perhaps this has to do with the fact that I give it a placeholder value of "enter something?"
<form action="" method="post">
<div id="<?php echo $this->item['id']; ?>">
<div class="ab">
<label for="ab_input"><?php echo $this->translate('To get the auction started, you must enter a starting bid.'); ?></label>
<span class="auction_bid_container">
<input id="ab_input" type="text" maxlength="12"
class="middle nmr event-clear-focus"
name="bidz" value="Enter something" />
<input id="updateBidButton" type="submit"
class="button grey-button num-items-button"
name="bidz"
value="<?php echo $this->translate('submit'); ?>"/>
</span>
</div>
</div>
</form>
<div class="clear mb20"></div>
and here is my js function. I have tried all kinds of things but it appears "this.value" results in an error if there is no value:
$('input[name="bid_amount"]').live('change', function () {
var bidz = this.value;
console.log(bidz);
$.ajax({
type: 'post',
url: "?module=is&controller=index&action=syy",
dataType: "text",
data: 'bid=' + bid_amount + '&id=' + id,
beforeSend: function () {
$('.ab').animate({
'backgroundColor': '#ffdead'
}, 400);
},
success: function (result) {
if (result == 'ok') {
console.log(bid_amount);
$('.ab').animate({
'backgroundColor': '#A3D1A3'
}, 300);
} else {
$('.ab').animate({
'backgroundColor': '#FFBFBF'
}, 300);
}
}
});
});
You are submitting the form either way, that's why! So, what you have to do is to stop the form from being submitted. How?
You can add onsubmit=" return false; " to your form
<form action="" method="post" onsubmit=" return false; ">
</form>
submit.addEventListener("submit", form, function(){
e.preventDefault(); /* This will prevent the form from being sent until you explicitly send it. */
});
If you are sending the form through ajax there is no need to submit the actual form (meaning form.submit() )
I am using the Login Dialog as mentioned here on jQWidgets which I think is not the problem I am having and hence it shouldn't matter if someone has used it before or not for answering my question:
When testing the login functionality by putting login credentials, the username and password keep getting added on the URL of the page which I don't want. I am not sure why it's happening. Am I doing something wrong with the jQuery Ajax Post Webservice call?
Say for example, my home page URL of the webapp is : https://example.com/home.html
After entering loging credentials, it gets added to the URL for some reason like this:
https://example.com/home.html?username=myname&password=mypassword
Here is my HTML:
<!-- Login HTML Begins -->
<div id="wrap">
<div id="window" caption="Login">
<div>
<form >
<table>
<tr>
<td>Username:</td>
<td><input style="width: 150px;" type="text" name="user" id = "username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input style="width: 150px;" type="password" name="password" id = "password" /></td>
</tr>
<tr>
<td colspan="2" align="right" valign="bottom">
<input type="submit" id="submit" value="Login" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!-- Login HTML ends -->
Here is my Javascript Code:
<script type="text/javascript">
$(document).ready(function () {
$('#window').jqxWindow({ theme: "shinyblack", width: 250, height: 130, isModal: true });
$('#submit').jqxButton({ theme: "shinyblack" });
var loginUrl = "https://example.com:8443/Webservice/loginCheck"
$( "#submit" ).click(function() {
var userName = $("#username").val();
var passWord = $("#password").val();
var ajaxRequest = jQuery.ajax({
//beforeSend: TODO: show spinner!
data: {
username: userName,
passWord: passWord
},
dataType: "json",
method: "POST",
url: loginUrl
})
.done(function (data_, textStatus_, jqXHR_) {
// Validate the web service and retrieve the status.
if (typeof (data_) === "undefined" || data_ === null) { alert("Invalid data returned from LoginCheck Web Service"); return false; }
if (isEmpty(data_.webservice_status) || isEmpty(data_.webservice_status.status)) { alert("Invalid Web Service Status for LoginCheck Webservice!"); return false; }
if (data_.webservice_status.status != "SUCCESS") { alert(data_.webservice_status.message);
return false; }
})
.fail(function (jqXHR_, textStatus_, errorThrown_) {
alert("Hitting the Fail function : Error in LoginCheck webservice: " + errorThrown_);
return false;
});
}
});
</script>
The default protocol used by forms are GET so you need to override it using POST protocol
so you need something like this:
<form action="url" method="post">
..
..
..
</form>
also the embedded click function you should prevent some default by putting this code :
$("#submit").click(function(e){
e.preventDefault();
<!-- your statement !>
...
})
also the butto type :
<button type="button" id="submit"></button>
or
<input type="button" id="submit">
The way you've set it up, you're submitting the form data in the traditional way rather than via AJAX.
One option is to add:
$('form').on('submit',function(event){
event.preventDefault();
});
(A common error is to try to prevent form submission in a click handler attached to the submit button. There are a number of ways to submit a form and the submit button is only one of them.)
Another option is to just remove the form element.
Your form may be sending a get request, because you haven't prevented the default functionality of a form button. Try adding these two lines to your click handler:
$( "#submit" ).click(function(event) {
event.preventDefault();
event.stopPropagation();
}
I'm trying to create a preview screen with data submitted, and display it in Featherlight Lightbox.
I have the following sample codes.
jQuery(document).ready(function() {
//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {
var pa_firstname= jQuery('input[name="pa-[name_first]"]').val();
var pa_lastname= jQuery('input[name="pa-[name_last]"]').val();
if (pa_firstname == null || pa_firstname == '') {
alert('Cannot be empty');
return false;
} else {
jQuery('.LightBox').empty();
jQuery('.LightBox').append('First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname);
//alert('done');
}
jQuery.ajax({
url : padvisor_ajax.ajax_url,
type : 'POST',
dataType: 'json',
data : {
action: 'padvisor_test_ajaxcall_lightbox',
pa_first_name: pa_firstname,
pa_last_name: pa_lastname
},
success: function (data) {
jQuery.featherlight(jQuery('.LightBox'), {});
jQuery('.LightBox').toggle();
}
});
return false;
});
And then I have the following html codes to create 2 fields, a submit button and a preview button:
<form id="pd_test">
<span id="pa-[name_first]" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-[name_first]" id="pa-[name_first]" value=""/>
</span>';
<span id="pa-[name_last]" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-[name_last]" id="pa-[name_last]" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button value="preview" class="OpenLightBox">Preview</button></form>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">This is the content, let the content dwell here</div>
I'm able to show to featherlight box with my DIV when i use .toggle, however I cannot make sense of how I can hide the <div> when i close the featherlight light box.
Can anyone guide me on how to hide the DIV when the featherlight box is close, and let me know whether this is the right way to do?
My Objective... to collect input from the form fields, send via ajax to php to process it, and on success, display in a preview light box where i can have a close button and a submit button. The close button can close it, but the submit button will have the same function as the form submit button.
Problem 1: I need to toggle Hide when the feather light closes.
Problem 2: When the featherlight lightbox closes now, and i click on the preview button again, the DIV only calls empty but it doesn't call the .append to put in the value.
You needed to pass the content properly to featherlight and also did not need to toggle the element since featherlight will do that on the close event.
HTML
<span id="pa-name_first" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-name_first" id="pa-name_first" value=""/>
</span>
<span id="pa-name_last" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-name_last" id="pa-name_last" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button type="button" class="OpenLightBox">Preview</button>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">
<span id="content"></span>
</div>
jQuery
//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {
var pa_firstname= jQuery('input[name="pa-name_first"]').val();
var pa_lastname= jQuery('input[name="pa-name_last"]').val();
if (pa_firstname == null || pa_firstname == '') {
alert('Cannot be empty');
return false;
} else {
var content = 'First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname+'';
jQuery('#content').html("");
jQuery('#content').html(content);
jQuery.featherlight('#content', {});
}
});
Working JSFiddle: https://jsfiddle.net/rdawkins/9vktzw88/
I have the following problem:
2 forms that need to be submitted with one button. I will explain how it should work.
And of course my code so far.
#frmOne contains a url field where I need to copy the data from to my #frmTwo, this works.
(it forces the visitor to use www. and not http:// etc)
When I press 1 submit button
Verify fields #frmOne (only url works now, help needed on the others)
Call #frmTwo and show result in iframe. result shows progress bar (works)
But Div, modal or any other solution besides iframe are welcome.
Close #frmOne (does not work)
Finally process (submit) #frmOne if #frmTwo is done (does not work)
Process completed code of #frmTwo in iframe =
<div style='width' id='information'>Process completed</div>
<ol class="forms">
<iframe width="100%" height="50" name="formprogress" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
<div id="txtMessage"></div>
</ol>
<div id="hide-on-submit">
<form id="frmOne" method="post">
<input type="text" name="company" id="company" >
<input type="text" name="url" id="url" >
<input type="text" name="phone" id="phone" >
<input type="text" name="occupation" id="occupation" >
<textarea rows="20" cols="30" name="summary" id="summary" >
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</div>
<form id="frmTwo" method="post" target="formprogress"></form>
<script>
jQuery(document).ready(function(){
//Cache variables
var $frmOne = $('#frmOne'),
$frmTwo = $('#frmTwo'),
$txtMessage = $('#txtMessage'),
frmTwoAction = 'http://www.mydomainname.com/form.php?url=';
//Form 1 sumbit event
$frmOne.on('submit', function(event){
event.preventDefault();
var strUrl = $frmOne.find('#url').val();
//validation
if(strUrl === ''){
$txtMessage.html('<b>Missing Information: </b> Please enter a URL.');
}
else if(strUrl.substring(0,7) === 'http://'){
//Clear field
$frmOne.find('#url').val('');
$txtMessage.html('<b>http://</b> is not supported!');
}
else if(strUrl.substring(0,4) !== 'www.'){
//Clear field
$frmOne.find('#url').val('');
$txtMessage.html('<b>Invalid URL</b> Please enter a valid URL!');
}
else{
//set form action and submit form
$frmTwo.attr('action', frmTwoAction + strUrl).submit();
$('#hide-on-submit').hide(0).fadeIn(1000);
$('form#frmOne').submit(function(e) {
$(this).hide(1000);
return true; // let form one submit now!
}
return false;
});
});
</script>
read here https://api.jquery.com/jQuery.ajax/. basically you need to submit the first one with $.ajax and then, when you get the server response (in the success() function ) you need to send the second form, again width ajax().
Something like:
$form1.on('submit', function(e) {
e.preventDefault(); //don't send the form yet
$.ajax(
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize()
).success(function(data) {
alert('form one sent');
$.ajax(
url: $('#form2').attr('action'),
type: $('#form2').attr('method'),
data: $('#form2').serialize()
).success(function(data) {
alert('form two sent');
})
});
});
This code isn't ready to be copy/pasted, it's just to give you a guideline of how I would solve it. It's a big question, try going with this solution and come back with smaller question if you find yourself blocked.