[SOLVED] Button Click fires twice

Hi, the button for the login page doesn’t work very well. If you click the first time it do the call request only once.(it’s the right behaviour). The second time you click it call the request twice, the third click it call the request three time. I tryed to use e.preventDefault(); but it doesn’t solved the issue.

Thank you in advance

I included the login page in the index.html

  <div class="view view-main view-init" data-url="/login/" data-name="login">

login.html

   <div data-name="login" class="page no-navbar no-toolbar no-swipeback">

<!-- page-content has additional login-screen content -->
<div class="page-content login-screen-content ">
	<!-- Login form -->
	<form id="form-login">

		<div class="row justify-content-center">
			<div class="col-100 tablet-80 desktop-50">
				<div class="card">
					<div class="card-content card-content-padding">	
					<div class="row">
						<div class="col-100 tablet-auto desktop-auto">
							<div class="list no-hairlines-md">
								<ul>
									<li>
										<div class="row justify-content-center">
											<h2>Log in</h2>
										</div> 
									</li>
									<li class="item-content item-input">
										<div class="item-inner">
											<div class="item-title item-label">Username</div>
											<div class="item-input-wrap">
												<input type="text" name="username" placeholder="Username">
												<span class="input-clear-button"></span>
											</div>
										</div>
									</li>

									<li class="item-content item-input">
										<div class="item-inner">
											<div class="item-title item-label">Password</div>
											<div class="item-input-wrap">
												<input type="password" name="password" placeholder="Password">
												<span class="input-clear-button"></span>
											</div>
										</div>
									</li>
								</ul>
							</div>
							<div class="list no-hairlines-md">
								<div class="block">
									<div class="row">
										<a class="col button button-fill" id="button-login" onclick="getLogin()"> Login </a>
									</div>
								</div>
								
							</div>
						</div><!--col-->									
					</div><!--row-->
					</div><!--card-content-->
				</div><!--.card-->								
			</div><!--.col-->					
		</div><!--.row-->	
	</form>
</div> <!-- ./ page-content -->

the login.js

  const getLogin = () => {

$$('#button-login').on('click', function(e){

	e.preventDefault();
	
	var storedData = self.app.form.convertToData('#form-login');

	

	app.request.post(urlServer, {..........

	})//request			

})

}

hi, i think your problem is that you are binding the button to two events.

<a class="col button button-fill" id="button-login" onclick="getLogin()">

so when you click it you will bind the event;

$$('#button-login').on('click', function(e){})

so its listening two times or more for the click.
just listen to onclick=‘fnc’ or $$(’#button-login’).on(‘click’)
eg:

<a class="col button button-fill" id="button-login" onclick="getLogin()">
...
const getLogin = () => {
  var storedData = self.app.form.convertToData('#form-login');
  app.request.post(urlServer, { })//request			
}
2 Likes

It works! thak you so much. I spent a lot of time with this problem. Thank you :smiley: