I have a validation function tied to a form's onsubmit event. When it runs, my <input> objects return empty strings in the value attribute even though I have typed in some text.
For example, the mark up is:
<input type="email" id="email" name="email" required>
the following:
document.getElementById("email").value
returns an empty string "" even if there is some value entered in the form.
I hope the screen shot below captures the situation:
I must be missing something very basic. What could it be?
There is more than one <FORM> in the page (but only one is visible at any one time), and there are more than one instances of <input id="email">. The wrong element with id email was being selected.
Hope this answer might be of use to somebody else too.
I am trying to update the value of an input field after the user chooses a selction from autocomplete. I am using typeahead js for autocomplete feature. Here is my jsfiddle
https://jsfiddle.net/aminur/jLa7x28y/7/
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
Once the user selects a state, I want to update the value of the input field to its short form. Like if the user selects Connecticut, I would like to update the display as CT. I tried using oninput, bind functions on the input tag. It didnt work. can you please help?
I encounter a problem when testing form validation with angularjs
According to angularjs form guide,
an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control.
I created test code at plunker, it all works fine untill I change the input name from
<input type="number" name="age" ng-model="user.age" max="100" required>
<p>{{form1.age.$error}}</p>
to
<input type="number" name="user[age]" ng-model="user.age" max="100" required>
<p>{{form1.user[age].$error}}</p>
Does this mean angular can not recognize array syntax in form input?
The problem for me is I want to keep the normal form submission flow and only use angular for form validation, so I need to keep form input as array to work with the backend form handling
It has nothing to do with Angular. It is a syntactic JS error.
If you want to reference a property named user[age], you should do it like this:
form1['user[age]'].$error
form1.user[age] is incorrectly interpreted as (form1.user)[age]
I have a link on one page which looks like this:
http://www.domain.com/sample-link#product_id
and on the other page (sample-link), I have this input field:
<input type="text" name="name" value="name" />
So, when I click the link from the first page, I want to open the "sample-link" page, and autofill the name field with the "product_id" text. Any ideas how can I make this?
Thanks in advance.
You'll just have to add a tiny Javascript snippet:
if (document.location.hash)
document.getElementById('testbox').value = decodeURIComponent(document.location.hash.substr(1));
For obvious reasons you'll have to adjust the id of the text box.
It gets a bit more complicated in case you'd like to pass more than one value.
The call to decodeURIComponent() is optional, but required in case you're passing characters like spaces or non-alphanumerical stuff (just to be sure).
im pretty new to jQuery, and i dont know how to do that, and if it can be done without editing manually the plugin.
Assume to have a simply form like that:
<form action="page.php" method="post">
Name: <input type="text" name="Your name" id="contact-name" value="" />
Email: <input type="text" name="Your email" id="contact-email" value="" />
</form>
When you submit it, both in 'standard' way or with ajaxSubmit(), the values of the request take the label of the field name, so in the page.php i'll have:
$_POST['Your name'];
$_POST['Your email'];
Instead i'll like to label the submitted values with the id of the field:
$_POST['contact-name'];
$_POST['contact-email'];
Is there a way to do that with jquery and the ajaxsubmit() plugin?
And, maybe, there is a way to do it even with the normal usage of a form?
p.s: yes, i know, i could set the name and id attributes of the field both as 'contact-name', but how does two attributes that contain the same value be usefull?
According to the HTML spec, the browser should submit the name attribute, which does not need to be unique across elements.
Some server-side languages, such as Rails and PHP, take multiple elements with certain identical names and serialize them into data structures. For instance:
<input type="text" name="address[]" />
<input type="text" name="address[]" />
If the user types in 1 Infinite Loop in the first box and Suite 45 in the second box, PHP and Rails will show ["1 Infinite Loop", "Suite 45"] as the contents of the address parameter.
This is all related to the name attribute. On the other hand, the id attribute is designed to uniquely represent an element on the page. It can be referenced using CSS using #myId and in raw JavaScript using document.getElementById. Because it is unique, looking it up in JavaScript is very fast. In practice, you would use jQuery or another library, which would hide these details from you.
It is reasonably common for people to use the same attribute value for id and name, but the only one you need to care about for form submission is name. The jQuery Form Plugin emulates browser behavior extremely closely, so the same would apply to ajaxSubmit.
It's the way forms work in HTML.
Besides, Id's won't work for checkboxes and radio buttons, because you'll probably have several controls with the same name (but a different value), while an HTML element's id attribute has to be unique in your document.
If you really wanted, you could create a preprocessor javascript function that sets every form element's name to the id value, but that wouldn't be very smart IMHO.
var name = $("#contact-name").val();
var email = $("#contact-email").val();
$.post("page.php", { contact-name: name, contact-email: email } );
This will let you post the form with custom attributes.