Change input name according to a specific button in JS

Question

I'm trying to create or import some datas

If data exist, I'm displaying the import button and if didn't exist, displaying the create button. I'm working with autocomplete (jquery-ui)

So this is my html :

    <input name="Test" id="aff" type="text" oninput="onInput(this.value)" class="form-control">
                    
    <button id="create" type="submit" >Create</button>-->
    <button id="import" type="submit" style="display: none">Import</button>
            
</form>

I just want to know if is it possible to change name attribute of a input text ? So, if I click on import the name of input will be :

<input  name="Test"

And if I click on create the name of input will be :

<input  name="Test2"

Note: I want use only one input and not 2 input with this two differents names

Anybody can help me and say if it's possible

Answer 1

Yes you can change the value of the name attribute using the attr() method :

$("#btnCreate").click(function(){
  $("#aff_qp").attr("name","affId");
  console.log($("#aff_qp").attr("name"));
});

$("#btnExport").click(function(){
  $("#aff_qp").attr("name","aff[code]");
  console.log($("#aff_qp").attr("name"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="aff_qp" type="text" name="aff[code]" />
<button id="btnCreate">Create</button>
<button id="btnExport">Export</button>