'Convert two button functionalities in one button

<form id="new" action="{{ path('aff_new') }}" method="post" name="aff">
    <input name="affId" id="affCode" type="text" class="form-control" placeholder="{{ 'aff.code' | trans | capitalize }}" required> 
    <button id="createAff" type="submit">Create</button>
</form>

The path aff_new is a route PHP that creates a new data :

#[Route('/aff/new', name: 'aff_new', methods: ['POST'])]
    public function new(Request $request): Response
    {
        if ($request->isMethod('POST')) {
        $code = $request->request->get('aff');
        //some data
        $aff = $this->affRepo->findOneBy(["code" => $aff->getCode()]);
        return $this->redirectToRoute('aff_edit', ['id' => $aff->getId()]);
    }

The second form imports data from JSON.

<form id="import" action="{{ path('aff_import') }}" method="post" name="aff">
    <input type="hidden" data-action="{{ path('aff_json') }}" id="aff_json">
    <select name="aff[code]" data-placeholder="{{ 'affaire' | trans | capitalize }}" required></select>
    <button id="importAff" type="submit">{{ 'import' | trans | capitalize }}</button>
</form>

The path aff_json and aff_import is a route PHP.

#[Route('/aff/json', name: 'aff_json')]
    public function findAll(Request $request): Response
    {
        // some datas
        return $this->json($aff);
    }


#[Route('/aff/import', name: 'aff_import', methods: ['POST'])]
public function store(Request $request): Response
{
    //some datas
            return $this->redirectToRoute('aff_edit', ['id' => $aff_importee->getId()]);
        }
    }
}

And finally I have a js file for execute this two functionalities :

const onClickImport = function () {
        let url = $('#aff').attr('data-action');
        $("#import .select2-ajax").select2({
            dropdownParent: $('#import'),
            // some datas
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.code,
                            }
                        }),
                    }
                }
            }
        }).trigger('change');

        modalImportAffaire.show();
    }

    const onClickNew = function () {
        modalNewAffaire.show();
    }

What I want, it's to do only one form using these two functionalities (two buttons), that means, I can write a value into a type, if the value exists in dropdown I can click on import and if doesn't exist I can click on create, how can I do that?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source