Use CSS to change between displaying normal text fields & inputs - javascript

Say I have a web page that displays information for a user account, with fields like user name, first name, last name, birth date, email address, etc.
I would like to provide 2 modes for this info:
Display mode: where the fields are just displayed as field name & value pairs that look like normal text (I don’t want the values to look like they’re displayed in disabled inputs)
Edit mode: where the field names are displayed like labels for field values that are displayed as appropriate editable inputs for the field value
I would like to switch between these modes by applying a CSS class (e.g., edit) to a <div> that displays the fields. This should then change from displaying the data as normal text to displaying it in a form with an appropriate input or other element for each field.
How can I do this using CSS as much as possible, and JavaScript as little as possible?
I can see 2 main approaches:
Always using the input & form elements in HTML, even when not in edit mode, but hiding buttons (like submit) & disabling modifying values unless under a <div class=“edit”>, along with changing the look of the input elements to make them (when not in edit mode) just look like normal display text instead of disabled inputs.
Using non-input elements when just displaying data, then using CSS switch them to input elements when entering edit mode, and vice versa
I don’t know what effect the former would have on SEO, or other aspects around a web page.
I also don’t know which of these is easier to implement,or even if they are possible to implement without causing major problems (either for SEO, UI, etc.).
I know that JavaScript can edit the HTML DOM, but I’d prefer to do this only using CSS, to simplify the switching between the 2 modes.

One option is to have entirely separate DOM trees for the view and edit modes and simply toggle the display of those seperate trees using display. Whether it's reasonable to have this much repetition depends a lot on your use case.
const container = document.querySelector("#container");
function toggle() {
container.classList.toggle("view");
container.classList.toggle("edit");
};
.view div {
display: block;
}
.view form {
display: none;
}
.edit div {
display: none;
}
.edit form {
display: block;
}
<div id="container" class="view">
<div>
Name: Steve
</div>
<form>
<label>Name: </label>
<input value="Steve" />
</form>
<button onclick="toggle()">Toggle view</button>
</div>

Related

Validation of hidden divs in bootstrap form

I've created a (long) form using Bootstrap 5 that is gathering quite specific information but not all of the inputs are applicable to everyone. To make it a bit more user friendly I split the content into several sections and filter out and hide unrelated later sections using some filter questions in the first section in the following manner:
Wrap the section to be hidden in a plain div with a marker:
<div class="hidden_selection">
And then disable these sections via javascript:
<script>
$(document).ready(function () {
$(".select_section").change(function () {
$(this).find("option:selected").each(function () {
var val = $(this).attr("value").split(/[-,]+/).pop();
if (val) {
$(".hidden_selection").not("." + val).hide();
$("." + val).show();
} else {
$(".hidden_selection").hide();
}
});
}).change();
});
</script>
This works really well in creating a functional form.I was quietly satisfied until I tried to submit the form. In each section there are many numerical and categorical inputs for the user to fill in and some are required to be submitted for each section so they are defined like this:
<label for="inputNumRepeats" class="form-label">Number of Repeats</label>
<input type="number" class="form-control" name="inputNumRepeats" placeholder="e.g. 5" min="0.00" max="25" step="1" value="{{ request.form['inputNumRepeats'] }}" required>
Note the required attribute being passed to bootstrap so that it can do a simple check when the form submit button is pressed.
The problem with my first attempt is that the required in the hidden sections remain required even though they have been deemed unnecessary by the form logic. I believe I can do something like this for individual input:
$('#inputNumRepeats').removeAttr('required');
$('#inputNumRepeats').removeAttr('data-error');
Which would probably solve the problem but would involve some complex processing to loop through each section and manually change the attributes for all the desired input ids in that section while also remembering to switch back on the required attribute if the user switched the form selection after the initial selection.
Is there a simpler and better way to tell bootstrap to ignore all the required inputs when it does it's validation check without this messy jquery fucntion to manually disable the 20-30 inputs across the various disabled sections (while remembering to enable any other ones if the selection changes)?
I think some of the proposed solutions from this question (Form hidden field and required validation use) would work but I would need to have a different class for each section which would still end up with quite a few checks but less than the 30 or so possible individual calls.
Would it make sense to disable all and then just check within each div for a required tag and then enable that? I just don't know what is the best approach to this as html and javascript are not really my thing!

