无法触发刷新javascript的一部分

Question

The other answers to this question deal with timing whereas with this problem deals with refreshing a portion of javascript within an if statement.

Once the HTML page loads there is one select element visible. Depending on which option is selected a different set of input fields will appear.

My initial problem was that when the user reclicks the button the function I made 'Submit()' will redraw the same input fields over the old ones causing a mess. You see the same input fields being drawn as many times as the user clicks "submit".

I added a function called checkBool() to check whether the form has been drawn or not. If it has, then it'll call the window.location.reload() function. if not, it'll just call my Submit() function.

The code now won't pile input fields anymore. Instead when I hit the submit button a 2nd time the drawn forms will disappear, even if a different option is selected.

What I want to happen is when the user chooses a different option and hit's submit, the present form is removed and the new set of forms are automatically drawn.

Here is my checkBool() function:

var boolean = new Boolean();
function checkBool(){

    if(boolean==false){
        Submit();
    }else if(boolean==true){
        window.location.reload();
        boolean=0;
        Submit();
        return boolean;
    }
}

It seems that the window.location.reload() function immediately reloads the script and the browser never executes the "Submit()" function.

Answer 1

My choice would be to draw the different forms to different divs, with initially none of them shown. The onchange event of the select box or the submit button cycles through this divs, setting .style.visibility='hidden' or 'visible' depending on whether this is the requested form or not.

This has also the usability advantage, that if a user changes his mind after starting to fill out a form, later changes his mind back, his input will still be there.

Answer 2

I found the answer to my question.

Instead of refreshing the javascript I can remove the elements all together. This is what I was attempting to do by finding a way to 'refresh' the page.

Instead of hiding the elements and leaving a huge gap in different spots I can strategically place the elements within divs and use the removeChild() function.

Here is an example of how it works...

This is my html:

<button type="button" onclick="draw()">Draw</button>
<button type="button" onclick="erase()">Erase</button>
<div id="parent">

</div>

Here is my javascript:

    function draw(){
     `docume`nt.getElementById("test").innerHTML=InputField("parent","child","text",5,10).value;
}

function erase(){
    var parent =document.getElementById("parent");
    var child = document.getElementById("child");
    parent.removeChild(child);


}

So what happens here is when the user clicks the button "draw" the draw() function is called. This function creates an input field.

I had created my own function that would draw an input field with the variable I passed it. That's what the InputField() function is all about.

After that the user clicks the 'erase' button to call the erase function.

The erase function grabs the parent element named 'parent' and the child element (which in this case is called 'child' - you can see I passed the name 'child' into my InputField() function)

Then remove the child element with the remove.Child(child) portion of the code.

If you download jquery into your webpage you can use the removeDiv() function to do the same thing.