I've met a weird behavior. I'm trying to get / set the value of an input textbox After FeatherLight lightbox is closed. I get "Undefined" when trying to fetch the value of the textbox (again, after it was opened and closed via Featherlight). You can see my source code here:
https://jsfiddle.net/hgyba4dg/
The only relevant part is the html code. try running the code on JSFiddle and see the input's value (the textbox's value). You'll see that you'll get "undefined" after closing the Featherlightbox. Here is the html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var storeData = null;
function openFeatherLight()
{
if (!storeData)
{
storeData = $.featherlight($('#MyDiv'), { 'persist' : true , 'beforeOpen' : sayHi , 'beforeClose' : sayBye, 'afterClose' : changeInputValueAfterClose });
}
else
{
storeData.open();
}
}
function sayHi()
{
alert('Value of textbox BEFORE opening FeatherLight LightBox Is: ' + $('#MyTextBox').val());
}
function sayBye()
{
alert('Value of textbox BEFORE CLOSING the FeatherLight LightBox Is: ' + $('#MyTextBox').val());
}
function changeInputValueAfterClose()
{
$('#MyTextBox').val("Bla");
alert('Current Value Of Input TextBox After Change is: ' + $('#MyTextBox').val());
alert('We get "Undefined". Why?');
}
</script>
</head>
<body>
<div id="Shit" style="display: none;">
<div id="MyDiv">
Text
<form id="MyForm">
<input type="text" value="Initial_Value_Set_By_Me_For_Testings" id="MyTextBox">
</form>
</div>
</div>
<input name="Button1" type="button" value="Open FeatherLight" class="AddToMenuButton" onclick="openFeatherLight();">
</body>
</html>
After the first time, the DOM elements remain detached (I open to reinsert it one day...). So $('#MyTextBox') won't work afterwards. Either keep a reference to it, or use storeData.$content.find('#MyTextBox')
Related
html>
<head>
<title>Landing</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<form name="testForm" action="move.jsp">
<label><h1>Enter the data <h1/></label><br/>
<input type="text" name="DATA"><br/>
<input type="submit">
</form>
<% out.println(DATA) %> <!-- WRONG!! -->
</body>
</html>
Please ignore the action part
I am working on a spring mvc project and I have a problem. What I want is that, when the user clicks submit, we should not leave the page, we should just stay. But the values submitted would be used as a parameter to a function in the same page. Here, let's just say I want to print it, and that is the part that is wrongly entered.
What should I do to accomplish this? Please help
You can use ajax here when your submit button is clicked call this function and then using this call your ajax passed the value from your input to your server and then at your server side perform operation which you needed to do and then the result back to ajax .
Your form :
<form name="testForm" action="move.jsp">
<label><h1>Enter the data <h1/></label><br/>
<input type="text" name="DATA"><br/>
<input type="button" onclick="submit_values()">
<!--^^added this-->
</form>
<div id="result"><!--here data will come back--></div>
Then on click of your button submit_values() function will get called . i.e :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
function submit_values() {
//get input value
var values = $("input[name='DATA']").val();
console.log(values);
$.ajax({
type: 'POST',
data: {
values: values//passing to server
},
url: "Your_server_url",
success: function(data) {
alert(data);//this will display whatever server will return
$("#result").html(data);//add response back to show
}
});
}
</script>
Then at your server-side do like below :
String data =request.getParameter("values");//get value
String send_back = something(data);//call your function
out.println("DATA BACK"+send_back );//this will go back to ajax
I'm trying to display a message that appears after the user has input some details into input boxes. Once they put in the info in the input boxes, the page should add the info to the multi-line text and then display the entire message on the webpage with the new info included. This code I have only displays the message without the input.
Here, I'm simply having the user put in the text in the box, then I tried to "parse" the input's value by giving it a variable name with a value within the code so it can be added as a property to the "libs" object. I have more to the message, but I can't even get this one sentence to process correctly.
<!DOCTYPE html>
<html>
<head>
<title>Madder Libs</title>
</head>
<body>
<div id="input">
<form>
<p>
<h4>Piece of clothing:</h4><input id="cloth" type="text" value=" " />
</p>
</form>
</div>
<script>
let clothes = document.getElementById('cloth').value;
let libs = {
a: clothes,
/*b: firstBodyPart,
c: secondBodyPart,
d: verbOne,
e: thirdBodyPart,
f: verbTwo,
g: firstNoun,
h: secondNoun,
i: verbThree,*/
};
let showThis = function()
{
let display = function(message)
{
let sayThis = `I wear a ${message.a} on sundays.`;
return sayThis;
}
document.getElementById('madlibs').innerHTML += "<br/>" + display(libs);
}
</script>
<div id="madlibs">
<button type="submit" onclick="showThis()">Show Message</button>
</div>
</body>
</html>
I want my message to be displayed including whatever the user put in the text box
Let's start by addressing why your sentence does not work. It is simply a matter of timing or in other words when things get executed. In your code (which isn't very well structured but onto that later) you execute
let clothes = document.getElementById('cloth').value;
at the very beginning of the script. In this case you are not obtaining some form of reference that would allow you to read the value at later stage but the actual value at the time. Since your input field has value attribute set to empty string, this is all you will ever get no matter how many times you execute the function later.
In order to get value of the input at the time of calling your method you would have to move it into the function itself.
But as I mentioned earlier your code is overall structured poorly so allow me to provide a few suggestions.
button of type submit by default executes submission of the form if placed within the form; you are not taking advantage of that (this has benefits such ability to submit form with "Enter" key e.g.
placing <script> in the middle of your document is poor choice as it blocks rendering of the rest of the document. Best options are to place it either within <head> when used with defer attribute or at the end of the document just before closing </body> tag.
Nesting your function within each other has not benefit here. You can easily define them independently and call one within the other if needed.
heading element <h4> cannot appear within <p> tag
Example
<!DOCTYPE html>
<html>
<head>
<title>Madder Libs</title>
</head>
<body>
<form action="/" onsubmit="return showThis()">
<div>
<label for="cloth">Piece of clothing:</label>
<input id="cloth" type="text" value="" />
</div>
<div id="madlibs"></div>
<div>
<button type="submit">Show Message</button>
</div>
</form>
<script>
// let's get references to our elements, so we don't have to
// do it multiple times
let clothes = document.getElementById('cloth');
let madlibs = document.getElementById('madlibs');
// let's define our functions
function display(message) {
let sayThis = `I wear a ${message.a} on sundays.`;
return sayThis;
}
function showThis() {
const clothesValue = clothes.value;
let libs = {
a: clothesValue,
/*b: firstBodyPart,
c: secondBodyPart,
d: verbOne,
e: thirdBodyPart,
f: verbTwo,
g: firstNoun,
h: secondNoun,
i: verbThree,*/
};
madlibs.innerHTML += "<br/>" + display(libs);
return false;
}
</script>
</body>
I have two forms on a page containing Google captcha code, but only one code works. Does anyone know if you can use the same code with the same key on two forms on the same page?,
Thks,
Yes, you can. But you have to explicitly render the widget as mentioned on the developer guide
you should use something like this on your front end(taken from the developer guide):
<html>
<head>
<title>reCAPTCHA demo: Explicit render for multiple widgets</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
<div id="example1"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<form action="javascript:grecaptcha.reset(widgetId2);">
<div id="example2"></div>
<br>
<input type="submit" value="reset">
</form>
<br>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<form action="?" method="POST">
<div id="example3"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
I just wanted a HTML snipped which I can insert multiple times, each time displaying another captcha. Also, I did not want to take care for specific IDs assigned to the containers, which would be very annoying when multiple formulars still appearing on one page will be designed and rendered independently. Here is my solution.
<div class="g-recaptcha"></div>
<script type="text/javascript"><![CDATA[
function renderCaptchas() {
var captchaNodes = document.getElementsByClassName('g-recaptcha');
for (var i = 0; i < captchaNodes.length; i++) {
var captchaNode = captchaNodes[i];
if (!captchaNode.captchaRendered) {
captchaNode.captchaRendered = true;
grecaptcha.render(captchaNode, {"sitekey": "YOUR_SITE_KEY"});
}
}
}
]]></script>
<script src="https://www.google.com/recaptcha/api.js?onload=renderCaptchas&render=explicit" async="async" defer="defer"></script>
Can i update a textarea field with custom text and text from a text field?
For example:
i have a form with text field and textarea.. when i enter "Samsung" in text field, textarea field will show this: I want a Samsung phone. For LG will show I want a LG phone.
Is this posible?
Thanks!
One very simple way using javascript :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function update(elem) {
document.getElementById('textareaDescription').value = " I want a " + elem.value + " phone";
}
</script>
</head>
<body>
Phone : <input type="text" onchange="update(this)">
<br>
Description : <textarea name="" id="textareaDescription" cols="30" rows="10"></textarea>
</body>
</html>
Using the onchange event, the textarea will be updated once you lose focus (and changed!) the input.
I am new to jquery mobile, and am having problems getting content I have inserted dymically using pageinit to display on the first time of the form response page. It displays on subsequent refreshes of the page. I also don't want the content to cache.
I need to use querystring values like ?blah=1&blah=2 as I use these in my call to an external json file.
How should I be doing this? If I use rel="external", and setting ajax to false, I have problems with issues on android. So using pageinit in the header, how do I make the dynamically loaded content (in the example, the time in seconds) in the 2nd page display first time round?
I have simplified the problem into test pages below.
Expected behaviour. When you click on the submit button of the form you go through to the 2nd page which should display the no of seconds taken from datetime
Actual behaviour. The seconds/time does not display on the 2nd page until the page is refreshed.
Elsewhere, I have come across the suggestion to put the pageinit code into the div itself, however this has caused the content to cache on android (ie the no of seconds remains the same), so I don't want to do this.
Any ideas on how I should approach this would be much appreciated
Sample code
=======
Page 1 - form
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="content" data-theme="b">
<form action="page_2.htm" method="GET" id="form1" name="form1">
<input type="hidden" name="seconds" value="">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</form>
</div>
</div>
</body>
</html>
===
Page 2 form response page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-add-back-btn="true">
<div id="job" data-role="content">
</div>
</div>
</body>
</html>
===
custom javascript file called /scripts/myinit.js (included in both pages above)
$('#page1').live('pageinit', function(event) {
var seconds = new Date().getTime();
$('input[name=seconds]').val(seconds);
});
$('#page2').live('pageinit', function(event) {
var querystring = location.search.replace( '?', '' ).split( '&' );
var queryObj = {};
for ( var i=0; i<querystring.length; i++ ) {
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
queryObj[name] = value;
}
var seconds = queryObj["seconds"];
$('#job').append("seconds=" + seconds);
});
try changing pageinit by pageshow. i had the same problem and it worked for me
Link to the external file like this:
HTML --
I'm a Link
JS --
$(document).delegate('#external-link', 'click', function () {
$.mobile.changePage('/path/to/file.html', { reloadPage : true });
return false;
});
Setting the reloadPage option for the changePage() function will allow the external page to be refreshed rather than loading the cached version. Since the external page will be refreshed, the pageinit code for it will run when it's initialized and your code should function properly.
Documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html