CODEWITHSUNDEEP
javascripthtmldom
HelloWorld1
HelloWorld1

Reputation: 14108

Can't display calculated value

Goal:
Display the value of the calculation in the html page.

problem:

After you have clicked on the submit button, the calculation will be beginning. Thereafter, the page started reloading again by executing "window.onload". This consq makes that I can't view the calculated result.

I just wanna "window.onload" to be loaded once and after that I wanna add more data in the page by pressing submit button without reloading the whole page again. After you have pressed the submit button, that data should be visible.

// fullmetalboy

    <script type ="text/javascript" charset="utf-8" src="scripts/data.js"></script>
</head>
<body>
    <div id ="container">
        <div id ="header">

        </div>
        <div id ="content">

            <table id ="pricetable">
                <thead>
                    <tr>
                        <th>Articlenumber</th>
                        <th>Product</th>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody> 
                    <tr>
                        <td>223</td>
                        <td>a</td>
                        <td>a</td>
                        <td>250</td>
                        <td><input type ="text" size ="3" value ="1"/></td>
                    </tr>
                    <tr>
                        <td>223</td>
                        <td>a</td>
                        <td>a</td>
                        <td>250</td>
                        <td><input type ="text" size ="3" value ="1"/></td>
                    </tr>
                    <tr>
                        <td>223</td>
                        <td>a</td>
                        <td>a</td>
                        <td>250</td>
                        <td><input type ="text" size ="3" value ="1"/></td>
                    </tr>
                    <tr>
                        <td>223</td>
                        <td>a</td>
                        <td>a</td>
                        <td>250</td>
                        <td><input type ="text" size ="3" value ="1"/></td>
                    </tr>
                </tbody>
            </table>





        </div>
    </div>
</body>


window.onload = init; 




function init() 
{
    createForm();
    addColumn();
    addRow();
}



function addColumn()
{

    var tabellHead = document.getElementById("pricetable").tHead;

    for (var a=0; a<tabellHead.rows.length; a++) 
    {
        var nyTH = document.createElement('th');
        tabellHead.rows[a].appendChild(nyTH);
        nyTH.innerHTML = "Summa";
    }


    var tabellBody = document.getElementById("pricetable");

    for (var b=1; b<tabellBody.rows.length; b++) 
    {
        var nyTD = document.createElement('td');
        tabellBody.rows[b].appendChild(nyTD);
        nyTD.innerHTML = "";
    }

}



function addRow()
{
    var newRow  = document.createElement('tr');
    newRow.setAttribute('id', "sumrow");



    var ca1 = document.createElement('td');
    var ca2 = document.createElement('td');
    var ca3 = document.createElement('td');
    var ca4 = document.createElement('td');
    var ca5 = document.createElement('td');
    var ca6 = document.createElement('td');

    var text = document.createTextNode("asdf");


    var font = document.createElement('font');
    font.setAttribute('color', 'white');
    font.appendChild(text);



    ca6.appendChild(font);

    newRow.appendChild(ca1);
    newRow.appendChild(ca2);
    newRow.appendChild(ca3);
    newRow.appendChild(ca4);        
    newRow.appendChild(ca5);    
    newRow.appendChild(ca6);     

    var t  = document.getElementById('pricetable');

    t.appendChild(newRow);  
}



function createForm()
{
    var t  = document.getElementById('content');

    var a = "<form><input onclick='tttest();' value='Rensa' type='submit'></form>";

    t.innerHTML += a;
}




function calc()
{



        var lass = document.getElementById("pricetable");

        var tabellBody = asss.getElementsByTagName("tr");


        for (var b=1; b<tabellBody.length; b++) 
        {
            var godis = tabellBody[b].cells[4].childNodes[0];
            var godia = tabellBody[b].cells[3];

            var a = godia.innerHTML * godis.value;

            var text = document.createTextNode(a);


            //tabellBody.rows[b].cells[5].innerHTML = a;

            var celler = tabellBody[b].getElementsByTagName("td");

            var medelelement = celler[celler.length - 1];

            medelelement.appendChild(text);

        }


}

Upvotes: 2

Views: 435

Answers (4)

Samuel Liew
Samuel Liew

Reputation: 79032

Just change the submit button to a normal button so that it doesn't submit the form when clicked.

var a = "<form><input onclick='tttest();' value='Rensa' type='button' /></form>";

Upvotes: 1

huehnerfaust
huehnerfaust

Reputation: 31

Just return false in the onclick handler from the submit button, that should prevent the form from submitting

$('input[type=submit]').click(function() {
    /*do my calc stuff*/
    return false;
});

Upvotes: 1

Jose Faeti
Jose Faeti

Reputation: 12302

You are submitting a form, hence your page will obviously reload.

You have to either

a) Prevent the form submit and calculate the result.

b) Use AJAX to submit the form without having to reload the page.

Upvotes: 0

hungryMind
hungryMind

Reputation: 6999

Submit button should return false, like this

onsubmit = "calc(); return false;"

Upvotes: 1

Related Questions