1 Replies - 719 Views - Last Post: 31 October 2013 - 01:22 PM

#1 Deadblade97   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 31-October 13

My html elemt changes back automatically when the function is done

Posted 31 October 2013 - 12:46 PM

I can't get my code to work. It is supposed to change the text in the html element, which it does, but when I click OK on the final alert popup, it changes back to the original text. The text is submitted through a form and this is the function that is run when the "Submit" button is pressed:
function runUpdate(){
        $(".mP").css("background-color", "black");
        $("body").css("background-color", "white");
        var x11 = document.updateGame.f11.value; //sets x11 to the value of the form's input element with name f11
        var x12 = document.updateGame.f12.value;
        var x21 = document.updateGame.f21.value;
        var x22 = document.updateGame.f22.value;
        var x31 = document.updateGame.f31.value;
        var x32 = document.updateGame.f32.value;
        var x41 = document.updateGame.f41.value;
        var x42 = document.updateGame.f42.value;
        var x51 = document.updateGame.f51.value;
        var x52 = document.updateGame.f52.value;
        var x61 = document.updateGame.f61.value;
        var x62 = document.updateGame.f62.value;
        var x71 = document.updateGame.f71.value;
        var x72 = document.updateGame.f72.value;
        var x81 = document.updateGame.f81.value;
        var x82 = document.updateGame.f82.value;
        for(var x = 11; x <= 81; x += 10){
                $(".mP").css("background-color", "white"); //temp
                        case 11:
                                $("." + x).html(x11);
                        case 21:
                                $("." + x).html(x21);
                        case 31:
                                $("." + x).html(x31);
                        case 41:
                                $("." + x).html(x41);
                        case 51:
                                $("." + x).html(x51);
                        case 61:
                                $("." + x).html(x61);
                        case 71:
                                $("." + x).html(x71);
                        case 81:
                                $("." + x).html(x81);
                alert("." + x); //temp

Does anyone have any suggestions on how I can make the new text stay?

This is the complete code for my HTML, Javascript and CSS files.
HTML - http://pastebin.com/fQrG5st9
CSS - http://pastebin.com/xPUkbMXW
Javascript - http://pastebin.com/8DL3bAtk

Also I'm sorry for any formatting errors, this is my first post here.

Is This A Good Question/Topic? 0
  • +

Replies To: My html elemt changes back automatically when the function is done

#2 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6554
  • View blog
  • Posts: 26,568
  • Joined: 12-December 12

Re: My html elemt changes back automatically when the function is done

Posted 31 October 2013 - 01:22 PM

When the form is submitted it reloads the current page, wiping-out any changes you have made to the page.

If you don't want to submit the form then you could trying adding return false; at the end of your submit-button's click event. It would be better, and more reliable IMO, to use the onsubmit attribute of the form: this is what it is for.

If you still wish to submit some data from the form, but without reloading the page, then you could investigate Ajax, although this wouldn't require a submit button.

It is also possible to use a server-side script to build different versions of the same page depending on whether the form was submitted or not.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1