getElementByTagName function needed - javascript

I need to create a text area in which the user will input the auto responder code. I hope everyone knows this. The auto responder code will have a full form code provided by most of the auto responder services like mailchimp, aweber etc.
I need to use getElementByTagName or anything else to extract all the input elements from the pasted code.
For example I will have 3 boxes below this text area, one will have Name field, 2nd will be email field and 3rd will be a box which will add all the hidden fields extracted from the above text area.

Yes, getElementsByTagName exists already.

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).

Sitecore - Field not detected as modified. How to force the save prompt to show?

We are using the Taxonomy module for Sitecore: https://marketplace.sitecore.net/Modules/T/Taxonomy.aspx?sc_lang=en
The module works fine 90% of the time. The only catch is that when in a taxonomy field you select a value from the auto-complete options, the field doesn't seem to be marked as changed. This creates the occasional confusion with editors as when they publish the "Do you want to save?" prompt doesn't show and the content is published without tags.
If instead of selecting from the auto-complete we use the dialog box, everything works fine.
I looked at the markup, JavaScript and C# code and couldn't find a solution.
I even tried to set Sitecore.Context.ClientPage.Modified = true but it doesn't seem to do anything.
How can I force the save prompt to show?
I had a similar issue, I was updating a field using js and the experience editor wasnt detecting the change.
I got this working by doing the following using js:-
There is a save button state object saved in a view state field. You can grab by doing window.parent.document.getElementById("__SAVEBUTTONSTATE"). I then did the following:-
var saveButtonState = window.parent.document.getElementById("__SAVEBUTTONSTATE");
saveButtonState.value = 1;
saveButtonState.onchange();
This will make the save button enabled
In the experience editor, Sitecore wraps your sitecore item fields in an span element, which contain a unique id. (These are the fields you interact with in the experience editor). However, its not these values which Sitecore receives when you hit Save button. Sitecore actually stores values of your item fields in hidden inputs, so when you interact with the span element, in the background, these hidden inputs are being updated. So in order for Sitecore to receive your changes, you must update the corresponding hidden input. If you open Inspect element in the experience editor and search "scFieldValues", you will see these hidden inputs. I updated the field by using jquery:-
$('#scFieldValues').children('input').each(function () {
if (id.indexOf($(this).attr('id')) >= 0) {
$(this).val(value);
}
});
The id object is the id of the span element. The contents of that id is used in the id of the hidden input. This is why I use "id.IndexOf" to find correct input element. So when I update the span element value, I grab that value and update the corresponding input.
Hope this helps

Autosuggest input preventing text from being copied to other input text field

I am trying to have text copy from one text input field to the other as a user types. I have been able to accomplish this thanks to everyone's help, but I ran into a problem.
If you visit the following page and type "Sub" in the "Car Manufacturer" text box, you will see it duplicate in the "TestField" text box. However, since it is an autosuggest text box, Subaru pops up.
So, if you only type "Sub" and "Subaru" is suggested and you select it, only "Sub" is duplicated over to the next box. You will notice also that once you select "Subaru" a checkbox is generated. Maybe it would be better to duplicate from the checkbox instead? But I have not been able to accomplish this unfortunately.
You can see the problem here (remember to only typ "sub" in the field and select "Subaru" to see what I'm talking about:
http://www.forzazone.com/forza-car-designs-and-paint-jobs/forza-motorsport-4-car-designs-and-paint-jobs/new-listing_c66/
Here is the code I'm currently using to perform the duplication:
<script>
(function($) {
$('.jr-page').on('keyup','.jrAutoSuggest',function(){
$('.jr_testfield').val($(this).val());
});
})(jQuery);
</script>
If you have any ideas on how to prevent this that would be great. One idea was to simply duplicate the text from the checkbox once "Subaru" is selected from the Autosuggest.
Thanks for your help with this!
You can easily extend the onclick method the tag you are using for displaying the suggestions:
inside the tag:
<a class="ui-corner-all" tabindex="-1" onclick="javascript:clickHandler(this)">Subaru</a>
Implement the clickHandler function and set the value of the link to the test field you have created.
Hope that helps.

How to move placeholder text along with the content of a textbox in HTML?

Suppose this is my textbox:
<input type="text" placeholder="%" />
And a user is supposed to enter a percentage inside, but without the % sign, only the numbers (e.g. 67 in 67%). But I want them to still remember that this is a text box in which you insert a percentage.
So how can I move the placeholder along with the text, make it unable to be deleted, always after the text?
And I do remember seeing it somewhere too, unless I got my facts wrong.
A way to do this would be to have an additional element overlaying the input element and moving the overlayed element as the user types.
But, I think a better UX experience would be to have the element as an add-on appended to the input field, as show in twitter bootstrap. See the "extending form controls" settings:
http://twitter.github.com/bootstrap/base-css.html#forms
You could simulate an input and change the width of the real input using javascript. (The trick is to use some invisible element to catch the needed width)
Exemple using JQuery: http://jsfiddle.net/Vu7hN/
$input.on('change keypress paste focus textInput input', function(){
testWidth.text($input.val());
$input.width(testWidth.width());
});

jQuery "live" validation of form

I have recently completely recoded my site registration form, a lot of my users were complaining that upon registration, they would fill out the form only to be told that the username was already taken, or some other error that meant they would have to retype all of that information.
I set off today designing and coding the new registration page, and the resulting response from my users is that it looks more user friendly, and when the "live" validation is included, it will be just right.
Anyway, here is how my registration page looks, with the location of the divs that will contain errors;
For each area of the form, I have added the same div class next to it, which I hope I can then hide / unhide depending on what the user has typed in.
My issue is, surely if I use that same class for ALL of the fields, it will update ALL of the error fields when I use something like the innerHTML function?
jQuery is far from my strong point, and I would really appreciate any help. I will add more information if it is requested, thanks!
Why not give each field an id and use the selector #whatever instead of .whatever to access each specific field?
basically you validate on events like keyUp or blur and when the validation finished you traverse the proper div by going up from the input element to the element that contains both, the input and the error div and then search for the error div by it's class. this way you'll be sure to only avitvate the error for the proper element.
assuming the element surrounding the input and error div (and propably label etc.) has the class element and the error div has the class error
$('input').blur(function() {
// on error:
$(this).parents('.element').find('.error').text('Some error occured').show();
});
if you validate using ajax the on-error stuff needs to be in the ajax callback ofc...
also need the same routine for successful validation: remove text and hide error div...

Categories