I'm having problem with the following code,
The submit button is not binding to the jQuery script and the console is not printing anything. I can't figure out what the problem is..
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
</head>
<body>
<script>
// Variable to hold request
var request;
// Bind to the submit event of our form
$("#show").submit(function(event){
console.log ("Im here");
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
</html>
You code is not working as at the time the script is interpreted and executed, the form does not exist in the DOM. Wrap your code in document-ready handler.
Specify a function to execute when the DOM is fully loaded.
Use
$(function () {
//Your code
})
OR, You can place the script tag below the form element
It is a silly mistake and the only thing that you have to change is to wrap the whole code in $(document).ready(function(){}); .
The updated code is :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script>
$(document).ready(function(){
var request;
$("#show").submit(function(event){
console.log ("Im here");
});
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
May be you can modify id form to "show123" and run again. if it's work => duplicate id show in page.
Glad help for you.
Related
I am using a third party software which uses the Prototype library. It was working fine before the latest update (Ver 68 and above) of Firefox. It is still working in the other browsers. I tried debugging and whenever I introduce a breakpoint and go step by step the code works. I found the following line of code which if I step over and let the code run the problem is solved. But if I let the code run before this the problem occurs.
return formView.submit();
Any idea? I am ok with a hack even.
Update:
I created a MRE as suggested. Here is the link https://brandsoftinfotech.com/test/firefox-frame-submit/
I have created 2 forms, one in the parent page and one in the frame. On submitting the parent page form the frame page form gets submitted and writes the data in a log file. And the form page when submitted just shows the data from that log file.
index.html
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction() {
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
}
</script>
</head>
<body>
<form action="index-submit.php" onSubmit="submitFunction()">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
frame-box.html
<form action="frame-submit.php" id="myForm">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
</form>
This works fine on Chrome, MS Edge but doesn't work on Firefox.
I am not sure if solving this would solve my problem, but at least this should work for my library code to work.
I'm mildly surprised to see that it works on any browser. By allowing the parent's form submission to occur, you're tearing down the page, which means tearing down the iframe, and any requests that may be underway can be aborted (or if not quite started, never started).
I'd probably switch to ajax rather than doing the actual form submission.
But if you want to do the form submission, to do this reliably you'll have to wait for the frame's submission to complete before doing the parent submission. The easy way to do that is to have the frame submission respond with a small page with JavaScript on it that tells the parent it's finish:
<!DOCTYPE html>
<html>
<body>
<script>
if (parent && parent.formCallback) {
parent.formCallback();
}
</script>
</body>
</html>
Then the parent page is something like:
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction() {
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
return false; // <−−−−−−−− cancel submission
}
function formCallback() { //
document.getElementById("parentForm").submit(); // <−−−−−−−− Submit on callback
} //
</script>
</head>
<body>
<!-- vvvvvvvvvvvvvvv−−−−−−−− Added ID -->
<form id="parentForm" action="/index-submit" onSubmit="return submitFunction()">
<input type="hidden" name="index-field" value="x">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
But you may get away with just detecting the change in location in the iframe. That would involve just changing the parent page as indicated:
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction(form) { // <−−−−−−−− Added parameter
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
// Wait for the location of the iframe window to change
setInterval(function() {
if (String(myFrame.contentWindow.location).includes("frame-submit")) {
// Frame's form submitted, we can submit ours
form.submit();
}
}, 100);
return false; // <−−−−−−−− cancel submission
}
</script>
</head>
<body>
<form action="/index-submit" onSubmit="return submitFunction(this)">
<!-- ^^^^−−−−−−−−− added argument -->
<input type="hidden" name="index-field" value="x">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
I wouldn't expect that to work if the form in the frame does a significant upload (though I could be wrong about that).
I written an onClick function in input tag type button. But the function is not working when the button clicked.
attaching my input tag and javascript function with this:
function funcBookcar() {
alert("booking");
}
<input type="button" name="sbmt" align="center" id="sbmt" class="bcar" value="SUBMIT" onClick="funcBookcar()">
As you can see in the snippet below your code works so I think you only put the js code in the wrong place.
You have two options:
Link your javascript file to your html code;
Write your javascript inside your html code.
<head>
<!--
Link your code
<script type="text/javascript" src="../javascript/test.js"></script>
-->
<script>
//Write your code in html file
function funcBookcar()
{
alert("booking");
}
</script>
</head>
<body>
<input type="button" name="sbmt" align="center" id="sbmt" class="bcar" value="SUBMIT" onclick="funcBookcar()">
</body>
Hope this help :)
<html>
<head>
<script>
function calledHere(value) { console.log(value); }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
From the above code, in the onclick call passed wrongly the form name without quotes. But, the output displays the whole form DOM element. Don't know how it got the form element.
Any help will be more useful for my learning on javascript side.
Thanks in Advance!!!
You've already got the form element in your 'value' variable. The reason you're seeing the element's html logged is because console.log calls the .toString() method on the element.
This code demonstrates that 'value' references the form element:
<html>
<head>
<script>
function calledHere(value) { value.style.backgroundColor = "red" }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
http://jsfiddle.net/John_C/KZ3KR/
This answer explains the scope of the variable; why you can pass the form name to the function: https://stackoverflow.com/a/1416157/1588990
I have this code running on jsfiddle, but I can't get it to run locally on my browser. Maybe someone can spot something I am not doing right? Thanks in advance!
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$('.main input').click(function() {
var value = $(this).val();
var input = $('#key_select');
input.val(value);
return false;
});
</script>
</head>
<body>
<input id="key_select" type="text" name="keyword" disabled/>
<div class="main">
<input type="button" name="honda" value="honda" />
<input type="button" name="mercedes" value="mercedes" />
</div>
</body>
</html>
Place your code inside document ready handler
<script type="text/javascript">
$(function(){
$('.main input').click(function() {
var value = $(this).val();
var input = $('#key_select');
input.val(value);
return false;
});
});
</script>
Your problem is that your logic is executing before the html element exist on the page so it does nothing.
Placing the code on document ready fix this issue as this handler is executed when DOM element tree was constructed.
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.
You forgot document ready, the element isn't rendered yet when you're trying to get it, so you have to either wait for the document to be ready, or move the script below the elements so that they are available when the script is running.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('.main input').click(function() {
var value = $(this).val();
var input = $('#key_select');
input.val(value);
return false;
});
});
</script>
</head>
<body>
<input id="key_select" type="text" name="keyword" disabled/>
<div class="main">
<input type="button" name="honda" value="honda" />
<input type="button" name="mercedes" value="mercedes" />
</div>
</body>
</html>
jsFiddle adds the DOM ready handler automatically when selected in the dropdown on the left
I have this code
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
I don't want the browser to request a new URL. That is why "onsubmit" has "return false;". This code works in Internet Explorer, but Firefox generates a new request. Any ideas what I am doing wrong?
FireBug changes between not wanting to acknowledge there is Javascript reference and showing the Javascript file without any errors... I will update this when i have more to add. I will try various thingsm e.g. try upload it to the net and see if FireFox behaves differently when not running JS on local disk.
Are you sure that you haven't got any errors?
I try with a simple html:
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
And a simple javascript called my-search.js in the same path of my html with the next code:
var my_Init = function(){
alert('Hello Onload');
}
var my_EventHandler_Action = function(){
alert('Hello OnSubmit');
}
And it works fine.
Can you show a live demo (with dropbox or something)?
Instead of using a submit button, try using a button and link the javascript function to that.