0

Here's the function that checks if the form is complete.

So, what I'm trying to do:

  1. If radio is not selected, throw a message.
  2. If radio is "yes", but text is not entered, throw error.
  3. If radio is "no" but text is entered, make the text empty.
  4. If all is good, add stuff into `allResponses

The form was displayed 5 times, and input was as follows:

Yes a1

No

Yes a3

No

Yes

Now, this input should display an error since in 5th case, "yes" is selected but nothing is entered in the textbox.

However, I get this:

https://i.sstatic.net/NXMDl.png

Also, the text is not being updated as in 1st and 3rd cases.

I don't know a lot about JS, so please provide me with as explained responses as you can.

EDIT: Complete code: http://pastebin.com/scNSNM2H

Thanks

Improve this question
13
  • 1
    place snipplets to the question. make fiddle if you can, narrow your problem, add sample html markup Commented Jan 25, 2013 at 23:27
  • what is data["itemIndex"] ? Commented Jan 25, 2013 at 23:35
  • Just a data structure that hold all values.. data is defined as follows: data = {"itemIndex":-1,"responses":[]} Commented Jan 25, 2013 at 23:37
  • 1
    narrow your problem this is pretty easy make thing you asking for, but it is pretty hard to understand what is your form is, what is that out of scope variables Commented Jan 25, 2013 at 23:38
  • OMG, html markup form please.... I bet fiddle will be hard for you Commented Jan 25, 2013 at 23:44

1 Answer 1

Reset to default
2

You have this in a loop:

var exaggerationPart = document.getElementById('exaggeration').value

And then you check to make sure it has a value for each item. But you will get the same value each time.

You are creating multiple inputs with the same id, "exaggeration". This is invalid HTML. Id's must be unique. To correct this, you can increment the id the same as you are doing with other elements (such as, input[name='response"+thisJokeIndex+"']). 

var exaggerationPart = document.getElementById('exaggeration' + thisJokeIndex).value

tipTD2.append("<input type='text' name='exaggeration' id='exaggeration" + tipIndex + "' size='70'>")

Working demo: jsfiddle.net/svvge/2

Edit: To clear the value of the text box, you must change the value property of the text box element. Right now you are just changing the value of a variable.

var exaggerationInput = document.getElementById('exaggeration' + thisJokeIndex).value;
var exaggerationPart = exaggerationInput.value;

exaggerationInput.value = '';
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Why will I get same value everytime? If I'm looping, shouldn't the values be looped as well? Ans how can I fix it then?
@KaranGoel - Why would it change? There is nothing special about a for loop that would cause document.getElementById('exaggeration') to return a different element in subsequent loop iterations. document.getElementById will always return the first element with a matching id.
Oh yes, makes sense. But then when I make exaggerationPart empty (if "no" radio is selected) then why does it still contain the text that was added in first textbox? Like in the example in OP.
Because exaggerationPart is a variable containing a string. You've changed the value of the variable only. To change the value property of the element, you must get a reference to the element and assign the value to the property. I'll update my answer.
I don't get it. exaggerationPart contains the value of the text field. So I make exaggerationPart empty, and then adding it to the array, why won't the change be reflected?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.