More salty way of creating a Submit button a JS App?

JavaScript
1

Hello, I am new to JS development and I am trying to find the most elegant (“salty” ) way of making a submit button work for one my personal JS apps.

MY HTML

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RSVP App</title>
  <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  
</head>
<body>
  <div class="wrapper">
    <header>
      <h1>RSVP</h1>
      <p>A Treehouse App</p>
      <form id="registrar">
        <input type="text" name="name" placeholder="Invite Someone">
        <button type="submit" name="submit" value="submit">Submit</button>
      </form>
    </header>
		
    <div class="main">	
      <h2>Invitees</h2>
      <ul id="invitedList"></ul>	
    </div>
  </div>
      
</body>
  <script src="app.js"></script>

</html>

My JS File

const form = document.getElementById('registrar');

const input = form.querySelector('input');



form.addEventListener ('submit', (e) =>  {


			e.preventDefault(); // preventing the devaul of the object from happening.

			const text = input.value; // value takes value of the input value and stores it in text

			const ul = document.getElementById('invitedList'); // got to select it first before creating something from it

			const li  = document.createElement('li');


			li.textContent = text; // take the input/values from text then change them into a string using textContent. attach them into li element.

			ul.appendChild(li); // append them.



});

I’m just trying to use just straight JS so any input is deeply appreciated (please no libraries or frameworks, those are for later projects. I need to grow in using JS as deeply as possible before I build in the other frameworks/libraries.)

2

If you don’t intend to submit the form I would change it to a <button type="button"> instead of listening to a submit event and then cancelling it.

form.querySelector('input') may work for now but may or may not work when you have multiple input fields. Better give that field an ID and select that.

Also almost nobody uses document.getElementById anymore AFAIK. Use document.querySelector('#registrar') instead.

Lastly, those comments are fine for now, but you need to ditch them when you get more proficient as they’re really muddying the waters.

3

lol I’m not sure how you’re using the word “salty” but that is certainly not how I’ve ever heard it used.

But what exactly is wrong with your code? I don’t see anything wrong with this and this is similar to how I would do it.

If you don’t intend to submit the form I would change it to a instead of listening to a submit event and then cancelling it.

I think this is a perfectly valid way of going about it, why do you say it’s bad?

Also almost nobody uses document.getElementById anymore AFAIK.

getElementById is considerably more performant and is definitely still used. I prefer it if I’m selecting by an ID. There’s really not a good reason not to, you’re only saving a few characters.

https://jsperf.com/queryselectorall-vs-getelementbyid/6

4

It just feels off to have code that raises an event (on submit) only to kill immediately when it occurs. To me that sounds like the wrong event was chosen and onclick is a better fit.

Of course, if the submit actually does something server side when Javascript is disabled then the approach is perfectly fine.

1 Like
5

Didn’t know that. My bad :slight_smile:

1 Like
6

It just feels off to have code that raises an event (on submit) only to kill immediately when it occurs. To me that sounds like the wrong event was chosen and onclick is a better fit.

I can see your point, but such is life in JS heavy apps. e.preventDefault() is fairly common. You’re still semantically “submitting” the form, so it’s valid. A lot of times I just don’t use forms at all and gather my data onClick.

7

I’m only canceling it because when you create the element from the submited input from the user, I want it to show in the browser and not simply refresh. I don’t know of any other way to stop the event from happening without using the prevent default. Can you show me code on what you mean?

8

I’m trying to learn javascript as deeply as I can by doing the same problem multiple ways. LOL, good comment on the salty thing. Perhaps I’m mistaken, but often I hear the word salty as a software developer slang for that that is elegant (does a lot with few lines). What I am asking is there anyway to make this code more elegant within Javscript?

Could I use prototypes and instances? Could I use a for loop? What ever does the same thing with less lines of code is all I am looking for.

(P.S. I would not reference the Urban dictionary as a reliable resource, lol).

9

Why are less lines desirable? That tends to make the code more difficult to understand, doesn’t it?

Should the aim be to achieve the most expressive code instead? Frequently that is done with fewer lines than normal, but the goal that achieved it is very different.

10

Why is onclick better. should I just use this??

‘’’

form.addEventListener (‘onclick’, (e) => {

/// code

}

‘’’

instead of this

form.addEventListener ('submit', (e) =>  {

/// code

}
11

onclick is not better, for it doesn’t catch the submit event, resulting in the form attempting to submit when ou click the submit button.

Have you considered using ES6 template strings?`For then, you only need the following:

const form = document.querySelector("#registrar");
const invitedList = document.querySelector("#invitedList");
form.addEventListener("submit", (e) => {
    e.preventDefault();
    invitedList.innerHTML += `<li>${form.elements.name.value}</li>`;
});
12

I’ve found a good reason. Using getElementById and querySelector results in confusion about why one was used instead of the other. As querySelector is more flexible, sticking with a standard of using just querySelector results in less confusion about things, and later on when you change a unique identifier to a more flexible class name, you don’t need to change getElementById as well.

13

Or, how about the following without the form, because the form is clearly not required.

      <p>A Treehouse App</p>
      <input type="text" name="name" placeholder="Invite Someone">
      <button class="addname">Add name</button>

const addname = document.querySelector("button.addname");
addname.addEventListener("click", () => {
    const name = document.querySelector("input[name=name]");
    const invitedList = document.querySelector("#invitedList");
    invitedList.innerHTML += `<li>${name.value}</li>`;
});
14

LOL, good comment on the salty thing. Perhaps I’m mistaken, but often I hear the word salty as a software developer slang for that that is elegant (does a lot with few lines).

Yeah, I’ve never heard that before.

(P.S. I would not reference the Urban dictionary as a reliable resource, lol).

lol Salty is a pretty common gaming term. Most SEs are gamers too. It’s literally a word I say just about every day.

What I am asking is there anyway to make this code more elegant within Javscript?

I honestly don’t think there is much, there’s not really enough here. This is what it would look like if it were mine.

const form = document.getElementById('registrar')
const input = form.querySelector('.someClassNotInput')
const invitedList = document.getElementById('invitedList')

const handleSubmit = e => {
  e.preventDefault()
  const li =  document.createElement('li')
  li.textContent = input.value
  invitedList.appendChild(li)
}

form.addEventListener('submit', handleSubmit)

K.I.S.S. is better than over engineered stuff that you don’t need. Leave that stuff for when you need it.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.