I am trying to get a single form value from a posted form using HTML and Jquery could anyone tell me what I am doing wrong with the following script.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form id="target" action="1.html">
<input type="text" value="Hello world">
<input type="submit" value="Go">
</form>
<script>
$( "#target" ).submit(function( event ) {
var input = $("#target :input[text]");
alert( input);
console.log(input)
event.preventDefault();
});
</script>";
</body>
</html>
I can only seem to return an object but I cant display this using alert or the console.log feature.
var input = $("#target :input[text]");
should be:
var input = $("#target input[type='text']").val();
Wrap your submit event in ready function
$(document).ready(function(){
$( "#target" ).submit(function( event ) {
var input = $("#target input[text]").val();
alert( input);
console.log(input)
event.preventDefault();
});
});
Related
I have tried the tutorial are there, but still could not work, what's wrong with my code?
Parent Page Script:
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
$(function() {
var money = 20000;
$("#iframe1").contents().find("#nominal").on("change keyup", function() {
var input = $(this);
// remove possible existing message
if( input.next().is("form") )
input.next().remove();
// show message
if( input.val() > money )
alert('Hello');
});
});
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
Iframe script:
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
please tell me what was wrong, thanks advance.
In your HTML page
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
var money = 20000;
function my_custom_function(input)
{
// remove possible existing message
if( input.next().is("form") ) input.next().remove();
// show message
if( input.val() > money ) alert('Hello');
}
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
In your iframe code
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<script>
$(function() {
$("#nominal").change("change", function() {
parent.my_custom_function($(this));
});
$("#nominal").change("keyup", function() {
parent.my_custom_function($(this));
});
});
</script>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
Hope this trick will be helpful to you.
You have two possible scenarios:
if you can modify iframe page;
if you can't.
Your problem is that when your javascript run, the content of iframe could be not available, so JQuery cannot "attach" to child controls.
If you can change your iframe code, you can add this script to your iframe page
window.onload = function() {
parent.iframeLoaded();
}
and obviously on the parent page you must change your code to
$(function() {
var money = 20000;
window.iframeLoaded = function() {
$("#iframe1").contents().find('#nominal').on('keyup', null, function(event) {
var input = $(this);
// show message
if( input.val() > money )
alert('Hello');
});
}
});
});
If you instead cannot change iframe html, you cannot bind to keyup event of controls but you can bind to iframe one, so in this case you need to bind keyup of iframe and then filter for #nominal originated event, and your code should be like this
$(function() {
var money = 20000;
$("#iframe1").contents().on('keyup', null, function(event) {
if(event.target.id === 'nominal'){
var input = $("#iframe1").contents().find('#nominal');
// show message
if( input.val() > money )
alert('Hello');
}
});
});
I'm trying to use sth like onchange but with no results.
i've been searching for a while but i didn't find.
HTML
<input type="text" id="myInput" />
<div id="button"></div>
JS
<script>
$("#button").on('click', function()
{
$("#myInput").val("new value");
});
$("#myInput").on('change keyup paste blur oncut propertychange', function()
{
//my code
});
</script>
I can't find a event where a JQ action is recognized like a changing in my input...
Thank you for your help!
Did you put these js code part into the $(document).ready(function(){
});
I think because these js is not loaded when the webpage is completed loaded.
$(document).ready(function(){
$("#button").on('click', function()
{
$("#myInput").val("new value");
});
$("#myInput").on('change keyup paste blur oncut propertychange', function()
{
console.log('event detected');
});
});
<html>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type="text" id="myInput" />
<div id="button"></div>
</body>
</html>
I have the following jQuery where I attempt to use .click() to count the symbols in a text input. Clicking on the button does not do anything.
Please help, thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text"id="id1"></input></div><br/><br/>
<button onclick="#"id="id2"> Count Symbols</button>
<p id="id1"></p>
<script>
$( document.#id1 )
.click(function() {
$( document.#id1 ).append( $( "#id2" ) );
var n = $( "#id2" ).length;
$( ).text( "There are " + n + " symbols.");
})
</script>
</body>
</html>
You can do it like this:
$(document).ready(function(){
$('#id2' ).click(function() {
var len = $('#id1').val().length;
$('#id3').text('There are ' +len+ ' symbols');
});
}); //END document.ready
jsFiddle Demo
Revised HTML:
<input type="text" id="id1" />
<br/><br/>
<button id="id2"> Count Symbols</button>
<p id="id3"></p>
I want activate textarea like on facebook wall. I was tried .focus() but not working. Is there any way to click on it with javascript or visualbasic ?
check this example:
$( document ).ready(function() {
$("#text_area_id").focus();
});
JSfiddle
<html>
<head>
<script>
window.onload = function() {
document.getElementById("textArea").focus();
};
</script>
</head>
<body>
<form>
<input type="textarea" id="textArea">
</form>
<body>
</html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script language='javascript'>
$( document ).ready(function() {
$("#result").html("Click Now");
$('#tarea').focus(function(){
$("#result").html("Textarea Clicked");
});
});
</script>
<body>
<textarea rows="4" cols="50" id='tarea'></textarea>
<p id='result'></p>
</body>
</html>
document.getElementById('textAreaId').focus(); should work.
If you want the textarea to be focused when the page loads you could add an autofocus attribute to the html element as well
I'm having an issue using jQuery 1.4.2 .delegate function with IE 9. I would love to use the latest version of jQuery and just use the .on function but I am forced to use 1.4.2 due to a vendor product.
My goal is to have a function fire off when the text field changes. So if it's empty and it gets set to "test" then a function will run.
Here's what I'm trying to do, the alert never shows...
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function test(result) {
var result = result;
$("#txtTest").val($("#txtTest").val() + result);
}
$("body").delegate("#txtTest", "change",function() {
alert( "Handler for .change() called." );
});
</script>
</head>
<body>
Test: <input type="text" id="txtTest"/><br />
<input type=button value=Test name="Submit" id="btnTest" onclick="test('testing the call')" />
</body>
</html>
I have also tried using myCustomEvent:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function test(result) {
var result = result;
$("#txtTest").val($("#txtTest").val() + result).trigger("myCustomEvent");
}
$("body").delegate("#txtTest", "myCustomEvent",function() {
alert( "Handler for .change() called." );
});
</script>
</head>
<body>
Test: <input type="text" id="txtTest"/><br />
<input type=button value=Test name="Submit" id="btnTest" onclick="test('testing the call')" />
</body>
</html>
Thanks in advance
The problem is that you named your submit button "Submit". This is a no-no for HTML!! Browsers default to using internal submit functions when buttons are named submit. see [*] below.
Also, a val() inject doesn't trigger the change() event, so we need to call that manually.
Change Submit to xSubmit and trigger the change event at the end of the chain manually and it works. It should also be in a dom ready wrapper:
html
Test: <input type="text" id="txtTest"/><br />
<input type="button" value="Test" name="xSubmit" id="btnTest" onclick="test('testing the call')" />
js
$(function() {
$("body").delegate("#txtTest", "change", function() {
alert( "Handler for .change() called." );
});
});
function test(result) {
$("#txtTest").val($("#txtTest").val() + result).change();
}
demo:
http://jsfiddle.net/at7eoarL/1/
Further Reading: * - https://issues.apache.org/jira/browse/TAP5-947