Javascript questions

Asked

Viewed 119 times

-3

I’m having trouble solving these exercises, if you could help... This is the code :

<form name="myForm">
    <label>Radio station name
        <input type="text" name="name" />
    </label>
    <select name="music_type">
        <option value="rock" selected>Rock</option>
        <option value="pop">Pop</option>
        <option value="jazz">Jazz</option>
    </select>
    <button onclick="saveForm()">Submit</button>
</form>

And the questions are:

  • How to write a Javascript function that stores the input values of form in Session Storage, when the user clicks on the button Submit?

  • What should I change in the previous function, using jQuery, so that when the button is clicked, the background of the form is changed to gray?

javascript jquery

  • form name="myForm" <label> Radio station name <input type="text" name="name"></label> select name="music_type" option value="rock" Selected>Rock</option> <option value="pop">Pop</option> option<value="jazz">Jazz</option> </select> <button onclick="saveForm()">Submit</button> </form>

  • 4

    Hi John, Welcome to Stackoverflow! We’re not going to solve the problem for you. We’d be happy to help, but you need to be more specific about what part of the code you’re struggling with. Still missing some code, you can [Dit] the question and put together the rest, along with explanation of what you were able to do and where you can’t get more.

  • is just what I have of code,my difficulty is in relation to these issues not being able to accomplish them

  • 1

    @johnmiras, what have you tried to do? What is your doubt regarding what you have tried to do?

1 answer

4


I’m not gonna solve your exercise, but I can explain what you need to think about to solve.

When you have a <form> with a button (and notice that when the button does not have the attribute type="" it takes by default type="submit"), by pressing the button it will send the form data and refresh to the page.

How have you onclick="saveForm()" this will run a function called saveForm that has to be in the global scope. You can read here about what that means..

Within this function you must save to the localStorage. There’s many questions here on Sopt about localStorage, to know more if it’s not clear.

You have to take into account that localStorage guard strings. That means you have to serialize the data before you insert it. You can do this with the JSON.stringify(teusDados);

How to fetch the data?

Your elements have an attribute name right? then you can use var select = document.querySelector('[name="music_type"]'); in the case of select, and the same for the input. To save your value just do var valorSelect = select.value;.

How to assemble the data?

You can make an object like this:

var teusDados = {
    select: select.value,
    input: input.value
};

and then use it on JSON.stringify as I said above.

Regarding the second question, I think it’s advanced to the knowledge you have today. You need to know what jQuery is and how it takes arguments and turns them into jQuery objects. That’s a lot to talk about here. But the steps you have to take use these methods:

$(botão) // tens de passar o elemento <button> para o jQuery, provavelmente vais queres usar um seletor CSS: 'button'
    .closest('form') // para selecionares o ancestral/pai mais próximo que seja uma <form>
    .css(attributo, valor)

The syntax of .css() is (atributo, valor). You’ll want to use background-color and gray color there.

Good luck!

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.