Getting HTML with the data using jQuery - javascript

I have a form which has many elements (e.g. textarea, input, select), after users have entered some data the states of these elements should change.
For example, an input[type="radio"] element will have the attribute checked="checked" if a user has checked it. The value attribute of an input[type="text"] element will contain the text entered by user.
The problem is that the html string returned by $('#form1').html() does not contain these data.
Feel free to take a look at this example:
http://jsfiddle.net/cmNmu/
You can see that no matter what your inputs are, the html returned is still the same (having no attribute data).
Is there any easy way to collect the html including their states?
Thanks in advance.

use below code getting the value of input type text via jQuery
alert($("input:text").val())

Maybe you could use the 'onblur' event handler to set the value of the element when you leave it

You should get the value using :
$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();
if you have multiple input then you can filter them bu their name or class or even id. Then you will need to select input using .find(':input[name=input_field_name]'). My Suggestion is : use name property instead of other property if you want to use form.

People usually use $('#form1').serialize() to get the values. If html() doesn't return both the source and data, I don't think that there is something you can other than manually constructing the full html by looking at the data.
Live demo: http://jsfiddle.net/cmNmu/6/

By using the jQuery formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The changes in the input elements can be reflected in the html string returned by formhtml().
Thank you very much everyone.

Related

Is there any way to edit a URL to embed a form entry?

I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.
There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.

AngularJS - Bind input to value with filter and update it

I have an input bound to an object property and with a filter applied to it.
<input value="{{object.field | filter}}">
The problem is that if I programmatically change object.field, the value displayed inside the input doesn't change, however in the DOM Inspector I see the correct (new) value. I verified to digest/apply the changes to the scope and the object.field variable does change correctly, the issue seems to be only in the input displayed value.
I cannot provide an example since there's too much code involved.
Does anyone know where I should look for errors??
No need to set value in that way. ng-model takes care of it.
Valid syntax is:
<input ng-model="object.field">
For filtering you can look at this answer:
Using angularjs filter in input element
I think you should use ng-model to bind your data into input box instead {{expression}}

Loop through visible input elements in a form in Javascript?

I'm trying to loop through all visible inputs within a form and set their value to be empty. What I have doesn't seem to work for text inputs, it returns undefined. Any ideas how to do this?
jQuery has a :visible selector as well as an :input selector. In addition, most jQuery methods operate on the entire set. val() can be used directly rather than looping through the set.
currentForm.find(':input:visible').val('');
Textbox inputs would have a tagName of "textarea". Not sure why the other text types aren't working. Have you tried:
childs[i].values = '';
?

How to change the text value of an input inside an element in jQuery

I have a JavaScript function that goes and gets me a form from another page on the same site. It returns an HTML element (the form) and everything in it. Inside that form, there is an input with no value.
Let's say we have this:
var form = $(data).filter("form")[0];
Now form has an html element that is the form. The form itself has an input element inside it.
I would like to be able to do something like:
$(form.input).text("something new");
and have that change the value of the input inside the form which is not on the page but inside a variable.
Just want to clarify again that the form (in the variable form) is not on the page, it is saved inside a variable.
Like this:
$(form).find("input").val("something new");
.find to get the child input tag (or .children("input") if you know input is a direct child of the form).
.val to set the input's value. (Note that .text sets the inner text of an HTML tag, which of course you don't want in this case.)
(Fiddle)
To set all inputs in your form:
$(form).find('input').each(function(index,inputObj){
$(this).val('someting');
});
Basically, you need to know what input you are looking for. You will need to know some way of identifying it i.e. either id, name, css class name etc. Here is a reference to jquery selectors you can use:
Jquery Selectors
e.g. if need to set value of an input with name "id", I will do this
$(form).('input[name="id"]').val("id is set");
Hope it helps
The way I was able to find to do this is to:
$(form).find("input")[1].setAttribute("value", "something")
try this:
$(form).find("input").each(function(){
val("something new");
});

How do I get the title attribute of an option tag that I am setting in it using my xml

I need to populate the dropdown and onchange of this dropdown I have to set the values in two text fields. I have set the value attribute for option tag and I can use it to put this in my first text box. Now my second textbox should have the value coming from the same xml. I cannot use value attribute twice in xml, so what I did was that I added an title attribute to this option tag. And now I want this title to be put in my second text box, but it doesn't happen. here us what I am suing:
$("#country").change(function() {
$(".firsttextbox").attr("value",$(this).val()); //this works
$(".secondtextbox").attr("value",$(this).attr('title').val()); //this doesn't work
})
$(".secondtextbox").attr("value",$(this).find("option:selected").attr("title"));
Added this line to solution, Example can be found at http://jsfiddle.net/pHpr2/
Using $(".secondtextbox").attr("value",$(this).attr('title').val()); fins the <select title="title"> that is the issue was with you.
I'm a little confused by what you're trying to do here. I think, however, that the solution is probably simple.
attr retrieves the attribute (or property, in some cases) as a string (or at least it does for the title attribute) so there is no need to use val() on it – indeed you can't!
$(".secondtextbox").attr("value",$(this).attr('title'));
Note that it would probably suffice simply to use this.value and this.title, depending on whether the code is in fact XML or if it's HTML.
Instead of $(this).attr('title').val(), try using only $(this).attr('title')

Categories