Отключить обновление страницы, после отправки формы

#javascript #html #canvas

При отправке формы, на странице должен отрисовываться canvas. Но после того как форма
отправлена, canvas отрисовывается на долю секунды и потом исчезает. Как сделать так,
чтобы после отправки, canvas оставался на месте.

html code:


    Enter math expression:
    
    





js:

function drawShelves() {
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');

    canvas.width  = 800;
    canvas.height = 400;

    ctx.lineWidth = 1.0;
    ctx.strokeStyle = 'black';
    ctx.beginPath();

    // left shelve
    ctx.strokeRect(5, 100, 340, 10);
    ctx.moveTo(5, 110);
    for (var i = 5; i < 340; i+=10) {
        ctx.lineTo(i+10, 100);
        ctx.moveTo(i+10, 110);
    }

    // right shelve
    ctx.strokeRect(455, 100, 340, 10);
    ctx.moveTo(455, 110);
    for (var i = 455; i < 790; i+=10) {
        ctx.lineTo(i+10, 100);
        ctx.moveTo(i+10, 110);
    }
    ctx.stroke();
}

    

Ответы

Ответ 1

Есть два варианта. 


Отключить событие нажатия на кнопку по умолчанию:



Отключить событие отправки формы по умолчанию:





Но в обоих случаях вам нужно каким-либо образом без перезагрузки страницы отправить
данные на сервер. Самый верный способ -- использовать Ajax запрос. Поэтому код будет
проще переписать следующим образом:



function drawShelves() {
    // здесь отрисовка канвы

    // здесь ajax запрос

    return false;
}


Подробнее про Ajax можно прочитать здесь: http://javascript.ru/ajax/intro.


Ответ 2

...function(event) {
  // Откоючает тригер события формы
  event.preventDefault();
  ... some code...
}