CODEWITHSUNDEEP
javascripthtml
Ikram Shabri
Ikram Shabri

Reputation: 567

Create form action to js page

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

Upvotes: 0

Views: 107

Answers (1)

DEEPAK
DEEPAK

Reputation: 1504

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>

Upvotes: 1

Related Questions