How to add dynamic data in source of html using Javascript

Question

I am using a simple Javascript toggle function with the following code.

<script>
function add_more(){
if (document.form.more[0].checked==true)
{

document.getElementById('moreTxt').style.display="block";

}

else if (document.form.more[1].checked==true)
{

document.getElementById('moreTxt').style.display="none";
}
}
</script>


do want to enter something more ? 
<form name="form">
<input type="radio" value="yes" name="more" onclick="add_more()" /> Yes
<input type="radio" value="No" name="more" onclick="add_more()" /> No
<div id="moreTxt" style="display:none">
hi you can enter more here 
<textarea rows="3" cols="4">
</textarea>
</div>
</form>

The Problem is if I click on 'yes', and for some reason I refresh the page, then the 'yes' radio button remains checked but moreTxt div hides (i.e. its default visiblity mode).

How should I tackle this problem?

Why don't you pass true or false as parameter to your add_more() function? Does the page refresh when you click yes or when you manually refresh the page after you 've clicked yes? — ThdK
– ThdK, Commented Jul 13, 2012 at 6:37
my code is working fine, what i want is, using javascript. i write anything in my html page, but that doesn't show in source of the page, i want to pass this dada into database, and data from this div is not going properly — Muhammad Arslan Jamshaid
– Muhammad Arslan Jamshaid, Commented Jul 13, 2012 at 10:57
In short, i want to preserve the state of radio button even though the page refreshes. Problem is, when the page refreshes all elements are set to its default attributes, same case with the moreTxt div, it goes to hidden and the radio button of yes is still checked — Muhammad Arslan Jamshaid
– Muhammad Arslan Jamshaid, Commented Jul 13, 2012 at 11:14

Roy Tang · Accepted Answer · 2012-07-13 06:36:23Z

1

Check the value of the control on document ready and adjust the div visibility accordingly.

answered Jul 13, 2012 at 6:36

Roy Tang

5,75210 gold badges49 silver badges78 bronze badges

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

Comments

Arkadiusz 'flies' Rzadkowolski · Accepted Answer · 2012-07-13 06:37:41Z

0

This will reset all your input on load:

<script>
function resetChkBox() {
    var e=document.getElementsByTagName('input');
    var i=0;
    while(i<e.length) {
        if(e[i++].type=='radio') {
            e[i].checked=false;
        }
    }
}
</script>


  <body onload="resetChkBox()">

answered Jul 13, 2012 at 6:37

Arkadiusz 'flies' Rzadkowolski

5,8372 gold badges32 silver badges31 bronze badges

1 Comment

bhuvin Over a year ago

If its done this way then the statefulness provided by the browser will be hurt. If there is a situation where the page is loaded due to some server postbacks , then this will be a bad case.

Dan Dinu · Accepted Answer · 2012-07-13 06:38:22Z

0

you should perform you add_more function onDucomentReady Assuming you're using jquery:

       $(document).ready(function() {
         add_more(); 
       }
       )

or use plain javascript equivalent of document.ready()

answered Jul 13, 2012 at 6:38

Dan Dinu

33.6k25 gold badges85 silver badges120 bronze badges

Comments

bhuvin · Accepted Answer · 2012-07-13 06:43:56Z

0

If this is to be performed without jquery which should be the case since including jquery for such small thing will be overkill :

document.attachEvent("onDOMContentLoaded", function(){
    ready()
  });

In ready function check the value of the radio button.

answered Jul 13, 2012 at 6:43

bhuvin

1,4021 gold badge12 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to add dynamic data in source of html using Javascript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related