I had a class assignment to create a form letter that allows form input to insert the entered data into the document once a submit button is pressed.
The newest assignment instructs me to add a new input field to allow me to input the number of recipients to create this letter for, such that I input a number and hit enter, and the document updates to have multiple input fields for each recipient in a JS array. Then, I can type in a new receipient name in each field created, and have a new page create the mockups of the letter to each recipient recursively.
In other words, the web page says "How many people do you want to send this to?" - I put in a number, hit enter, and the page updates for a "Name" field for each person, plus the other fields. Then, after all fields are filled and submit is pressed, a new page opens and shows the full form letter for each name I input.
I dont have a clue how to do this, and I bumbled through the initial assignment. Any suggestions? And yes, I'm a 100% JS noob, and I'm not all that well versed with HTML5 either, so please be verbose and gentle with me. :)
Thanks!!
Related
I'm writing an edit function (plain javascript & HTML / Chrome / Windows 10).
The data is in localStorage as a series of records, just 2 records in the toy code mentioned below.
I want the user to specify the number of the record to edit, then the code should pre-fill the textarea field with the retrieved content of that record. I want to allow the user to make changes and then press a Store button to store it back in localStorage.
My problem is that when I prefill the input field, I see the record content briefly and then the input field clears. I've tried .value and .defaultValue
editField.value = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");
and
editField.defaultValue = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");
the result is the same. (The regex is to hide a sequence number)
The code is in a JSFiddle here: https://jsfiddle.net/roygrubb/zxedbfqr/2/
That performs more or less the same - it shows the value briefly - but then does something different: It goes to a 404. I don't understand this either ¯_(ツ)_/¯
What I'm trying to do seems so basic, that I think I must be missing something blindingly obvious.
What have I missed? Thanks!
Whenever you've got a <form> that you want to handle through JavaScript, you have to ensure that the default form submission action does not happen. If the <form> does not have an "action" attribute, the default is to reload the current page.
By default, a <button> element will be assumed to have "submit" as its type. To prevent form submission, therefore, the simplest thing to do is make the button have "button" as its type.
That may not be all you need to do, depending on the details of the form. It may be necessary (or simply a good defensive move) to have a handler for the "submit" event on the form to prevent the default action.
I'm trying to create an autologin script for https://sso.verisk.com/login/default
I'm able to load the page and populate the Username and Password fields, but after clicking the Sign In button it will say "Please enter a username" and "Please enter a password". If I simply delete a character from the populated field, it will pass the validation.
To narrow it down, I've visited the page at https://sso.verisk.com/login/default and used the console to enter:
document.getElementById("okta-signin-username").value = "username"
document.getElementById("okta-signin-password").value = "password"
document.getElementById("okta-signin-submit").click()
As mentioned, this populates the Username and Password, but the validation doesn't detect field values until a character is either deleted or added manually. I've tested forms on other web sites with success so I'm not sure why this one is failing. Would greatly appreciate any points in the right direction!!
I believe the proper question could be "how can I submit a form programmatically"
The solution is this
Forms work like this, don't always think like a human when you deal with systems. The query selector is simply "form" because form is the only one form element in the entire document.
I am a novice when it comes to javascript and I need some help with a specific thing:
Make text appear in an input as I click on a button.
A bit of a situation: In a HTML form the user selects 2 tickets in a different input. Let's say each ticket is worth $5, I want the script to show the total price of the tickets in an input at the bottom.
Here is how the script should behave
First make a variable for the total price. You will then need to write a formulae that multiplies the first input by the price (In this case $5) and saves this number to the variable created previously. Finally document.write this variable into the second input
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 am designing my own template by making changes to the default template code of OpenCart 2.0.2.0. After repositioning the Search field, it no longer works: it will not submit on pressing Enter, and the search value is not submitted in the URL when clicking the search button in the form (the form submits though).
In order to try and find what goes wrong when relocating the input field, I have made a fresh installation of OpenCart on my WampSever, and without changing anything else, I moved the input field to the main nav, right after the categories UL -- by simply copying the PHP tag that prints the search template:
<?php echo $search; ?>
Nothing else. The form submits on pressing Enter on the keyboard, and it submits on clicking the search button, but the search parameter is no longer appended to the URL, e.g.
http://localhost/opencart/index.php?route=product/search&search=macbook
I need your help to find out why this happens and how I can move the search field without losing its functionality. I suppose this is Javascript related but not sure how.
To answer my own question:
Yes, it is Javascript related. Since the search input field is not wrapped in a , in order to submit it, and get the search query, two jQuery functions have been written (in catalog/view/javascript/common.js, lines 64-81).
These functions get the search input value by first referencing the within which the input is originally located:
[line 68]
var value = $('header input[name=\'search\']').val();
[line 79]
$('header input[name=\'search\']').parent().find('button').trigger('click');
To make it work, I had to replace the two instances of "header" with the ID of the menu:
var value = $('#menu input[name=\'search\']').val();
Sorted then!
Hope this helps some other OpenCart beginner like myself :)