Different button's name at the opening of jquery dialog

Question

Hello, I have a dialog form and when I open it I have the button "add a task", I would like to keep this "name", when I open the form from an empty case, but I want to have a button named "edit this task" when I open an already existing task.

I also want to send the form with this button when I push enter key, no matter where I am on the form.

Thank you.

Answer 1

You'll need to add a bit more info on how 'edit this task' is gonna work because there are a few different implementations from server-side to client-side (populated upon parse? forms ajax or not? etc)

If you run your actual "submit" work on the submit event you can take advantage of when the user presses ENTER in the form. (Aside from a text area of course)

<form id="myForm" onSubmit="return yourCoolSubmitFunction();" >

or

$( function() {
    $('#myForm').submit(function() {
       // code here that can validate or simply
       return true; // submit the form
       // return false won't submit, which is good for validating input
    });
});

As for the button text if the form is being populated as an "edit form" via your server-side code then you can simply change the button label then when you generate the html for the first time.

If it's ajax, you can update the button when you load the form's data.

If i'm still not hitting the nail on the head for ya, perhaps adding a form element to check for? like <input type="hidden" name="isEdit" value="1" /> if in edit mode that you can check for? if( $('#myForm input[name=isEdit]').val() == 1 ) ...

Answer 2

Ok, Sorry, I didn't think my code was necessary but looks like it is^^

$("#dialog-form").dialog({
            autoOpen: false,
            height: 560,
            width: 400,
            modal: false,
            buttons: {
                'Add task': function() {
                    $(".ajax").trigger('submit');
                },
                'Back': function() {
                    $("#dialog-form").dialog('close');
                }
            },
            open: function() {
                $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus(); 
            },
            close: function() {
                allFields.val('').removeClass('ui-state-error');
            }
        });

$(".ajax").submit(
        function(e) {
        var datas = $(this).serialize();          
        $.ajax({
            type: 'POST',      // envoi des données en POST
            url: 'Planning.php?action=ajoutTache',    
            data: datas,     // sélection des champs à envoyer
            success: function() {
                $("#dialog-form").dialog('close');
                location.reload();
            }
        });
        return false; // Pour empêcher le submit vers la page 'action'
    });

I want the button "add task" to become "edit task" when the task already exists.

Answer 3

$('.ajouter-tache')
        .click(function() {
        if($(this).attr('id_tache')!=""){ 
            $('.ui-dialog-buttonpane button:eq(0) .ui-button-text').each(function(e, f){
                $(f).html('Modifier la tache');
            })
        }
        else {
            $('.ui-dialog-buttonpane button:eq(0) .ui-button-text').each(function(e, f){
                $(f).html('Ajouter une tache');
            })
        };
    })

Here is what I did, it works but as I'm beginner and have not a lost of time to work on jQuery it kind of sucks, especially the selector redundancy and the each wich is useless (but I don't know how to take only that element.)