[解決済み] Jquery 入力フィールドの値設定

質問

入力フィールドがあり、そのクラスを使用して値を設定しようとしています。

<form:input path="userName" id="userName" title="Choose A Unique UserName" readonly="${userNameStatus}" class="formData"/>

というようにレンダリングします。

<input id="userName" name="userName" title="Choose A Unique UserName" class="formData" type="text" value=""/>

以下のjqueryを使っているのですが、これがうまくいかないようです。どなたか、どこで間違っているのか教えてください。

$(".formData").html("");

イベントを処理するJQuery関数の編集

$('#reset').click(function (){
            $("#userNameErr").text(""); 
            $('#badgeNoErr').text("");

            $(".errors").html("");

            $(".formData").val("");

        });

も $(".formData").text("") または $(".formData").val("") を動作させます。

解決方法は？

これでうまくいくはずです。

$(".formData").val("valuesgoeshere")

空の場合

$(".formData").val("")

もしこれがうまくいかない場合は、jsFiddleを投稿してください。

デモです。

$(function() {
  $(".resetInput").on("click", function() {
    $(".formData").val("");
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="formData" value="yoyoyo">


<button class="resetInput">Click Here to reset</button>