单击按钮将在输入字段中放置一个值，而不重新加载页面

Question

我只是想询问如何在不重新加载页面的情况下将值放入输入字段。 继承我的代码。 我想要发生的是，当我点击按钮时，“1234567”将自动在输入字段的内部或值，但不刷新页面。 这是我的代码如何，但没有发生任何事情。 先感谢您！

这是我的输入字段

<div class="form-group">
  <label for="password">{{ $edit ? trans("app.new_password") : trans('app.password') }} <text class="text-danger">*</label>
  <input type="password" class="form-control" id="password" name="password" @if ($edit) placeholder="@lang('app.leave_blank_if_you_dont_want_to_change')" @endif>
</div>
<div class="form-group">
  <label for="password_confirmation">{{ $edit ? trans("app.confirm_new_password") : trans('app.confirm_password') }} <text class="text-danger">*</label>
  <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" @if ($edit) placeholder="@lang('app.leave_blank_if_you_dont_want_to_change')" @endif>
</div>

然后这个为我的按钮，当它点击它将触发事件

<input type="button" class="btn btn-warning btn-sm btn-block" id="default_pass" onclick="myFunction()">
<i class="glyphicon glyphicon-filter"></i> Default Pass
</input>

然后这是javascript

<script type="text/javascript">
  $(document).on('click', 'default_pass', function myFunction() {
    document.getElementById("password").value = "1234567";
    document.getElementById("password_confirmation").value = "1234567";
  });
</script>

PS我真的不擅长javascript。 谢谢您的帮助！

Answer 1

问题是您的HTML无效。 <input>不是容器，因此Default Pass不在其中。 单击它不会触发按钮上的单击。

你应该使用<button>代替。

在jQuery中，您需要使用#default_pass作为选择器。 您不需要按钮中的onclick属性，因为您使用jQuery来绑定事件处理程序。 您从未将该函数定义为全局名称; 在jQuery事件处理程序中使用function myFunction()只定义函数本地范围内的名称; 看看为什么JavaScript函数声明（和表达式）？

 $(document).on('click', '#default_pass', function myFunction() { $("#password, #password_confirmation").val("1234567"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <label for="password">Password <text class="text-danger">*</label> <input type="password" class="form-control" id="password" name="password" @if ($edit) placeholder="Leave blank if you don't want to change" @endif> </div> <div class="form-group"> <label for="password_confirmation">Confirm Password <text class="text-danger">*</label> <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" @if ($edit) placeholder="Leave blank if you don't want to change" @endif> </div> <button type="button" class="btn btn-warning btn-sm btn-block" id="default_pass" > <i class="glyphicon glyphicon-filter"></i> Default Pass </button>