javascript input value empty after assignment

Question

very basic question; I bet it was already asked here but really couldn't find it.

okay so I have a little html form with a hidden input:

<input type='hidden' id='switchtonew' name='new' value='no'>

and a button that shall change the value of my hidden input to 'yes', via a function because its doing a couple more things, but these work...:

<button onclick='maneu()'>switch</button>

and the function:

function maneu(){
  [...]
  document.getElementById('switchtonew').value = 'yes';
}

and now if you click the button, the value of my hidden input just vanishes.

why? I did try element.setAttribute('value', 'yes'); too.

Im really confused, please help :(

EDIT: changed function name to real, used one. still not working.

switch is a reserved keyword. Try using another name for your function. — Terry
– Terry, Commented Sep 13, 2017 at 14:42
Try using a syntax highlighter. When you use a reserved word like this it will be obvious. I'm always forgetting that I can't use delete or class. — Chris
– Chris, Commented Sep 13, 2017 at 14:45

Nina Scholz · Accepted Answer · 2017-09-13 14:50:12Z

3

You are using a reserved word switch. By renaming the function, it should work.

You could use type="button" for the button to prevent submitting.

function switchValue() {
    document.getElementById('switchtonew').value = 'yes';
}

<button onclick="switchValue()" type="button">switch</button>
<!-- type is text for displaying the value -->
<input type="text" id="switchtonew" name="new" value="no">

edited Sep 13, 2017 at 14:50

answered Sep 13, 2017 at 14:42

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kingspride Over a year ago

function name switch was only here as an example. the real function name is maneu().

somosluz · Accepted Answer · 2017-09-13 14:46:00Z

1

is the button submitting a form? Probably the page is reloading and the inputs reset, if that is the case, use an <a> instead of a <button> or add an event.preventDefault() to button action

answered Sep 13, 2017 at 14:46

somosluz

466 bronze badges

Comments

cn0047 · Accepted Answer · 2017-09-13 14:46:38Z

1

By default button type is submit, hence:

<button onclick='yourSwitch()'>switch</button>

will submit your form, and as result, you will see yes in URL (in case you use GET form method), like:

yourhost.com/index.html?new=yes

After reload, your page will come to initial state, which is:

<input type='hidden' id='switchtonew' name='new' value='no'>

answered Sep 13, 2017 at 14:46

cn0047

17.2k7 gold badges61 silver badges75 bronze badges

Comments

kingspride · Accepted Answer · 2017-09-13 14:50:06Z

0

Oh man, sorry for bothering. As it's always, you ask something and find the solution immediately by yourself. my function is emptying a couple of inputs by looping through them, and setting styling options.

thus, I set the value to yes and immediately afterwards it deletes all values of input tags.

sorry. Im stupid.

answered Sep 13, 2017 at 14:50

kingspride

13 bronze badges

3 Comments

cn0047 Over a year ago

Is it really answer for original question?)

kingspride Over a year ago

yes you see:

document.getElementById('switchtonew').setAttribute('value', 'yes'); 				for(input of document.getElementsByTagName('input')){ 					if(input.type != 'checkbox'){ 						input.value = ''; 					}else{ 						input.removeAttribute('checked'); 					} 				}

kingspride Over a year ago

input.value = ''; is the essential part. styling fails in comments sorry

Tom O. · Accepted Answer · 2017-09-13 14:53:21Z

0

Something like this?

function maneu() {
  var currentValue = document.getElementById('switchtonew').value;
  if (currentValue === 'yes') {
    document.getElementById('switchtonew').value = 'no';
  } else if (currentValue === 'no') {
    document.getElementById('switchtonew').value = 'yes';
  }
  console.log('value is now: ' + document.getElementById('switchtonew').value)
}

<button onclick='maneu()'>switch</button>

<input type='hidden' id='switchtonew' name='new' value='no'>

answered Sep 13, 2017 at 14:53

Tom O.

5,9813 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

javascript input value empty after assignment

5 Answers 5

1 Comment

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related