Make array of data from $(this).serialize() - javascript

I have a product page wherein if the user clicks on edit, an overlay form window is populated to make it editable.
After the edit is completed and the user clicks submit I want to update the text() of each field of the product which was changed.
So instead of getting value of each input field and updating is there a way I can use $(this).serialize() as an array
Current solution I think of is:
var name = $("#input_name").val();
$("#name_id").innerhtml(name);
But the problem is that there are a lot of fields, and I wanted to use the power of jQuery, instead of grabbing each input field's value manually.

Check out the serializeArray method.
var array = $('#someForm').serializeArray();

Well, there's got to be some way of relating the input elements to the plain text elements (spans? divs?) you want to update. That could be by some naming convention, or by some explicit hook in the input field class names. Once you've got that convention established, it should be a pretty easy matter to iterate over the form fields and update the text.
So for example if the text areas are <span> tags whose "id" value is the name of the input field plus the suffix "_text", then you could do something like this:
$('#theFormId input:text').each(function() {
$('span#' + $(this).attr('name') + '_text').text($(this).val());
});
There are approximately one billion possible variations of course.

Related

Get Input Field value using DTM on Submitting a form

I have two input fields that had the user access card and password. and the user click on submit button to authenticate.
I'm using DTM in my app to capture the user navigation but I want also to get the values of those field to my DTM so I would know who the user is.
And here is what I tried but with no luck.
Created Data element as below:
And created Event based rule. But not sure how to get the values to be shown in my report:
Thanks for your help.
Example Form
Since you did not post what your form code looks like, here is a simple form based on what I see in the screenshots you posted, that I will use in my examples below.
<form id='someForm'>
User Name <input type='text' name='userName'><br>
Password <input type='password' name='userPass'><br>
<input type='submit' value='submit' />
</form>
Data Elements
Okay first, let's go over what you did wrong.
1) You said you want to capture two form fields, but you only have one data element...maybe? You didn't really convey this in your question. I just assumed as much because of what you did throughout the rest of the screenshots. But to be clear: you should have two separate data elements, one for each field.
2) The CSS Selector Chain value you used is just input, so it will select the first input field on the page, which may or may not coincide with one of the input fields you are looking to capture. So, you need to use a CSS selector that is unique to the input field you want to capture. Something as simple as input[name="userName"] will probably be good enough (but I cannot confirm this without seeing your site). You will need to do the same for the 2nd Data Element you create for the other input field (e.g. input[name="userPass"])
3) In the Get the value of dropdown, you chose "name". This means that if you have for example <input type='text' name='foo'>, it will return "foo". Since you want to capture the value the user inputs, you should select "value" from the dropdown.
Solution
Putting all the above together, you should have two Data Elements that look something like this (one for the user name field and one for the password field; only one shown below):
Event Base Rule
Okay first, let's go over what you did wrong.
1) The value you specified in Element Tag or Selector is input. You aren't submitting an input field; you are submitting a form. Input fields don't even have a submit event handler! Your Event Type is "submit", so at a minimum, Element Tag or Selector should be form. But really..
2) Ideally, you should use a CSS Selector that more directly and uniquely targets the form you want to trigger the rule for. For example, maybe the form has an id attribute you can target in your CSS Selector. Or maybe the form is on a specific page, so you can add additional conditions based on the URL. What combination of CSS Selector or other conditions you use to uniquely identify your form depends on how your site is setup. In my example form above, I added an id attribute, so I can use form#someForm as the CSS Selector.
3) You checked the Manually assign properties & attributes checkbox, and then added two Property = Value items. This tells DTM to only trigger the rule if the input has a name attribute with value of "userName" AND if it has a name attribute value of "userPass". Well name can't have two values at the same time, now can it!
<input name='foo' name='bar'> <!-- bad! -->
All of this needs to be removed, because again (from #1), you should be targeting a form, not an input field.
4) For good measure, looks like you added a Rule Condition of type Data > Custom, but the code box is empty. The rule will only trigger if the box returns a truthy value. Since there is no code in the box, it will return undefined (default value returned by a javascript function if nothing is returned), which is a falsey value. This also needs to be removed.
Solution
Putting all the above together, the Conditions section of the Event Based Rule should look something like this:
But again, ideally your conditions should be more complex, to more uniquely target your form.
Referencing the Data Elements
Lastly, you can reference the input fields to populate whatever fields in the various Tool sections with the %data_element% syntax. For example, you can populate a couple of Adobe Analytics eVars like this (data element names reflect the examples I created above):
Or, you can reference them with javascript syntax in a custom code box as e.g. _satellite.getVar('form_userName');
Additional Notes
1) I Strongly recommend you do not capture / track this type of info. Firstly, based on context clues in your post, it looks like this may count as Personally Identifiable Information (PII), which is protected under a number of laws, varying from country to country. Secondly, in general, it is a big security risk to capture this information and send it to Adobe (or anywhere else, really). Overall, capturing this sort of data is practically begging for fines, lawsuits, etc.
2) Note that (assuming all conditions met), the "submit" Event Type will track when the user clicks the submit button, which is not necessarily the same thing as the user successfully completing the form (filling out all the form fields with valid input, etc.). I don't know the full context/motive of your requirements, but in general, most people aim to only capture an event / data on successful form completion (and sometimes separately track form errors).

I'm stumped - setting the value of a form field but it's not displaying

