I can't execute this jquery function properly. When I click on submit's form, only shows the two first alerts and then the page reloads. So I click again on the form's submit with the page reloaded and then shows the rest of the alerts (beginning by the third one) and then the function works fine.
In conclusion: I need to click on the form's submit two times instead of one to execute the function.
Any idea? Thank you.
JS Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
alert("enters script");
$(function () {
alert("enters jquery function");
$(".submit").click(function () {
alert("enters click submit function");
var name = $("#name").val();
var date = $("#date").val();
var dataString = 'name=' + name + '&date=' + date;
alert("saved variables");
if (name == '' || date == '') {
alert("enters if");
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
} else {
alert("enters else");
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function () {
alert("enters success");
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
refresh();
}
});
}
return false;
});
});
</script>
HTML Code:
<form method="post" name="form">
<ul>
<li>
Name <input id="name" name="name" type="text" />
</li>
<li>
Date <input id="date" name="date" type="date" />
</li>
</ul>
<div >
<input type="submit" value="Submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div>
</form>
use the event.preventdefault to stop the submission of the page
http://api.jquery.com/event.preventdefault/
Your problem is using submit buttons, they have some default behaviors other than what you add as a event to it.
replaced this:
<input type="submit" value="Submit" class="submit" />
with:
<input type="button" value="Submit" class="submit" />
this you working DEMO
other than changing the submit button to a regular button, you can fix your code by disabling that default behaviors, adding onsubmit to your form node:
<form method="post" name="form" onsubmit="return false;">
<!--your stuff-->
</form>
Try this:
<script type="text/javascript">
$( document ).ready(function() {
$(".submit").click(function(){
alert("entra en la funcion del clic del submit");
var nombre = $("#nombre").val();
var fecha = $("#fecha").val();
var dataString = 'nombre='+ nombre + '&fecha=' + fecha;
alert("variables guardadas");
if(nombre=='' || fecha=='')
{
alert("entra en el if");
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
alert("entra en el else");
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function()
{
alert("entra en el success");
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
refresca();
}
});
}
return false;
});
});
First of all, thank you to everybody for your help.
Finally the main problem comes from other part of the code. I was using pjax (https://github.com/thybag/PJAX-Standalone) to replace the form with other html document (in this case page1.html) after doing the mysql insert through "join.php". And I'm not calling the jquery function properly.
Explanation: You begin in page1.html, then click on "Go To Page 2" (This replace the div "content" with the body of page2.html). Then complete the form and submit it. When you click on submit, activates the jquery function (join.php mysql insert inside) and finally replace again the div "content".
Solution (this works):
page1.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="pjax-standalone.js"></script>
<script type="text/javascript">
pjax.connect({
'container': 'content',
'beforeSend': function(){console.log("before send");},
'complete': function(){console.log("done!");
if($("#button_pg_2").length)
{
$( document ).ready(function()
{
$(".submit").click(function()
{
var nombre = $("#name").val();
var fecha = $("#date").val();
var dataString = 'name='+ name + '&date=' + date;
if(name=='' || date=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax(
{
type: "POST",
url: "join.php",
data: dataString,
success: function()
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
replace();
}
});
}
return false;
});
});
}
}
});
</script>
<script type="text/javascript">
function replace()
{
pjax.invoke('page1.html', 'content');
}
</script>
</head>
<body>
<div id="header">
This div never changes
</div>
<div id="content">
Go To Page 2
</div>
</body>
</html>
page2.html
<html>
<body>
<form method="post" name="form">
<ul>
<li>
Name <input id="name" name="name" type="text" />
</li>
<li>
Date <input id="date" name="date" type="date" />
</li>
</ul>
<div >
<input type="button" id="button_pg_2" value="submit" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div>
</form>
</body>
</html>
Related
I have a problem with casperjs.
I want to fill a form but casperjs says the form is not found... In the code I can't see a form name so I tried to use the formid without success
Here is the source code of the website where I want to fill the form
<tr class="wcontent" valign="top">
<td></td>
<td id="wcontent_login" class="widgetMiddleMiddle" style="display: block; height: 213px;">
<iframe frameborder="no" src="/WebInt.nsf/loginWidget.xsp?widgetUniqueId=anonymous-login-default" scrolling="no">
<!DOCTYPE html>
<html lang="de">
<head>
<body class="xspView tundra">
<form id="view:_id1" class="xspForm" enctype="multipart/form-data" action="/GI7/WebInt.nsf/loginWidget.xsp?widgetUniqueId=anonymous-login-default" method="post">
<div id="inactive_loginWidget">
<div class="inactive_loginLeft">Anmeldung</div>
<div class="inactive_loginRight">
<div style="height:27px;background-color:#004178;color:white;padding:10px; width:227px;margin-bottom:5px;text-align:center;">
<div>
<input id="username" type="text" placeholder="Benutzername" onkeypress="return handleKeyPressed(event)" onfocus="var elem = document.getElementById(''); if(elem != null) {hideLabel(elem, 'username');}" onblur="var elem = document.getElementById(''); if(elem != null) {if(document.getElementById('username').value == '') { showLabel(elem); } else { hideLabel(elem); }}" name="username" autocomplete="off" vk_19ae7="subscribed">
</div>
<div class="cleaner3px"></div>
<div>
<div class="cleaner3px"></div>
<div title="Anzahl der Spalten für die Darstellungsbreite des Browsers einstellen.">
<div class="cleaner10px"></div>
<div class="button" style="margin-left: -5px; cursor: default;" onmouseover="setHoverEffectButton(this, '');" onmouseout="resetHoverEffectButton(this, '');" onmousedown="setPressedButtonEffect(this, '');" onclick="handleKeyPressed(event, true)">
</div>
</div>
<script type="text/javascript">
<input id="view:_id1__VUID" type="hidden" value="!1k37604fezbng88zt78ksqv5x!" name="$$viewid">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" value="view:_id1" name="view:_id1">
</form>
</body>
</html>
</iframe>
My casperjs Code
var casper = require("casper").create({
verbose: true,
logLevel: "debug"
});
function wait5seconds() {
casper.wait(5000, function() {
this.echo('2');
});
}
// casper.options.waitTimeout = 40000;
casper.start("https://Testseite.de/WebInt.nsf/loginWidget.xsp", function() {
this.echo("Page title: " + (this.getTitle()));
wait5seconds();
});
casper.then(function(){
this.fillSelector('Formname ????', {
'username': 'Hans',
'password': 'Wurst'
}, true);
});
casper.then(function() {
casper.capture('Test2.png');
});
casper.then(function() {
this.evaluate(function(){
//trigger click event on submit button
document.querySelector('input[type="submit"]').click();
});
});
casper.then(function() {
casper.capture('Test3.png');
});
casper.run();
I also tried to solve my problem with queryselector but still no success :(
I think you are missing 'form; from the selector.
Something along the lines of:
this.fillSelectors('form#view:_id1', {
casper.then(function(){
this.fillSelector('Formname ????', {
'username': 'Hans',
'password': 'Wurst'
}, true);
});
This question might help: How to use fillSelectors in casperjs
Yes but every time i start the Test it breaks in step 4 :
casper.then(function(){
this.echo("Formstart");
this.fillSelector('form#view:_id1', {
'username': 'XX',
'password': 'XX'
},true);
this.echo("Formend");
});
Formstart works but Formend does not get printed so the mistake must be there ....
I changed it now to :
casper.then(function(){
this.echo("Formstart");
this.fillSelector('form#view:_id1', {
'input[name="username"]': 'XX',
'input[name="password"]': 'Xx'
},true);
this.echo("Formend");
});
but still no success :(
Finally i solved it with an debugger and Post request:
casper.open('https://XXX/WebInt.nsf',
{
method: 'post',
data: {'username':'XX','password':'XX'}
}, function(response){
if(response.status == 200){
require('utils').dump(this.page.content);
}
});
:)
In below code actually I got form design in popup using onload(). In function login() first I check every field is required then in else part I call loginvalidate.php page without page refresh in this page I perform validation in php and if any error show it in
<div id="result" style="color:red;"></div>
Division, But my query is that after if part is completed in login function and when I click on button in else part our page is reloaded because of this reload I can't access my loginvalidate.php page why this is happen please suggest me,
<!doctype html>
<html>
<head>
<script src="jquery-1.11.3.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script>
function login(){
var email=document.getElementById("email").value;
var password=document.getElementById("pass").value;
var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*#[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
if(email=="" || password==""){
alert("Every Field Is Requird");
email.password.focus();
return false;
}else{
//alert("hii");
$.post('custom-look/loginvalidate.php',{uemail:email,upass:password}, //email,pass ->textbox name
function(data){
$('#result').html(data);
});
return false;
}
}
function popup(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
</head>
<body onload="popup();">
<div id="light" class="white_content" style="height:53%">
<img class="close" src="/shopeeon/custom-look/newloginpopup/close.jpg" class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';history.go(-1);"></img>
<!--go back to previous page using "history.go(-1)" onclick-->
<div id="abc">
<div id="popupContact-login" class="col-sm-12" >
<form action="" id="login-form" method="post" name="form">
<div style="color:orange;text-align:center;width:100%;">
<h2 style="margin:0px;">Login to Earn Extra Cashback</h2>
<div id="result" style="color:red;"></div>
</div><br/>
<div class="col-sm-6 align="center" style="border-right:1px solid gray;" > <?php $reg1 = <<<var<b style="font-size:20px;font-family:arial;"> Registered User,</b> var; $reg2=<<<var<b style="color:blue;font-size:20 px;font-family:arial;"> Sign In Here </b> var; echo $reg1.$reg2; ?> </br> <input type="email" id="email" class="form-control" name="uemail" placeholder="Enter email" required/><br/>
<input type="password" id="pass" class="form-control" name="upass" placeholder="Enter password" required/><br/>
<button type="submit" onclick="return login()" id="submit" name="submit" value="submit" class="btn btn-info active btn-md">SIGN IN</button><br/>
Else Redirect without Sign In
</div>
<div class="col-sm-6" > <?php $str1 = <<<var <b style="font-size:20px;font-family:arial;"> New User,</b> var; $str2=<<<var <b style="color:blue;font-size:20 px;font-family:arial;"> Sign Up Here </b> var; echo $str1.$str2;?>
<img src="/shopeeon/custom-look/newloginpopup/link.png" height="38"></img><br/> <?php $s1 = <<<var <b style="font-size:12px;font-family:arial;"><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img> WE OFFER CASHBACK WHEN YOU SHOP VIA US.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img> OVER 2 LAKH CASHBACK PAID.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img> OVER 1 LAKH HAPPY CUSTOMERS.</br><img src="/shopeeon/custom-look/newloginpopup/star.png" height="15" width="15"></img> 25+ PARTNERS SITES.</br>var; echo $s1;?>
</div >
</form>
</div>
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
While click the button form submit will trigger, it's reload the page. So give onsubmit="return false" to form for prevent the page load.
Like below code
<form onsubmit="return false">
</form>
Hope this will help you.
1st: what that line expect to do?? email.password.focus(); it will give you an error .. so you can use
if(email=="" || password=="")
{
alert("Every Field Is Requird");
if(email == ""){
email.focus();
}
// check the same way for password
}
else......
2nd: better to don't mix jquery with pure javascript
3rd in your function it submit a form before prevent the page from reloading so you can use
in html
<form onsubmit="login();"> // instead of the submit input click event
and your function
function login()
{
var email=$('#email').val();
var password=$("#pass").val();
var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*#[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
if(email=="" || password=="")
{
alert("Every Field Is Requird");
//email.password.focus();
}
else
{
//alert("hii");
$.post('custom-look/loginvalidate.php',{uemail:email,upass:password}, //email,pass ->textbox name
function(data)
{
$('#result').html(data);
});
}
return false;
}
or you can use e.preventDefault();
<form onsubmit="login(e);"> // instead of the submit input click event
and your function
function login(e)
{
e.preventDefault();
var email=$('#email').val();
var password=$("#pass").val();
var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*#[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
if(email=="" || password=="")
{
alert("Every Field Is Requird");
//email.password.focus();
}
else
{
//alert("hii");
$.post('custom-look/loginvalidate.php',{uemail:email,upass:password}, //email,pass ->textbox name
function(data)
{
$('#result').html(data);
});
}
//return false;
}
here for validation i used onsubmit event.
but any how its not working.
i just want check that textbox filed is empty or not.
<!DOCTYPE html>
<html>
<head>
<title>temple3</title>
<link rel="stylesheet" type="text/css" href="temple3css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="popup-content" class='container'>
<div id="container1">
<form id="form" class="form" onsubmit="return validateForm()">
<h1>Feedbak Form</h1>
<div class="content">
<div class="intro"></div>
<div id="section0" >
<div class="field roption">
<input type="radio" name="view" value="public" checked="checked"> <span>Public</span>
<input type="radio" name="view" value="private" ><span>Private</span>
</div>
<div class="field category">
<label for>Category:</label>
<select class="dropDownCate" autofocus>
<option value="bug">Bug</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="field message">
<label for="Comments">Comments:</label>
<textarea id="comments" name="Comments" placeholder='Your Feedback Here!' autofocus></textarea>
</div>
<div class="field">
<label for="Email">Email</label>
<input type="email" id="email" name="Email" placeholder="example#stevens.edu(optional)" autofocus>
</div>
<div class="field"><input type="submit" id="submit-feedback-button" autofocus></div>
</div>
</div>
</form>
</div>
</div>
<div id="popup-overlay-bg"> </div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function validateForm(){
var texbox=document.getElementById("comments").value;
if(texbox == "") {
document.getElementById("comments").focus();
// document.getElementById("comments").style.border = "1px solid #ff0000";
return false;
}
}
$(document).ready(function(){
$("#feedback-button").click(function(){
openfeedbackform();
});
$("#popup-overlay-bg").click(function(){
closefeedbackform();
});
$("#submit-feedback-button").click(function(){
// closefeedbackform();
});
$(window).resize(function(){
updatefeedbackform();
});
$("#submit-feedback-button").click(function(){
var category=$(".dropDownCate").val();
var roption=$('input:radio[name=view]:checked').val();
var message=$("#comments").val();
var email=$("#email").val();
$.ajax({
type: "POST",
url: "feedback.php",
data: "category="+category+ "&roption="+roption+ "&message="+message+ "&email="+email,
success:function(result)
{
if(result=="true"){
$("#form").hide();
$("#container1").html("<h3>Thank you for your feedback We will get back to you ASAP</h3> ");
}
else{
$("#form").hide();
$("#container1").html("<h3> database error </h3>");
}
}
});
return false;
});
});
function openfeedbackform(){
$("#popup-content").find('input:text').val('');
$("#popup-content").fadeIn();
$("#popup-overlay-bg").fadeIn();
updatefeedbackform();
}
function updatefeedbackform(){
$popup=$("#popup-content");
var top = "50px";
var left = ($(window).width() - $popup.outerWidth()) / 2;
$popup.css({
'top' : top,
'left' : left
});
}
function closefeedbackform(){
$("#popup-content").fadeOut();
$("#popup-overlay-bg").fadeOut();
}
</script>
</body>
</html>
earlier i used same this for form validation. but i don't why its not working here. i tried to debug but function has not been call.
The problem is you are doing ajax submit in the button click event, not in the form submit.
The click handler is triggered before the submit event handler, so the validation does not have any effect.
The solution will be to use the form submit event handler for both validation and the ajax call as given below, and then there is no need to have the inline event handler like onsubmit="return validateForm()"
$("#form").submit(function () {
if (validateForm() === false) {
return false;
}
var category = $(".dropDownCate").val();
var roption = $('input:radio[name=view]:checked').val();
var message = $("#comments").val();
var email = $("#email").val();
$.ajax({
type: "POST",
url: "feedback.php",
data: "category=" + category + "&roption=" + roption + "&message=" + message + "&email=" + email,
success: function (result) {
if (result == "true") {
$("#form").hide();
$("#container1").html("<h3>Thank you for your feedback We will get back to you ASAP</h3> ");
} else {
$("#form").hide();
$("#container1").html("<h3> database error </h3>");
}
}
});
return false;
});
I was wondering why my jquery mobile styling only sometimes loads only if when I press the refresh button before I hit the next link named Sign up.
If I were to hit the back button and then hit the sign up button again without refreshing, the list that would appear would look totally different without the jquery styles.
I am just baffled as to what is going on.
Here is the Link:
http://71.162.197.6/iGotChu/www/
And if you want to see what it is on jsfiddle here it is: enter code herehttp://jsfiddle.net/ayz8sd6u/
****Sadly, the problem doesn't show up on jsfiddle. The list I am trying to print doesn't even show up after you press sign up.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>changePage JSON Sample</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function(){$('form').on('submit', function() {
var pageRequest = "" + $(this).attr('action');
$.post($(this).attr('action'), $(this).serialize(), function(data,status){
//alert("Returned data: " + data);
pageRequest = parsePhp(pageRequest);
pageHandler(pageRequest, data);
});
return false;
});
});
function parsePhp(pageRequest){
var index1 = pageRequest.lastIndexOf("/");
index1++;
//alert(index1);
var index2 = pageRequest.lastIndexOf(".");
//alert(index2);
var page = pageRequest.substring(index1,index2);
//alert(page);
return(page + "");
}
//Owl Carousel
$(document).ready(function() {
$("#menu").owlCarousel({
singleItem: true,
});
return(false);
});
</script>
<script>
$(document).ready(function() {
var at = $("a").attr("href");
$("a").click(function(){
//alert("the Attribute is: " + at);
var print = "";
for (i=0;i<10;i++){
print = print + "<ul data-role='listview'><li><a href='index.html'><img src='images/album-bb.jpg' /><h3>Broken Bells</h3> <p>Broken Bells</p></a></li></ul>";
}
document.getElementById("test").innerHTML = print;
$.mobile.changePage($(attribute),"slide");
}
);
});
function pageHandler(pageRequest, result){
result = result + "";
if(pageRequest == "register"){
alert("Your account as been created!");
$.mobile.changePage($("#loginPage"),"slide");
}
else if(pageRequest == "login"){
alert("result data: " + result);
if(result == "success"){
$( ".loginPopUp" ).popup( "open");
$.mobile.changePage($("#home"),"slide");
}
else{
alert("Incorrect Credentials");
}
}
}
</script>
</head>
<body>
<div data-role="page" id="loginPage">
<div data-role="header">
<h1> iGotYou! </h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="http://71.162.197.6/iGotChu/php/login.php">
<div class="ui-field-contain">
<input type="text" name="userName" id="userName" placeholder="Username">
<input type="password" name="password" id="passWord" placeholder="Password">
<input type="submit" value="Login">
</div>
</form>
Sign Up
</div>
</div>
<div data-role="page" id="createAccountPage">
<a data-rel="back" data-icon="arrow-l" data-role="button">Create Account</a>
<form method ="post" action ="http://71.162.197.6/iGotChu/php/register.php">
<div class="ui-field-contain">
<input type="text" name="userName" id="userName" placeholder="User Name">
<input type="text" name="firstName" id="firstName" placeholder="First Name">
<input type="text" name="lastName" id="lastName" placeholder="Last Name">
<input type="text" name="email" id="email" placeholder="Email Address">
<input type="password" name="password" id="password" placeholder="Password">
<input type="submit" value="Confirm">
</div>
</form>
<div data-role = 'content'>
<div class='content-primary' id = 'test'>
</div>
</div>
</div>
</body>
</html>
Not sure where to start here, but I think what you're having issues with is in your loop. Try something like this:
$("a").click(function () {
var printHtml = "<ul data-role='listview'>";
for (i = 0; i < 10; i++) {
printHtml += "<li><a href='index.html'><img src='images/album-bb.jpg' /><h3>Broken Bells</h3><p>Broken Bells</p></a></li>";
}
printHtml += "</ul>";
$("#test").html(printHtml);
$.mobile.changePage($(attribute), "slide");
});
You're printing a new <ul> each time and I don't think you need to do that.
The first time any page is loaded in Jquery, the page is "CREATED" and is only created once and then saved into memory.
Using the "pagebeforecreate" event listener, I can change the html before the page is created. In the API, the "pagebeforecreate" interrupts the page loading before the jquery enhancements are performed, thus, the html is injected, and then the enhancement scripts can then do their work in orderly fashion.
$(document).on("pagebeforecreate",function(event){
//alert("page before created activated");
var nextPage = event.target.id;
var print = "";
if (nextPage=="createAccountPage"){
$.ajax({
url: '<your server>',
dataType: 'json',
async: true,
success: function(data) {
var print = "";
for (i=0;i<data.firstName.length;i++){
print = print + "<li><a href='index.html'><img src='images/album-bb.jpg' /><h3>"+data.firstName[i]+ " " + data.lastName[i] + "</h3><p>Broken Bells</p></a></li>";
}
$("#usersList").html(print);
print = "";
}
});
}
});
However, the problem is not totally fixed as one would need to refresh the html if it were ever to be changed due to a caching problem where the old page would be saved and the html would not be reloaded even though an ajax call is made. This goes hand in hand with my earlier statement that pages are created only once. To force a reload/notify that the page has been changed, I made a complementary scheme that upons an ajax call, the html is updated with the function
$('#usersList').listview('refresh');
I tried pass the content of an entire div in form action url using JS. but on servlet side when i try to get this request param as String, i am getting it as [object Object].
This is my form and JS
<div id="paraContent">
Content in jsp
</div>
<form id="form1" action="/sendEmail.email.send.html" method="post">
<input type="hidden" id="contentValue1" name="contentValue1"/>
<input type="button" value="place order" onClick="formSubmit()"/>
</form>
<script type="text/javascript">
var divContent = $('#paraContent');
$("#contentValue").val(divContent);
function formSubmit() {
var form = document.getElementById("form1");
var str = "/sendEmail.email.send.html?contentValue=" + $('#paraContent');
form.action = "/sendEmail.email.send.html?contentValue=" + $('#paraContent');
form.submit();
}
</script>
You could copy the div's content into a div when the form is subbmitted.
<form id = "form1" action="/sendEmail.email.send.html" method="post">
<input type="hidden" id="contentValue1" name="contentValue1"/>
<c:Set var="contVal" value="ddd"/>
<input type="button" value="place order" onClick="formSubmit()"/>
</form>
<script type="text/javascript">
function formSubmit() {
$("#contentValue1").val($("#paraContent").text());
var form = document.getElementById("form1");
var str = "/sendEmail.email.send.html?contentValue=" + $(paraContent);
form.action = "/sendEmail.email.send.html?contentValue=" + $(paraContent);
form.submit();
}
</script>
try by changing the
$(paraContent) to $("#paraContent"); and also
$("contentValue").val(divContent); to $("#contentValue").val(divContent);
Well you can use ajax post in order to send data from div to your servlet
<div id="paraContent">
Content in jsp
</div>
<script>
$(document).ready(function (){
var data=$("#paraContent").text();
$.ajax({
url: "YOUR SERVLET",
type: "POST",
data: { "data": data},
success: function(data) {
console.log(data);
}
});
});
</script>
In your servlet
String datafromdiv=request.getParameter("data");
Try this instead on a button click function .....