Clicking a button will put a value at input field without reloading the page

Question

I just want to ask on how to put a value in an input field without reloading the page. Heres my code. What i want to happen is that when i click the button, "1234567" will automatically be inside or value of the input fields but without refreshing the page. This how my code is but nothing is happening. Thank you in advance!

This is for my input fields

<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>

Then this for my button that when click it will trigger the event

<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>

Then this is the 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 Im really no good at javascript. Thanks for the help!

`default_pass` should be `#default_pass`. `#` prefix means to look for an `id`. — Barmar, Jan 04 '18 at 03:02
`` isn't a container element, you can't have contents and ``. — Barmar, Jan 04 '18 at 03:07
But it does now is submit, so im refreshing the page. I dont want to refresh the page — gwapo, Jan 04 '18 at 03:09

Barmar · Accepted Answer · 2018-01-04T03:21:36.797

The problem is that your HTML is invalid. <input> isn't a container, so Default Pass is not inside it. Clicking on that doesn't trigger a click on the button.

You should use <button> instead.

And in the jQuery you need to use #default_pass as the selector. You don't need the onclick attribute in the button, since you're using jQuery to bind the event handler. You never defined the function as a global name; using function myFunction() in the jQuery event handler only defines the name in the local scope of the function; see Why JavaScript function declaration (and expression)?

$(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>

It still doesn't put values at the input field – gwapo Jan 04 '18 at 03:11 — gwapo, Jan 04 '18 at 03:11
It still doesn't put values in the input fields @Barmar – gwapo Jan 04 '18 at 03:17 — gwapo, Jan 04 '18 at 03:17

Clicking a button will put a value at input field without reloading the page

1 Answers1