I have a form with 3 text inputs to edit records from a table. The values for the 3 fields for all records are stored in javascript arrays. I have a SELECT that displays the name field for all the records in the table. When I select an OPTION, javascript populates the 3 form field "values" with that record's values, for the user to edit.The 3 INPUTs are contained in identical DIV containers, and the attributes of the 3 INPUTs are identical (other than ids and names).
After the javascript runs, the first field would display its assigned value, but the other two continued to display their placeholders. I can watch the values change in the DOM in the developer tools as I make selections, but nothing shows in the form fields. I am assuming my code is populating the INPUT values because the DOM is changing as expected.
I tried changing the order of the fields in the form, and now all 3 fields are failing to display their value, while the DOM still shows the elements with the values. Putting the field order back to how it was did not help.
The behavior is the same in Chrome and FireFox.
document.getElementById("accountname").innerHTML = selectedname
document.getElementById("accountdescription").innerHTML = jdescriptions[jnames.indexOf(selectedname)]
document.getElementById("accountcode").innerHTML = jcodes[jnames.indexOf(selectedname)]
This screendump image shows how the FORM and the DOM are different
Frankly I'm stumped. Any ideas appreciated.
you should set the value attribute of the input element, you cannot use innerHTML because we don't write anything between input tag.
Since you are setting the innerHTML of input tag, your screenshot is displaying ANOTHER ACCOUNT between <input></input> but this is not the value which will be displayed for the input element.
The property innerHTML is used for elements like Div.
document.getElementById("accountname").value = selectedname;
It's me, of course! I should be assigning the values to .value, not .innerHTML.
All sorted.

How to update value of a textbox when the value of another textbox changes.

I have a problem. I have a user control which contains multiple textboxes. When I update a value in one textbox it should calculate value and fill the value in another textbox automatically. I am writing Javascript code in Usercontrol.
When I change the value in the textbox, I am trying to get elementIDs of other textboxes.It shows me an error. It looks to me the elements are not present or they are somewhere else.
Can anyone give me a simple example?
Any help would be appreciated.
if you use jQuery...
var ids = [];
$('input[type=text]').each(function() {
ids.push($(this).attr('id'));
});
ids is now an array of all the ids of the inputs that have the type of text

jquery- info/docs about list of attributes applicable to different types of input elements in a form

I am working with input elements in a form using jquery...I am trying to obtain the name of a form parameter in a web page, as well as its value (or multiple values in case its something like a drop down box)
I want to do some operations on these form elements... Is there some place you can point me to where a list of attributes available for (and applicable to) different types of form elements is provided? For eg, I need to work with drop down box, list box, radio button, check box, text box and text area. Specifically I require the name of each input element, its value(or set of values) and in case of list box, whether multiple selections can be made within that list box or not.
Update- The jquery 'val' expression retrieves the currently selected value in a radio button/list box etc... I want to obtain all the possible values for input elements that have multiple values as options...
Most of this stuff is normalized into a single function in jQuery, so you can ask almost any input element for its value and jQuery will give it to you:
http://api.jquery.com/val/
If you wanted to iterate over them and dynamically grab the name and value, it might look something like:
var values = {};
$('input, select, textarea', 'form').each(function() {
values[$(this).attr('name')] = $(this).val();
});
The HTML specification Forms chapter describes all the different input types. HTML 5 will add some new ones, but that is in draft form at present.
Hopefully this will get you started.
$('input[type=text]').each(function(){
console.log('this elements name is '$(this).attr('name') + ' and the value is ' +$(this).val());
});
$('input[type=radio]:checked').each(function(){
console.log('this elements name is '$(this).attr('name') + ' and the value is ' +$(this).val());
});

How to clear all inputs, selects and also hidden fields in a form using jQuery?

I would like to clear all inputs,
selects and also all hidden fields in a form.
Using jQuery is an option if best suited.
What is the easiest way to do this... I mean easy to understand and maintain.
[EDIT]
The solution must not mess with check-boxes (the value must remain, but checked state must be cleared), nor the submit button.
What I am trying to do is a clear button, that clears all the options entered by the user explicitly, plus hidden-fields.
Thanks!
You can use the reset() method:
$('#myform')[0].reset();
or without jQuery:
document.getElementById('myform').reset();
where myform is the id of the form containing the elements you want to be cleared.
You could also use the :input selector if the fields are not inside a form:
$(':input').val('');
To clear all inputs, including hidden fields, using JQuery:
// Behold the power of JQuery.
$('input').val('');
Selects are harder, because they have a fixed list. Do you want to clear that list, or just the selection.
Could be something like
$('option').attr('selected', false);
$('#formID')[0].reset(); // Reset all form fields
If you want to apply clear value to a specific number of fields, then assign id or class to them and apply empty value to them. like this:
$('.all_fields').val('');
where all_fields is class applied to desired input fields for applying empty values.
It will protect other fields to be empty, that you don't want to change.
I had a slightly more specialised case, a search form which had an input which had autocomplete for a person name. The Javascript code set a hidden input which from.reset() does not clear.
However I didn't want to reset all hidden inputs. There I added a class, search-value, to the hidden inputs which where to be cleared.
$('form#search-form').reset();
$('form#search-form input[type=hidden].search-value').val('');
for empty all input tags such as input,select,textatea etc. run this code
$('#message').val('').change();
You can put this inside your jquery code or it can stand alone:
window.onload = prep;
function prep(){
document.getElementById('somediv').onclick = function(){
document.getElementById('inputField').value ='';
}
}

Categories