jQuery How to stop functions so they happen one at a time

I have a form where a user can enter a page title into an input field and it will generate a URL. On the submit button click the value is displayed in a different input field(URL). If they are not happy with their URL they can manually edit it inside that field and then save their changes via a button click.

The b开发者_StackOverflow中文版utton's value also changes depending on the state of the URL field.

My code is working but I have a problem with the last 2 functions happening at once, I have tried adding StopEventPropagation (or similar) and that has not worked for me. Please help if you can.

The JSfiddle is here

It's impossible in JavaScript or jquery to guarantee a priority for event order. I would recommend trying to change the 2nd event function to a normal function and calling it at the end of the 1st

function clickhandler(event)
{
   //do stuff
   //...
   clickhandler2(event);
}

function clickhandler2(event)
{
   //do stuff
   //...
}

Last 2 functions fire together because you assigned them as a click handler to the same element.

consider the following JS:
I've combined bodies of both functions to 1. They will execute one after another now.

// Display entered text in URL field on submit
    $("input#page_url_button").click(function () {
      var text = $("input#page_title").val();
      $("input#page_url").val(text);
    });


// If URL has info in it, then change value of button and add class to button
    $("input#page_url_button").click(function () {
    if( $("input#page_url").val().length > 0 ) {
          $(this).val("Edit URL");
          $(this).addClass("edit_url_button");
    }

    if( $(this).hasClass('edit_url_button') ) {
          $(this).val("Save");
          $("input#page_url").removeAttr("disabled");
          $(this).removeClass("edit_url_button");
          $(this).addClass("save_url_button");
    }

    }); // This part is getting skipped, I need to find a way to include this in the process

Is this what you're looking for:

$("input#page_url_button").click(function() {
    // Display entered text in URL field on submit
    var text = $("input#page_title").val();
    $("input#page_url").val(text);
    if ($(this).hasClass('edit_url_button')) {
        $(this).removeClass("edit_url_button");
        $(this).addClass("save_url_button");
        alert('Saved!');
        $(this).val("Submit");
        $("input#page_url").val('').attr('disabled', 'dsabled');
    }
    else if ($("input#page_url").val().length > 0) {
        $('input#page_title').val("Edit URL");
        $(this).addClass("edit_url_button");
        $(this).val("Save");
        $("input#page_url").removeAttr("disabled");
    }
});

Rather than combining both handlers I used jQuerys live event handler for the second click.

$("input#page_url_button.edit_url_button").live('click', function () {
      alert("2");
      $(this).val("Save");
      $("input#page_url").removeAttr("disabled");
      $(this).removeClass("edit_url_button");
      $(this).addClass("save_url_button");
});

See example at http://jsfiddle.net/dJPvJ/

Edit:

I was half-way there with my original answer, this amended code should do what you need:

// If URL has info in it, then change value of button and add class to button
$("input#page_url_button.save_url_button").live('click', function () {
if( $("input#page_url").val().length > 0 ) {
      $(this).val("Edit URL");
      $(this).addClass("edit_url_button");
}
}); // This part is getting skipped, I need to find a way to include this in the process


// If this button has class (edit_button_url) change value, add new class and remove the Dsiabled attr from URL field
$("input#page_url_button.edit_url_button").live('click', function () {
      $(this).val("Save");
      $("input#page_url").removeAttr("disabled");
      $(this).removeClass("edit_url_button");
      $(this).addClass("save_url_button");
});

To get this to work you also need to add "save_url_button" to the original markup:

<input id="page_url_button" type="button" value="Submit" class="save_url_button fright" style="width:60px">