We Keep Coding

How to auto-format VS Code? Copying html and pasting JSX?

Prettier is installed to help format my code, but I want to format what I've pasted.
Whenever I copy and paste from bootstrap, I have to manually change class to className, close input tags and change for to HtmlFor. How can I do this?
What I copy and paste:
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
What I copy and want to paste
<div className="form-group">
<label htmlFor="exampleInputPassword1">Password</label>
<input type="password" className="form-control" id="exampleInputPassword1" placeholder="Password"/>
</div>

You can use this extension :
https://marketplace.visualstudio.com/items?itemName=riazxrazor.html-to-jsx
I guess you can add shortcut that paste and execute this extension

content script to auto fill user password form created by Angular [duplicate]

This question already has answers here:
Update Angular model after setting input value with jQuery
(12 answers)
Closed 5 years ago.
I have created a content script extension to auto fill user and password fields on webpage. It works OK in normal form like below -
<input name="userId" class="form-field" id="userId" placeholder="Username" autocomplete="off" tabindex="1" type="text">
<input name="password" class="form-field" id="password" placeholder="Password" autocomplete="off" tabindex="2" type="password">
<input name="signIn" class="btnBlue" id="signIn" value="Sign In" tabindex="4" onclick="checkIECompat()" type="button">
However, when it comes to Angular-generated form, no matter how hard I try to play with those ng-xxxxxx classes, it does not work.
<input type="text" class="form-control text-center modal-header ng-valid-maxlength ng-touched ng-dirty ng-valid-parse ng-invalid ng-invalid-required" name="idCard" placeholder="User Name" maxlength="20" autocomplete="off" ng-model="request.userName" required="">
<input type="password" class="form-control text-center ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-required" name="password" placeholder="Password" aria-describedby="" autocomplete="off" ng-model="request.password" style="margin-top:15px" required="">
<button type="submit" class="btn btn-blue btn_login" value="Log In" ng-click=" login('/payment')" ng-disabled="loginForm.$invalid" disabled="disabled">เข้าสู่ระบบ <span class="glyphicon glyphicon-log-in" style="font-size:14px" aria-hidden="true"></span></button>
Above is the code when page is first loaded. I manually key in the form and inspect the code when all validity have been checked and the submit button is enabled. Then, I use my program to change those classes and other details to make them identical (except its order). I even force enable the button by removing disabled attribute but it does not help. The button can be clicked but nothing happens.
My question is "is it possible to achieve this?". Are there any limitations concerning Angular that prevent the content script running successfully? Or it is just the coding issue that I have not been able to make it work.
One more problem is I do not own Angular code. It belongs to a website that I wan to use my extension with.

As guided by #wOxxOm, after add the following lines to trigger the event after setting input value (to update Angular model), my problem is solved.
document.getElementsByName("idCard").item(0).value = 'XXXXX';
document.getElementsByName("idCard").item(0).dispatchEvent(new Event("input"));

input type="password" shows text using HTML 5 on IE 11

Here is the basic format of html input
<input id="Password1" type="password" />
It displays text instead of password type.

That looks right. Do you have a link to an example? Maybe it's other html that isn't closed properly. I'd switch type and id just to see if it makes any difference.

I resolved the issue
If you add placeholder in <input id="Password1" type="password" placeholder="type your password" /> it will work in any condition .

using javascript to create an HTML form - text input with spaces

I'm using javascript (backbone) to fill out an HTML form template. The form is an edit form, so it will be populated with existing values.
Unfortunately, when I browse to the form, values for a text input are getting truncated. For example, say the value of the field should be populated with "hello world" - but the form only shows the word before the space (hello) and the actual source looks like this (notice it thinks world is an attribute):
<input type="text" name="name" id="name" value="hello" world="">`
I'm not a huge HTML/Javascript expert. Does anyone know how I can escape the input?
Here's the template text that generates that form:
I'm not a huge HTML/Javascript expert. Does anyone know how I can escape the input?
Here's the template text that generates that form:
<h1>Edit activity</h1>
<form id="edit-activity" name="activity">
<div class="field">
<label for="name"> name:</label>
<input type="text" name="name" id="name" value=<%= name %> >
</div>
<div class="actions">
<input type="submit" value="Update Activity" />
</div>
</form>
Back

<input type="text" name="name" id="name" value=<%= name %> >
Your problem is here. Try this instead
<input type="text" name="name" id="name" value="<%= name %>" >
What's happening is you are basically making this markup:
<input type="text" name="name" id="name" value=hello world >
Without the "s, the browser is interpreting the world value as an attribute. Placing the quotes in there does not adversely affect it, and when you think about it, it makes sense why it would work that way.

Form submit fails to generate query parameters if input element's are in multple div's

If I have a form element as given below, then calling the form's submit will automatically generate the request body/query parameters in the url-encoded form as "username={username}&password={password}&submit=submit" where values in {} are taken from the corresponding input element's text boxes.
<form action="/action.php" method="POST">
<input id="username" type="text" />
<input id="password" type="password" />
<input type="submit" id="submit" value="submit" />
</form>
But if I am going to place my input elements in multiple levels of div's, then the form submit will fail to generate the request body/query parameters.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" id="submit" value="submit" />
</div>
</div>
</form>
Can anyone tell me the reason why it is like that? The specification doesn't mention that the input elements should be immediate children of Form element. I was wondering a proper reason for this behavior.
The values will be populated to the elements and you can check the values also if you edit the changes as given below
<script type="text/javascript">
function logincheck() {
alert ('hi ' + document.getElementById('username').value);
alert ('hi ' + document.getElementById('password').value);
}
</script>
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>

A bit more detail:
I am assuming you are using PHP for the rest of this, you can substitute any other server side language.
You are missing the name attribute on your inputs. Unless you are actually using the id attributes for something you can get rid of them. Form data is listed by the name attribute - for instance the PHP $_GET, $_POST, and $_REQUEST arrays which will be keyed by names of your inputs. No name and the data is ignored.
You can also create an array of inputs by using a pair of brackets after matching names.
Example:
<input name="answers[]" type="text" id="answer1" />
<input name="answers[]" type="text" id="answer2" />
This will create one GET/POST entry that is an array. It will have the key answers with two elements inside the array.
For checkboxes, you will only get a value in the GET/POST when they are checked. You will not get a result if it isn't checked. Important to know. If someone, for instance, turns something "off" you will need to know the list of original inputs to compare against.

The first thing I notice is that your inputs are missing the "name" attribute. It's not required by the HTML spec afaik, but I think this is why the values are not sent with the request.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" name="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" name="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
This should do the trick

The input elements don't have to be directly inside the form element! they can be inside divs tables etc... How about trying to use names along with the ids in the text fields, like the following:
<input type="text" id="username" name="username" />
note the name="username" in the previous example -
to all input elements.