assign values to form inputs without Javascript or HTML, just like outlook.com is doing

If you see outlook.com, there is an input box, with a default value inside it which says "Email, phone or Skype" in gray color. Once you start typing in that input box, this default value disappears, and if you delete all your text inside the input box, the default prompt will appear again. This is a great way to minimize the text on my website to avoid a separate label for every input box of every form.
Now, you might think this was done by Javascript, but it isn't. If you disable your browser's Javascript the outlook.com page will still show the same behavior.
My question is how can I do something like that? ie show a default value on my input boxes, and then hide/remove it once the use actually starts typing in those boxes, and all without Javascript. I know it must be possible, just as outlook.com has done. But how?
Thank you.
Put this in your HTML code and see the magic of placeholder
#magic {
height: 20px;
width: 200px;
padding: 5px;
}
<html>
<body>
<input placeholder="Make this invisible on typing" id="magic"/>
</body>
</html>
Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#Labels_and_placeholders#The_placeholder_attribute

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

Checkbox check event validate without Javascript?

I have tried but haven't got any solution.
Lets say there is checkbox with label "AGREE TO TERMS AND CONDITIONS". Is it possible to modify color of label text with checkbox checked / unchecked event without using Javascript / Jquery ?
Aside from the required attribute M. Kejji points out, which is the right way to do this, there's a CSS way as well:
It's possible to do this client-side within restrictions, sort of, but it's ugly. And it doesn't really prevent form submission, it just prevents showing the submit button.
Basically, you can use the CSS :checked pseudo-class and (say) an adjacent sibling combinator to hide the submit button if it's not checked:
.disable-submit + input[type=submit] {
display: none;
}
.disable-submit:checked + input[type=submit] {
display: inline;
}
<p>Tick and untick the box</p>
<form>
<input type="checkbox" class="disable-submit">
<input type="submit" value="Send">
</form>
I'm not suggesting it, just saying it's possible.
Regardless, usual caveat: Even if you were using JavaScript, everything on the client can be bypassed, and doesn't mean you don't also need server-side validation.
Yes,
HTML5 has the required attribute for input fields :
<input type="checkbox" name="agree" required /> By clicking this, blablabla
If the user tries to submit the form without checking the box, they will be blocked and have an explicit message thrown by the browser.
The above answer is correct, however, the code provided must be in the context of a form. When the submit element of the form is clicked, the webpage will give an error.
Example Here
Note that the required attribute of an input element is not supported by Apple Safari (according to w3schools)

Selection disappears when new window opens

I am currently working on a project and I am stuck. As per client requirements a small modification was made to an existing form.
Imagine the HTML page as follows:
I have added a new form element named Business Type and there are 10 options in that.
The user needs to select an option or multiple options and submit and the data would get stored in the database. The data is also getting stored in the database. I have checked that.
There is also a button within the form which opens up a small window to choose a few options. When this window opens up, the selection made in Business Type (in the form) disappears. How to prevent this from happening?
I am trying to use sessions. But is there a better and easier way to accomplish this? I want to retain the multiple selections that are made.
This can all be done client-side. Basically, you create a form with all of the questions that you want to ask and then use JavaScript to display extra questions. If the user doesn't click the button to open the extra questions, they just maintain their empty values. If they do open the extra questions, the will pop up on the page and the user will fill in the inputs. Once they are finished with those questions, you simply hide them but they still hold the values that the user set.
So put the optional fields in a hidden div in the form, and then display that div when the button is clicked.
<form ...>
... required inputs
...
...
Ask more questions
<div id="optional-inputs" style="display: none;">
<input ... />
<input ... />
'Save' optional questions
</div>
<input type="submit" value="submit" />
Then, give the #optional-inputs some CSS (or you can style it however you like):
#optional-input {
left: ...px;
position: absolute;
top: ...px;
width: ...px;
}
For the button/link that opens the other questions, add some JavaScript/jQuery to open the div as an absolute positioned window.
$('#show-optional-inputs').click(function(e) {
$('#optional-inputs').show();
e.preventDefault();
});
This will get you mostly there. You would need to bind an event to trigger the optional questions box to save/close - which is actually just hiding the box and keeping the values that the user set in the form.

Categories