This form automatically transfers the user to another form. The question i have is that when the script block is placed after the form block the code works. But when I swap them; so that script is above form, then the form doesn't work.
Can anyone tell why?
Works:
<form id="ponyo_form" action="formB.html" method="POST">
<input type="text" name="id" value="10" />
<input type="text" name="transfer_email" value="someone#aol.com" />
</form>
<script type="text/javascript">
document.getElementById("ponyo_form").submit();
</script>
This won't work:
<script type="text/javascript">
document.getElementById("ponyo_form").submit();
</script>
<form id="ponyo_form" action="formB.html" method="POST">
<input type="text" name="id" value="10" />
<input type="text" name="transfer_email" value="someone#aol.com" />
</form>
The reason this doesn't work when you have the code before the form, is that the code is run when as it is parsed along the page. So it is attempting to find a form called ponyo_form, which doesn't yet exist in the DOM.
To fix this, either place it after the form, or wrap it on an onload function.
IE:
window.onload = function()
{
document.getElementById("ponyo_form").submit();
}
Related
src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
$(document).ready(function() {
$("#testForm").submit(sendPost)
});
function sendPost() {
alert('Submitted');
}
<form id="testForm">
<input type="text" ID="txtDescription"><br>
<input type="submit" value="Save" />
</form>
Clicking the Submit button does not fire the alert. What am i missing?
The original code had the reference to jquery lib inside the javascript, without script tags. That does not load the external resource. Since jquery doesn't load, the click event doesn't get registered.
One solution to this issue is to reference the external js file in your HTML, with a <script> tag:
HTML Solution
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="text" ID="txtDescription"><br>
<input type="submit" value="Save" />
</form>
and remove the reference from your .js
$(document).ready(function() {
$("#testForm").submit(sendPost)
});
function sendPost() {
alert('Submitted');
}
Jquery Solution
A solution for jquery to load some other js file, if you don't want to put <script src=... in the HTML, is to put the following in your .js. This requires that jquery is already loaded.
$(document).ready(function(){
$('body').append($('<script src="/path/to/script/foo.min.js"></script>'));
});
https://stackoverflow.com/a/42378530/209942
Your code works as is. You have to click on the button to submit it. But looking at the I believe, you want to submit the the form on document ready.
You can do it in following way.
$(document).ready(function() {
$("#testForm").submit(sendPost);
$('#submit').click();
});
function sendPost() {
alert('Submitted');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="text" ID="txtDescription"><br>
<input id="submit" type="submit" value="Save" />
</form>
I want to target any input of text type belonging to a form of a specific name. Because the form will have numerous input fields, I don't want to target a particular input name, but rather, capture the blur (or focusout) event for any input[type="text"] occurring within the form wrap.
My present code, which doesn't work:
$( document ).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
alert($(this).val());
});
});
I answered my own question. Because the code sample is essentially correct, there is no need for multiple people to try to solve the unsolvable. The problem had something to do with where I placed the javascript code, and nothing to do with structure or syntax of the code, itself.
The way the event "change" works is what it sounds like you want. An event handler doesn't actually fire when the input is clicked or if text is keyed in, it fires when text is entered and then the input loses focus.
In the following Snippet the same selector you are using is delegated to the "change" event. You'll notice that the ['tax_form'] has 4 text inputs yet the last one is the only one working. The reason is because if an input isn't assigned a type attribute, then by default type is 'text". So when using a selector based on an input's type="text", you must keep that in mind. So if you are in full control of your HTML, make sure that each input has a type attribute with an explicit value, or use classes which is better IMO.
SNIPPET
$(document).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("change", function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='notIt'>
<fieldset>
<legend>Not a Tax Form</legend>
<input>
<input type="text">
<input>
<input type="text">
</fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
<fieldset>
<legend>Still not a Tax Form</legend>
<input type="text">
<input>
<input type="text">
<input>
</fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
<fieldset>
<legend>Tax Form</legend>
<input class='klass' value='TEXT INPUT BY DEFAULT'>
<input value='TEXT INPUT BY DEFAULT'>
<input name='text' value='TEXT INPUT BY DEFAULT'>
<input type='number'>
<input type='text' value='THIS ONE COUNTS'>
</fieldset>
</form>
Previous commentators were right, that my code was fine as-is. I took my selector code out of a header script file, and placed it at the bottom of my footer script, and it worked as expected.
In the end, it wasn't my code that was the problem, but rather something to do with where I placed it. Possibly other javascript or jQuery code stepping on it.
Your code should work fine. Here's a working example of it to prove it's working. The tax_form fields should console.log() on blur. The another_form should not.
$(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tax Form</h1>
<form name="tax_form">
<input type="text" name="first" value="first">
<input type="text" name="second" value="second">
<input type="text" name="third" value="third">
</form>
<h1>Another Form</h1>
<form name="another_form">
<input type="text" name="first2" value="first2">
<input type="text" name="second2" value="second2">
<input type="text" name="third2" value="third2">
</form>
I have a form that takes a users input and redirects to a the window to a URL with their input appended to the end.
Here is my HTML
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" value="Search" onclick="searchWiki();" />
</form>
The javascript it runs
function searchWiki() {
alert("Form Works!");
var siteQuery = $('#query-string').val();
window.location.href = "http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery;
alert("SECOND MESSAGE");
}
The issue is that it does not redirect. It only appends the 'siteQuery' variable to the end of the current URL. I know its calling the javascript because I see both alerts. I'm not sure what I'm doing wrong here.
There reason is because you using type="submit", which submits and sends an GET header to the default action parameter (current page).
Change the type="submit" to type="button".
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="button" value="Search" onclick="searchWiki();" />
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
function searchWiki() {
alert("Form Works!");
var siteQuery = $('#query-string').val();
alert(siteQuery);
window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
alert("SECOND MESSAGE");
}
</script>
I tried the code with type="submit" and it's alerting, but not redirecting, because the submit is prioritized before the window.location change, thats the reason it just appends a ?queryString=value to the current url.
If you change the type like showed in the code above, it's working perfectly.
The issue is due to the fact that you're actually submitting your form, and the redirection is lost as the form submission occurs first. There are two easy ways to fix this:
Change the type of the input from submit to button, OR
Stop the submission of the form by returning false from your function and changing the call of the function to onclick="return searchWiki();"
jsFiddle example (1)
jsFiddle example (2)
Can't you just use assign?
window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
Check out: http://www.w3schools.com/js/js_window_location.asp
Use default action and method attributes instead
The HTML form element provides the mechanism for doing this out of the box.
<form id="wikiForm" action="http://wiki.voipinnovations.com/dosearchsite.action" method="GET">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" value="Search" />
</form>
But, if you must use javascript, make this change:
From:
window.location.href = "…";
To:
window.location.assign("…"); // or
window.location = "…"
This is because location.href is a read-only property and location.assign() is the proper method for setting the new location to be loaded. You may also directly assign a string to the location object:
Whenever a new value is assigned to the location object, a document
will be loaded using the URL as if location.assign() had been called
with the modified URL.
Source: MDN
Change input type=submit to type=button
http://plnkr.co/edit/w4U7Sbm3XSKN8j3zUFMe?p=preview
<form id="wikiForm">
<label id="sideBarLabel">VoIP Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="button" value="Search" onclick="searchWiki();" />
</form>
I have a page where you can view a hotel's information. On this page is a little form to search for room availability for the hotel page you are on.
<form id="form1" name="form1" action="search.asp" method="POST">
<input type="hidden" id="Hotel" name="Hotel" value="<%= HotelID %>">
Arrive: <input value="<% strURLBookingDate %>" type="text" id="ArrivalDate" name="ArrivalDate">
Depart: <input value="<% strURLBookingDate2 %>" type="text" id="DepartureDate" name="DepartureDate">
<input type="submit" name="btnHotelSearch" value="Search This Hotel">
<input type="submit" name="btnHotelSearchAll" value="Search All Hotels">
</form>
But I also need to add a button to the form that will allow me to search all hotels if I click it. For that to happen, I just need to set the hidden input value named "Hotel" to 0 when the button is clicked.
How can I set that hidden value before the form is submitted when I click btnHotelSearchAll?
You can hook the click event on btnHotelSearchAll and then fill in the value:
document.getElementById("btnHotelSearchAll").onclick = function() {
document.getElementById("Hotel").value = "0";
};
Be absolutely certain there's nothing else on the page that has either the id or name "Hotel", and that you don't have any global variables you've declared with that name, because some versions of IE have bugs where they conflate name values and global variable names into the namespace they use for document.getElementById. Or, alternately, make the id on the hidden field a bit more unique (the name can stay as it is so you don't have to change the backend; the id is only client-side, the name is what's sent to the server). E.g., you can do this:
<input type="hidden" id="HotelField" name="Hotel" value="<%= HotelID %>">
^
and then change the code a bit:
document.getElementById("btnHotelSearchAll").onclick = function() {
document.getElementById("HotelField").value = "0";
// ^
};
Update:
Note that the code to hook up the button must run after the button has been put in the DOM. So with the code above, that means making sure that the script block is below the form in the page, like this:
<form ...>
....
</form>
...
<script>
...
</script>
If the script block is above the button, then the button won't exist yet as of when the script runs. This is one reason why it's frequently best to put scripts at the end of the body element, just before the closing </body> tag (more here).
If you really want the script above the button, you have to delay the call by making it an onload event handler or that sort of thing. But window.onload happens very late in the process of a page load (it waits for all images and other assets to load, for instance), long after your users may be interacting with your form, so usually best to do it sooner.
Off-topic: My standard note that a lot of this stuff is made earlier and more robust by using a decent JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. jQuery, for instance, will deal with the IE bugs in document.getElementById for you so you don't have to worry about the conflation problem.
If you'd like to use jQuery, try the following.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript" >
$(function(){
$('#btnHotelSearch').click(function(){
$('#Hotel').val(0);
});
});
</script>
using onclick attribute to call javascript function that will set the hidden field value
<input type="submit" name="btnHotelSearchAll" value="Search All Hotels" onclick="SetHotelID();">
<script>
function SetHotelID()
{
$('#Hotel').val('0');
}
</script>
Note I am using Jquery
Here you go, let me know if this works...
<form id="form1" name="form1" action="" method="POST">
<input type="hidden" id="Hotel" name="Hotel" value="<%= HotelID %>">
Arrive: <input value="<% strURLBookingDate %>" type="text" id="ArrivalDate" name="ArrivalDate">
Depart: <input value="<% strURLBookingDate2 %>" type="text" id="DepartureDate" name="DepartureDate">
<input type="submit" name="btnHotelSearch" value="Search This Hotel">
<input type="submit" name="btnHotelSearchAll" value="Search All Hotels" onclick='document.getElementById("Hotel").value="0"'>
I would like to fill out and a submit a form explicitly with JavaScript. First, I thought I had to use window.open but it's certainly wrong because if it gets loaded, the left of my scripts written for example in a html file would be ignored.
Do I have to create a .js file and fire that one?
uhhhh...not exactly sure how this relates to injections...you can do this with jQuery in a handful of lines of code.
say you have the following form:
<form id="theForm" name="testForm" action="whatever.php" method="get">
<input type="text" name="cow" />
<input type="text" name="sheep" />
<input type="text" name="pig" />
<input type="submit" value="Submit" />
</form>
If you have jQuery loaded, all you need to do is this:
function submitForm(){
var cowVal="Cows go moooo!";
var sheepVal="Sheep go baaaaaaah!";
var pigVal="pigs go sooooeeeeeeeh!";
$("#theForm input").eq(0).val(cowVal).next().val(sheepVal).next().val(pigVal).parent().submit();
}
Hope that helps!