How can I determine which submit button was clicked?
I do not want to use <form>, because the page refreshes. By clicking the submit button, a PHP-file gives back a response that is shown on the current page.
HTML in index.html:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
[...]
<div class="form-inline" id="form">
<div class="container">
<div class="form-group">
<div class="input-group input-group-sm">
<div class="input-group-text regwidth">
First name
</div>
<input type="text" class="form-control" name="registerFirstname" id="firstname">
</div>
<div class="input-group input-group-sm">
<div class="input-group-text regwidth">
Last name
</div>
<input type="text" class="form-control" name="registerLastname" id="lastname">
</div>
<div class="d-grid gap-2 col-8 mx-auto">
<button type="submit" class="btn btn-primary" id="sublogreg"><i class="fa-solid fa-address-card"></i> Register</button>
<button type="submit" class="btn btn-primary" id="subloginfo"><i class="fa-solid fa-circle-info"></i> Request information</button>
<p id="returnmessage"></p>
</div>
[...]
jQuery script in index.html:
<script>
$("#form").ready(function() {
$("#sublogreg,#subloginfo").click(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
var sublogreg = $("#sublogreg").val();
var subloginfo = $("#subloginfo").val();
[...]
I tried to add
value="sublogreg"
in the <button>. The value is set, but then both submit button has their value.
I am an autodidact searching for solutions if I need something. I am not a specialist.
You can detect the button you click in several ways, but one simple solution is to add data-id="whatever_choose_id" in each button. The data-id should be different for each button eg
<button type="submit" class="btn btn-primary" data-id="firstBtn" id="subloginfo">
<i class="fa-solid fa-circle-info"></i>
Request information
</button>
<button type="submit" class="btn btn-primary" data-id="secondBtn" id="subloginfo">
<i class="fa-solid fa-circle-info"></i>
Request information
</button>
Then to access it in jQuery you use let btnID = $(this).data("id");
btnID will be the id of the button you clicked
Related
I'm trying to submit some simple log in data to a server. All of the requests and functions are working great for "testuser." I want people to be able to submit their username and password for consideration to the server (it all gets encrypted, and I can't see it.)
I can see where the registration request submits generic data "testuser" for username and pass. But I have no idea how to get it to accept user login information instead.
<!--This is where I'm attempting a login form-->
<form action="/action_page.php">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
<!-- This is rock-solid code from the gamesparks API. Works flawlessly. -->
<button onClick='gamesparks.registrationRequest("testuser", "testuser", "testuser", registerResponse)'>Register</button>
<button onClick='gamesparks.authenticationRequest("testuser", "testuser", loginResponse)'>Login</button>
<button onClick='gamesparks.accountDetailsRequest(accountDetailsResponse)'>Account Details</button>
<button onClick='customEvent()'>Custom Event</button>
<button onClick='customEvent2()'>Custom Event 2</button>
<button onClick='testRT()'>Test RT</button>
<i>Special thanks to the awesome team at GameSparks!</i>
<div id="messages"></div>
<br/>
<br/>
All of my buttons work, spitting out data from my backend regarding "testuser." I know it works because I can alter my data and verify.
You'll notice "testuser" occupies three spaces for one of the onClicks. One is username, the other is password, and the third is displayname (in that order.)
Displayname can equal Username...if anyone wants extra credit.
But mostly, I want my modal to input the data and submit it for my buttons.
Again, I solved my own question! What I did was put my gamesparks function inside of another function. I learned this was called "nesting." I also defined variables as part of the onClick, which were then used in the function. The solution I used is below. Forgive my n00bish comments. But they help me learn.
<div class="container">
<h2>Click To Login</h2> <!-- This is a label above the button -->
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Martial Parks</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><img src="http://martialparks.com/wp-content/uploads/2017/10/cropped-mp_logo01-2.png" class="center-block img-circle logo-margin-negative"></h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="form-group col-sm-5 col-sm-offset-4">
<label class="sr-only" for="exampleInputAmount">Username</label>
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
</div>
<div class="form-group col-sm-5 col-sm-offset-4">
<label class="sr-only" for="exampleInputAmount">Password</label>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-key"></i></div>
<input type="text" class="form-control" id="password" placeholder="Password">
</div>
</div>
<button type="button" class="btn btn-danger btn-block" data-dismiss="modal" onClick="login()">Login</button>
<!-- There is a line of code that closes the modal once the button is clicked: data-dismiss="modal" I've removed it from the register button. -->
<!-- Also, I can call up multiple functions using this format: onclick="doSomething();doSomethingElse();" -->
<button type="button" class="btn btn-danger btn-block" onClick="register()">Register</button>
<script>
function login() {
var usernameinput = document.getElementById('username').value;
var passwordinput = document.getElementById('password').value;
console.log(usernameinput);
console.log(passwordinput);
gamesparks.authenticationRequest( usernameinput, passwordinput, loginResponse);
}
function register() {
var usernameinput = document.getElementById('username').value;
var passwordinput = document.getElementById('password').value;
console.log(usernameinput);
console.log(passwordinput);
gamesparks.registrationRequest( usernameinput, usernameinput, passwordinput, registerResponse)
}
</script>
</div>
</form>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-5 col-sm-offset-4">
<div id="messages"></div>
<br/>
<br/>
You need to manually grab each of your fields values. The most direct way is via document.getElementById and value:
document.getElementById( "username" ).value
In your example:
<button onClick='gamesparks.authenticationRequest( document.getElementById( "username" ).value, document.getElementById( "password" ).value, loginResponse )'>Register</button>
I would, however, suggest calling a function instead of inlining it:
<button onclick="login()">Login</button>
⋮
⋮ // Before </body>
⋮
<script>
const fetchValue = id => document.getElementById( id ).value;
function login() {
const username = fetchValue( "username" );
const password = fetchValue( "password" );
gamesparks.authenticationRequest( username, password, loginResponse );
}
</script>
Also1: You should never need to place an api secret in client-facing HTML/JavaScript.
Also2: Regarding your these lines:
<var username = username>
<var password = password>
These are invalid. <var> provides styling and nothing else. It looks like you are attempting to place JavaScript there? To do so, you need to either use <script> tags or event handlers, such as onclick.
I need to show the values given in modal at outside the modal using AngularJS. Plunker attached here which clearly explains. Can anyone help me out........I have already checked Angular, Ui-Bootstrap site, but couldn't find the solution to the problem
HTML
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" ng-click="$ctrl.cancel()">×</button><a>
<h3 class="modal-title" id="modal-title" style="color:red">Please Provide the Details Here</h3>
</a>
</div>
<form name="modalForm" novalidate>
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error': modalForm.name.$invalid }"> <!--modalForm.name.$touched &&-->
<a>*Name: </a><input name="name" ng-minlength="3"
ng-maxlength="8" ng-model="name" type="text" placeholder="Name" class="form-control" size="10" style="width: 50%" required />
</div>
<div class="form-group" ng-controller="ButtonsCtrl">
<a>*Gender: </a><pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Male'" uncheckable>Male</label>
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Female'" uncheckable>Female</label>
</div>
</div>
<div class="input-group" ng-controller="DatepickerPopupDemoCtrl">
<a>*Birth Date: Selected date is: <em>{{dt | date:'fullDate' }}</em></a><select class="form-control" ng-model="format" ng-options="f for f in formats" style="width: 50%"><option></option></select><input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" alt-input-formats="altInputFormats" style="width: 50%" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<p ng-show="modalForm.modalPlace.$error.required">Select service</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="$ctrl.ok()" ng-disabled="modalForm.$invalid">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</form>
</script>
<button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
<div ng-show="$ctrl.selected">Name from the modal: {{ $ctrl.name }}</div>
<div ng-show="$ctrl.selected">Gender from the modal: {{ radioModel || 'null'}}</div>
<div ng-show="$ctrl.selected">DOB from the modal: {{ dt | date:'fullDate' }}</div>
What you are looking for is the modalInstance.result property, it a promise which is resolved with a value when you close your modal (or rejects when you dismiss it).
The docs already provide you with a simple example
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
Inside your modal controller you can close/dismiss the modal using these methods
var selectedItem = ...
$uibModalInstance.close(selectedItem)
// or
$uibModalInstance.dismiss(selectedItem)
With selectedItem being passes to the controller that launched the modal.
Because you code is incomplete I can't really help you much more then that, the docs hold all you need to know really.
I'm trying to write a login/register page and make the "login" button disabled if the fields are not filled in (login and password). However it's also affection the "register" button, which is asking for the fields to be filled in as well.
I'm not sure what is causing this and removing the "required ng-model" from the labels stops the login button from working with "ng-disabled". Can someone please help me understand what's causing this behavior?
<div class = "form-group" aling="center">
<label for="exampleInputEmail" > Usuário </label>
<input type='text' placeholder = 'Usuário'
class="form-control" required ng-model = "user">
<div class="form-group">
<label for="exampleInputPassword"> Senha </label>
<input type='password' placeholder = 'Senha'
class="form-control" required ng-model = "password">
</div>
<p>
<div class="main" ng-controller="loginController">
<button class="btn btn-default" type="submit"
ng-disabled="form1.$invalid" ng-click="login(user,password)">
Login</button>
</div>
<button href="#" class="btn btn-default" type="submit"
ng-click="register()">
Register
</button>
<p></p>
Currently what happening is when you're clicking on Register button it tries to submit a form. You should change type="submit" of Register button to type="button". Also even if you don't specify any type on button, it considered as type="submit".
<button class="btn btn-default" type="button" ng-click="register()">
Register
</button>
You Register button is in the same form as all the other fields and has type submit and since the two inputs are required the submit button is automatically disabled
Some observations :
You define the controller loginController only for Login button. Hence, username and login fields are out of scope for this controller.
Define the controller in the parent element(outside of the form) in the DOM.
DEMO
var app = angular.module('myApp', []);
app.controller("loginController", function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="loginController">
<form name="myForm" novalidate>
<div class = "form-group" aling="center">
<label for="exampleInputEmail" > Usuário </label>
<input type='text' placeholder='Usuário'
class="form-control" required ng-model="user">
<div class="form-group">
<label for="exampleInputPassword"> Senha </label>
<input type='password' placeholder='Senha'
class="form-control" required ng-model="password">
</div>
<p>
<div class="main">
<button class="btn btn-default" type="submit"
ng-disabled="myForm.$invalid" ng-click="login(user,password)">
Login</button>
</div>
<button href="#" class="btn btn-default" type="submit" ng-click="register()">Register
</button>
</div>
</form>
</div>
I'm trying to align two buttons to ad input field but I end up messing everything every single time.
I've already aligned an input field to a single button, but I'm not able to add a second button.
This is the html (I'm using some angularjs):
<div class="row">
<div class="col-lg-12">
<form class="form" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
<div class="input-group">
<input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
<button class="btn btn-default" type="submit"
tooltip="Espandi filtri di ricerca" tooltip-placement="bottom"
ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
<i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
</button>
</div>
</div>
</form>
</div>
</div>
This is a screenshot of the result:
As you can see the two button are not in the same line as the input field and they are also uneven (speaking about dimensions)...
Any help?!
UPDATE: updated the code (thanks to Mukesh Ram) but the buttons still have two different sizes..
You can have multiple buttons inside a single .input-group-btn. Like this:
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with multiple buttons">
<div class="input-group-btn"> <!-- add button in this div -->
<button type="button" class="btn btn-default" aria-label="Help">
<span class="glyphicon glyphicon-question-sign"></span>
</button>
<button type="button" class="btn btn-default">Action</button>
</div>
</div>
</div>
One other way :
form-inline and form-group
Bootply : http://www.bootply.com/uHEpGIOLwY
<div class="row">
<div class="col-lg-12">
<form class="form-inline" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
<div class="form-group">
<input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
<button class="btn btn-default" type="submit" tooltip="Espandi filtri di ricerca" tooltip-placement="bottom" ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
<i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
</button>
</div>
</form>
</div>
</div>
I used an input group straight from the bootstrap documentation, and for some reason the button is way bigger than the text input.
Here's the HTML:
<div class="jumbotron">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" googleplace type="text" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default" type="button">Find!</button>
</span>
</div>
</div>
I haven't made any changes to the css, just vanilla bootstrap.
Try to use the samples in Boostrap page. This is the bootply link you can customize it.
<div class="jumbotron">
<form class="form-horizontal" role="form">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default btn-lg" type="button">Find!</button>
</span>
</div>
</form>
</div>