Create form action to js page

Question

I want to create login form, and then the result is going to another page, using js to catch the value and create the process.

I have success created it using onclick, but I want to change onclick to onsubmit as I don't want to click the button, just press 'Enter' keyboard, the process is working. I have tried change from onclick to onsubmit process, but I still not get the value on the js page.

Here's the login form

  <form >
                <div class="input-group form-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                    </div>
                    <input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">

                </div>
                <div class="input-group form-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                    </div>
                    <input type="password" class="form-control" placeholder="Password" name="password" id="password">
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div class="form-group">
                    <input type="button" value="Login" class="btn float-justify login_btn" onClick="login()">
                </div>
            </form>

    <script src="<?= base_url() ?>assets/js-process/login/login.js" type="text/javascript"></script>

Here's the js page

  function login()
  {

var phone_number = $('#phone_number').val();
var password = $('#password').val();

console.log(phone_number)
  }

I have changed the onclick to onsubmit, but I can't get the value on the js page again.

here's my change

 <form id="myform" onsubmit="login()">
  ......
 <div class="form-group">
   <input type="submit" value="Submit" class="btn float-justify login_btn">
 </div>

Do you know where's the error on my code ?

Thank you

Where did you add the onsubmit handler? Keep in mind that you don't submit the button, you are submitting the whole form. So you will have to add this to the form and not the button. — cloned
– cloned, Commented Sep 10, 2019 at 6:27
i put onsubmit handler on header form to going to js page using that function. Is it true ? — Ikram Shabri
– Ikram Shabri, Commented Sep 10, 2019 at 6:33

DEEPAK · Accepted Answer · 2019-09-10 07:00:36Z

1

As I see it , everything is good , where should be looking now on 2 things first its jquery you are using but i can not see its link second check your base url , it is properly being generated or not

Below you can see its working on onclick

same way you can do with on submit but you have to pass event in function so that you can stop its default action . you can do that using event.preventDefault();

function login(e)
  {
e.preventDefault();
var phone_number = $('#phone_number').val();
var password = $('#password').val();

alert(phone_number)
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onSubmit="login(event)">
                <div class="input-group form-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                    </div>
                    <input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">

                </div>
                <div class="input-group form-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                    </div>
                    <input type="password" class="form-control" placeholder="Password" name="password" id="password">
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div class="form-group">
                    <input type="submit" value="Login" class="btn float-justify login_btn" >
                </div>
            </form>

edited Sep 10, 2019 at 7:00

answered Sep 10, 2019 at 6:38

DEEPAK

1,57415 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ikram Shabri Over a year ago

Hi @Deepak, I have success create action using onclick. Where I'm confused is when I change from onclick to onsubmit, i have tried but I still not get the value on js page

DEEPAK Over a year ago

I have edited the code again you can check its working onsubmit

Collectives™ on Stack Overflow

Create form action to js page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related