I have a page with multiple forms calling the same javascript function. Each form posts a picture to a given database item and has an ID that references that database item (e.g. id="form123"). When the user selects a picture, they should get a "spinner" (indicating file uploading) and then the form should submit.
Problem is, no matter which form gets an onchange event (from selecting a picture on the client), the browser always passes variables for the first form with "onchange" on the page.
function submitForm(formId, spinner) {
console.log(formId);
console.log(spinner);
setDisplay(document.getElementById(spinner), 'inline-block');
return document.forms.formId.submit();
};
function setDisplay(element, value) {
return element.style.display = value;
};
<form method="post" name="form28236" id="form28236" class="submit-image" action="/image/new" enctype="multipart/form-data">
<input type="hidden" name="on" value="28236">
<label for="image-file">Add photos</label>
<input type="file" id="image-file" name="image" onchange="submitForm('form28236', 'spinner28236')">
<div id="spinner28236" class="spinner"></div>
</form>
Console:
form28330
spinner28330
Note that the console is not logging the same form ID or spinner id that should be passed to the javascript function. The result is that the "spinner" displays for the wrong form (the first on the page) and no form actually gets submitted.
The problem with the form submit is in this line:
document.forms.formId.submit();
This syntax would work if your form was actually named "formId". However, instead you have a variable formId that holds the respective id, so you have to do it like this:
document.forms[formId].submit();
Maybe it becomes clearer when you see that your variable only substitutes the actual name. This would also work to access a specific form:
document.forms['form28236'].submit();
So the problem was that I didn't have a unique ID for the <input type="file"> and the corresponding <label for="unique-id">. I was using the <label> as a button for the input (and hiding the input). But since it wasn't a unique ID, the browser was just going with the first <input> with that ID on the page.
Related
I basically have a search box, I am trying to get the value inserted and use on a separate /results.htm screen via the submit button. I've been able to get and process the results within the same page; but I am trying to do this after redirecting to a new page
/search.html
<script>
jQuery(document).ready(function() {
jQuery("#submit").click(function() {
var ZipSearch = jQuery("#Zipcode").val();
});
});
</script>
<div class="search_bar">
<form action=""><input type="text" name="Zipcode" id="Zipcode" value="" maxlength="5" placeholder="Zipcode">
<input type="button" name="submit" id="submit" value="Submit"/></form>
</div>
Want to keep input value content from /search.htm within a variable on next page, separate, /results.htm
How can I keep the user input value and use on my separate 'results' page?
Remove all the JavaScript from search.htm. There's no point in writing custom software to do things HTML has built-in.
Set the action of the form to the URL of the second page (action="/results.htm").
Change the button to a submit button (type="submit")
Read the data from the query string (location.search in JavaScript or $_GET in PHP).
I'm using struts 1.2 with angular js to send a jsp form, I am having problems setting the value of an input field. Here's the javascript code to set the default value of the field "city" that comes from the server into the jsp when the page loads, this is because i cannot use the html struts tag to pre-populated because it does not support the angularjs attributes i need to use in the input field:
<script>
$(function() {
var defaultCity = $("[name='city']").val();
$('#city').val(defaultCity);
});
</script>
here's the jsp section:
<body ng-controller="TypeaheadCtrl">
<form name = "LocationForm" method="POST" action="someaction.do">
<div class='container-fluid typeahead-demo' >
<div class="section">
<label class="field prepend-icon">
<input type="text" ng-model="asyncSelected" uib-typeahead="address for address in getLocation($viewValue)" id="city" class="gui-input" placeholder="City">
<span class="field-icon"><i class="fa fa-envelope"></i></span>
<html:hidden property="city"/>
</label>
</div><!-- end section -->
</div>
......
</form>
The problem with this is that once i input something in that field to override what's pre-populated, the text doesn't take, the struts action gets the original value the page loaded with only. So i tried to add the following in the jsp to see if at the time of submitting the form, the value can be changed, here's the code:
//Needed to override load value at submition time
$("[name='LocationForm']").submit(function(e) {
var cityValue= $("[name='city']").val();
$('#city').val(cityValue);
});
However it didn't work either, debugging into it would still return the original value even though i can see in the browser the new value i typed.
If on the other hand, i remove all the javascripts, then the jsp will send the newly typed value, however, it won't set the default value of the field at load time, i need both things to happen, load the default value and if i type something different in the input field, then the new value should be submitted.
Can someone please tell me what am i missing to be able to submit whatever is typed on the field on submission and not have always the default value sent over?
Thanks in advance
Resolved, apparently the problem was the binding, i put the submit function of the javascript code at the bottom of the page and it picked it up.
So I have javascript code to prepend "tag:" or "vendor:" before every search term, but I wanted to hide that from the user, so I created a hidden input field to send the code but it's not properly prepending the "tag:" and "vendor:" before every word. and instead inputs the entire string, then the search terms.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="red" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
</script>
Here's what the Url looks like with the code
http://zzz.co/search?type=product&q=tag%3A+OR+vendor%3A&red=tote#fullscreen=true&search=home
Here's what it's supposed to look like.
http://zzz.co/search?type=product&q=tag%3Atote+OR+vendor%3Atote#fullscreen=true&search=home
You're getting an empty value and inserting it here:
$(document).on('submit','#search-home',function(){
var searchtext = $('.searchtext').val(); // <- HERE
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
What you should be doing is getting the user given query, which is the input you named "red".
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="red"]').val();
$('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});
With the above fix, your URL will look similar to:
http://zzz.co/search?type=product&q=q=tag%3Atote+OR+vendor%3Atote&red=tote.
I do not know where you're getting your hashbang(#) from, but I would assume it will append at the end as before.
If you want to get rid of the red=tote part, you have a few options. Emptying the value via $('input[name="red"]').val(''); will make it appear in your url as red=. If you want it gone entirely, you should use $('input[name="red"].remove();.
I would also advise having your "on" hook attached to the form, not the entire document. This is just a good practice to avoid using unnecessary resources as this hook will bubble every time a form is submitted, regardless of the selector. Instead, consider:
$('form#search-home').on('submit', 'button[type="submit"]', function() { ... };
That way it will only bubble when a submit event happens on that specific form, greatly reducing the possible instances those resources are used.
Question: How can you send a form with Javascript if one form input has the name submit?
Background: I am redirecting the user to another page with a hidden HTML form. I cannot change name on the (hidden) inputs, since the other page is on another server and the inputs need to be exactly as they are. My HTML form looks like this:
<form id="redirectForm" method="post" action="http://www.example.com/">
<input name="search" type="hidden" value="search for this" />
<input name="submit" type="hidden" value="search now" />
</form>
I use the following javascript line to send the form automatically today:
document.getElementById('redirectForm').submit();
However, since the name of one input is "submit" (it cannot be something else, or the other server won't handle the request), document.getElementById('redirectForm').submit refers to the input as it overrides the form function submit().
The error message in Firefox is: Error: document.getElementById("requestform").submit is not a function. Similar error message in Safari.
Worth noting: It's often a lot easier to just change the input name to something other than "submit". Please use the solution below only if that's really not possible.
You need to get the submit function from a different form:
document.createElement('form').submit.call(document.getElementById('redirectForm'));
If you have already another <form> tag, you can use it instead of creating another one.
Use submit() method from HTMLFormElement.prototype:
HTMLFormElement.prototype.submit.call(document.getElementById('redirectForm'));
I have the worlds most simple javascript function:
fnSubmit()
{
window.print();
document.formname.submit();
}
Which is called by:
<button type="button" id="submit" onclick="fnSubmit()">Submit</button>
All is well and good, the print dialog shows up, however after printing or canceling the print I get the following error:
"document.formname.submit is not a function"
My form is defined as follows: (obviously I am not using formname in the actual code but you get the idea)
<form name="formname" id="formname" method="post" action="<?=$_SERVER['SCRIPT_NAME']?>">
Obviously I am not trying to do anything special here and I have used similar approaches in the past, what in the world am I missing here?
In short: change the id of your submit button to something different than "submit". Also, don't set the name to this value either.
Now, some deeper insight. The general case is that document.formname.submit is a method that, when called, will submit the form. However, in your example, document.formname.submit is not a method anymore, but the DOM node representing the button.
This happens because elements of a form are available as attributes of its DOM node, via their name and id attributes. This wording is a bit confusing, so here comes an example:
<form name="example" id="example" action="/">
<input type="text" name="exampleField" />
<button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>
On this example, document.forms.example.exampleField is a DOM node representing the field with name "exampleField". You can use JS to access its properties such as its value: document.forms.example.exampleField.value.
However, on this example there is an element of the form called "submit", and this is the submit button, which can be accessed with document.forms.example.submit. This overwrites the previous value, which was the function that allows you to submit the form.
EDIT:
If renaming the field isn't good for you, there is another solution. Shortly before writing this, I left the question on the site and got a response in the form of a neat JavaScript hack:
function hack() {
var form = document.createElement("form");
var myForm = document.example;
form.submit.apply(myForm);
}
See How to reliably submit an HTML form with JavaScript? for complete details
Given that your form has both an id and a name defined, you could use either one of these:
With the form tag's id:
document.getElementById('formname').submit();
With the form tag's name attribute:
document.forms['formname'].submit();
Try this:
fnSubmit()
{
window.print();
document.getElementById("formname").submit();
}
The most likely culprit is IE confusing JavaScript variables, ids, and names. Search in your source for something sharing the name of your form.
Place a input button inside your form.
Give tabindex="-1" on it.
Make It invisible using style="display:none;".
Like This
<input type="submit" tabindex="-1" style="display:none;" />