change submit button name based on selected dropdown list

Question

How to change the button's name based on the selected values? This function I found returns null .

 function myFunction(new_id) { if (new_id == 0) { return; } document.getElementById("submit").id = new_id; // test new id // remove this after testing alert(document.getElementById(new_id).id); }

 <select id="select" name="select" class="btn btn-block gray dropdown-toggle" required onchange="myFunction(this.value)"> <option Disabled value="0" selected="selected">- Select Me -</option> <option value="5"> 5</option> <option value="10"> 10</option> </select> <button type="submit" id="submit" name="">Button</button><br>

Answer 1

You shouldn't be changing the button's ID, you should change its name.

 function myFunction(new_id) { if (new_id == 0) { return; } document.getElementById("submit").name = new_id; alert(document.getElementById("submit").name); }

 <select id="select" name="select" class="btn btn-block gray dropdown-toggle" required onchange="myFunction(this.value)"> <option Disabled value="0" selected="selected">- Select Me -</option> <option value="5"> 5</option> <option value="10"> 10</option> </select> <button type="submit" id="submit" name="">Button</button><br>

However, changing the submit button's name seems like a poor design. I think it would be better to change its value.