Question

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 button’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

Answer 1

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">