[FIXED] How to set button value in javascript

Issue

I want to set different values of button under different situations. The modal display style is "none" at first. I try to use $("#submitform").value ="Add Event"; however, it doesn't work. When the modal pops up, the button value is still empty.

var btn = document.getElementById("myBtn");
    btn.onclick = function() {
        $("#submitform").value ="Add Event";
        modal.style.display = "block";
    };

<div id = "myModal" class = "modal">
<form name="addEvtForm" class="addEvtForm" >
  title:<input type="text" name="title" id="title" autocomplete="title"><br>
  <input type="button" value="" id="submitform">
</form>
</div>

Solution

First, you didn't add jQuery to the html, so the .value didn't work. Second, there was invalid syntax for your code. I fixed it up:

$("#submitform").click(function() {
        $('#submitform').val('Add Event');
        $(".modal").css("display", "block");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "myModal" class = "modal">
<form name="addEvtForm" class="addEvtForm" >
  title:<input type="text" name="title" id="title" autocomplete="title"><br>
  <input type="button" value="" id="submitform">
</form>
</div>

This should work.

Answered By - Random Channel

Answer Checked By - Clifford M. (PHPFixing Volunteer)