I am trying to get the actual string that is placed in a form action. The problem is when I do this, the action property resolves to an absolute path even though a relative path is in the HTML. How do I get the actual string that is in the action property?
Here is a sample of what I am referring to:
http://jsfiddle.net/MSY4s/
If you're already using jquery, I would use the .attr function rather than extracting the DOM element from the jQuery object. Like so:
$("form").attr("action");
That should give you literally what is in the action attribute. In the example you provided, that should look like "/somewhere". The second example in your jFiddle will show a full path since that's what is in the action attribute.
Relative URLs are always resolved to absolute ones on the base of the current document’s URL.
Try this:
Give both of your forms ids:
<form id="form1" action="/somewhere" method="post">
<input type="text" name="test" />
</form>
<form id="form2" action="https://fiddle.jshell.net/somewhere2" method="post">
<input type="text" name="test" />
</form>
Then using these ids you can get the action attribute of each form:
$('#form1').attr('action');
$('#form2').attr('action');
You can also set the action attributes using the same tags:
$('#form1').attr('action', '[New Action Value]');
$('#form2').attr('action', '[New Action Value]');
Hope this helps.
Related
Here is an HTML snippet to reproduce the problem:
<form id=foo action='https://[::1]/'>
<input type=hidden name=action value=xyz>
</form>
<script>
window.alert(document.getElementById('foo').action);
</script>
At first I was using jQuery .prop() so I thought that was the problem but it happens in pure JavaScript as well.
I'm expecting the result to be https://[::1]/ but for some reason it gives me [HTMLInputElement]. According to MDN, the action property of HTMLFormElement should be a DOMString reflecting the HTML action attribute, not an HTMLElement.
This behaviour is present in both Internet Explorer and Chrome so I don't think it's a bug with the browser's implementation. The HTML5 specification states:
The action IDL attribute must reflect the content attribute of the same name, except that on getting, when the content attribute is missing or its value is the empty string, the document's address must be returned instead.
Am I missing something here?
Here's what the specification says:
getter (RadioNodeList or Element) (DOMString name);
This means a form has properties referencing each input element by name: <input name="user"> will automatically define form.user. In your case, <input name="action"> causes form.action to be overridden, referencing that element instead of the form action attribute.
Just retrieve the attribute directly:
form.getAttribute("action");
Or rename your input:
<input name="control-action">
Use getAttribute()
alert(document.getElementById('foo').getAttribute('action'));
http://jsfiddle.net/qbgp7gne/
In your example it happens because you have a child element in your form with the attribute name of 'action'. The JS is returning a HTMLCollection for your form and .action is a child node of that. Forms are special.
Rename it to see your original JS working as expected:
<form id=foo action='https://[::1]/'>
<input type=hidden name=definitelyNOTaction value=xyz>
</form>
http://jsfiddle.net/qbgp7gne/1/
I have a dynamically created page with repeated elements, like so:
<input type="file" name="file1">
<input type="file" name="file2">
<input type="file" name="file3">
I would like to add some data to each of these elements for use in JavaScript. Originally I used "spare" attributes that while valid on an input tag were not valid on a file type input tag, eg, size. I have now added it to the class attribute, but have to use a regex to get it out again. Neither of these methods seem very satisfactory, is there a better way?
Quite often I see data added through attributes that are prefixed with data-, for instance:
<input type="file" name="file1" data-filesize="871">
jQuery even has function to conveniently read that information, for instance like this:
var filesize = $('input[name="file1"]').data('filesize');
And, to write the data, attr can be used:
$('input[name="file1"]').attr("data-filesize", filesize );
See also: HTML 5 data atributes
You can use attributes with a name starting with "data-"
Use the data attribute: <input data-something="somevalue" />
with attribute start with data- you can use your own other name appending to it.
Go through this examples
What is document.f.q.focus?
Is this a java script code or not
whether I can use document.f.id.value?
what is the difference between this and document.getElementbyID()
The HTML looks like this:
<form name="f">
<input name="q" />
</form>
In such a case, document.f refers to the form, and .q refers to the input element of that form. .focus() places the focus on that input.
It's worth noting that such code is unnecessary now that HTML5 is around:
<input name="q" autofocus />
It needs a form to make it work, Try this:
<form name="f">
<input name="q" value="test" type="text"/>
</form>
javascript:
document.f.q.focus();
document.f.q.value = 1;
Here is DEMO
The id attribute inside a html is meant to be unique.name can be an array(file[]) and with html5 should be used only on form elements.
html5 removed the support of the name atrribute on most elements except form elements.
id and name are 2 different things.
document refers to the whole html inside a page.
to get an element by it's id you need to call document.getElementById(id);
to get an element by it's name (considering html5) so inside a form
you call document.forms[0].name. form[0] refers to the first form inside the document
In your case the form has also a name so appart from html5 the code is correct.
form is called f,input is called q. thats why document.f.q returns the input field.
if you want to add an id to your input field then you have to add an id:
<input name="q" id="q">
to get the element:
document.getElementById('q');
to return the content:
document.getElementById('q').value;
And focus(); is a native function that points the focus to the choosen element.
In your case when you load the page you will see the blinking pointer inside the searchflied.
I need to change a form so that instead of reloading the page after submitting it, it redirects the user to another page.
This is the form I'm talking about:
<form class="questionform" name="questionform-0" id="questionform-0">
<textarea class="question-box" cols="12" rows="5" id="question-box-' . $questionformid . '" name="title" type="text" maxlength="200" size="28"></textarea>
<input type="text" class="ubicacion" value="" name="question">
<input type="button" name="ask" value="Publicar" onclick="askquestion('questionform-0'); window.location.reload(true);">
I want to remove window.location.reload and change it for something that redirects users to the page their comment will appear.
The problem is that it's not simply a static. So I have no idea how to do it. The URL I want to send users to is:
www.chusmix.com/s?=(content of the second field)
How do I do it? Anyway thanks for any info or whatever that points me on the right direction. Thanks
There is no need to use javascript for this purpose. You only need to set the action attribute of the form tag. It tells where the form information will be sent. So in your case it will be:
<form action="http://www.chusmix.com/s">
Also if you want to send the variables through the URL like: http://www.chusmix.com/s?variable=someValue
You need to set the method attribute as get so it will look like this:
<form action="http://www.chusmix.com/s" method="get">
If you don't want the data sent to be visible set the method to post, note that there are different advantages for each method so i recommend you read more about this if this form is an vital part of your webpage.
The variable names that appear in the url http://domain.com?**variable**= will depend on the inputs name <input type="text" name="**variable**" />
For more information on how forms work you can go to:
http://www.w3schools.com/TAGS/tag_form.asp
http://www.tizag.com/phpT/forms.php
You can ad an action:
<form action="redirection_url.php" method="POST" class="questionform" name="questionform-0" id="questionform-0">
I think you can use both absolute and relative url. Also note that I've added
method="POST" - which defines how the data from the form will be sent, as you already send some data with GET method (that's the stuff after ? in your url) - so this should work pretty well.
If you cannot use the action attribute in the <form> tag, you may redirect the user using window.location (you will probably want to do this inside the askquestion method, not in the onclick attribute).
window.location = "http://www.chusmix.com/s?=" + inputValue;
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;" />