I did some research and I wasn't able to find anything on it. I have an input where the person can input a location, but I also want them to be able to add another, alternate location. I basically need a button to open a form. Here is the code for the form:
<div class="form-group">
<label for="exampleInputEmail1">Location: </label>
<input name = "cityForm" class="form-control" placeholder="Enter Zipcode or City"
width: 50%;>
</div>
Here is the code for the button:
<center>
<button id="locationAlternate" type="submit" class="btn btn-primary">
Alternate Location
</button>
</center>
Is this what are you looking for?
$('#locationAlternate').on('click',function() {
$('#location').append('<div class="form-group" id="altloc"><label for="">Alternate Location: </label> <input name = "AltcityForm" class="form-control" placeholder="Enter Alternate Location" width: 50%;></div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="location">
<label for="exampleInputEmail1">Location: </label>
<input name = "cityForm" class="form-control" placeholder="Enter Zipcode or City" width: 50%;>
</div>
<button id="locationAlternate" type="submit" class="btn btn-primary">Alternate Location</button>
Related
#{
ViewData["Title"] = "Login";
}
<h1>#ViewData["Title"]</h1>
<div class="container">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember">Remember me
</label>
</div>
**<script>function openWin() {
window.open("https://localhost:7257/Home/Stocks");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Login" onclick="openWin()">
Login
</button>
</form>
<script>function openWin() {
window.open("https://localhost:7257/Home/Signup");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Sign up" onclick="openWin()">
Sign up
</button>
</form>**
</form>
</div>
After executing this code block the page that is similar to photo can be displayed but my problem is how should I change these 2 buttons functions so that they can pop up different locations like it is written in the bold area.
If there is any related page similar to this issue, you can share as comment.
It looks like you've named both functions openWin(). When you click the button it's finding the the top function and never makes it to the second one since it thinks it found what it was looking for. JS runs from top to bottom in order so as soon as it finds the first function it will stop.
You need to change one of the function names when you declare it, such as openWin() and openWin2().
I would also recommend that you move all of your JS code to a single <script> tag in order to avoid errors in the future.
I try to auto calculate html input values to show total values in input .
here is my input form
<div class="col-sm-4">
<form>
<div class="mb-3">
<label for="">Price</label>
<input type="text" id="price" required class="price form-control">
</div>
<div class="mb-3">
<label for="">Amount</label>
<input type="text" id="amount" required class="amount form-control">
</div>
<div class="mb-3">
<label for="">Total</label>
<input type="text" id="total" required class="total form-control">
</div>
<button type="submit" class="btn btn-primary marketbuy">Buy </button>
</form>
</div>
I want total value automatically when enter amount value and price value into input form.
example
price is 3
amount is 5
total is 15
when I enter 3 and 5
total input show automatically 15
var p1 = $('#price').val();
var p2 = $('#amount').val();
$('#total').val(p1*p2);
console.log()
this code not show directly in total input but show when reload.
How can get by jquery.
The issue is because your code is only running when the page loads. You need to hook event handlers to the input fields so that the total also gets calculated as the user enters values.
Below is a working example of how to do this. Note that the common logic which updates the total field is extracted to its own function which is called when the page loads and also when a field is updated. Also note that I added the required attribute to the total field so that the user cannot update it - it can only be set programmatically.
let $price = $('#price');
let $amount = $('#amount');
let updateTotal = () => $('#total').val($price.val() * $amount.val());
updateTotal(); // on page load
$('form input').on('input', updateTotal); // on value change
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-sm-4">
<form>
<div class="mb-3">
<label for="">Price</label>
<input type="text" id="price" required class="price form-control" />
</div>
<div class="mb-3">
<label for="">Amount</label>
<input type="text" id="amount" required class="amount form-control" />
</div>
<div class="mb-3">
<label for="">Total</label>
<input type="text" id="total" required class="total form-control" readonly />
</div>
<button type="submit" class="btn btn-primary marketbuy">Buy</button>
</form>
</div>
$('form input').on('keyup',function(){
$('#total').val(parseInt($('#price').val()*$('#amount').val()));
});
<!-- The issue is because your code is only running when the page loads. You need to hook keyup event handlers to the input fields so that the total also gets calculated as the user enters values.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-sm-4">
<form>
<div class="mb-3">
<label for="">Price</label>
<input type="text" id="price" required class="price form-control" />
</div>
<div class="mb-3">
<label for="">Amount</label>
<input type="text" id="amount" required class="amount form-control" />
</div>
<div class="mb-3">
<label for="">Total</label>
<input type="text" id="total" required class="total form-control" readonly />
</div>
<button type="submit" class="btn btn-primary marketbuy">Buy</button>
</form>
</div>
when I click the 'save new post' button and the title and body content are provided then the action of sending a request is successfull, but if I leave one field blank, than the request isn't even made.
this is my code:
<form action="/create-post" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"></textarea>
</div>
<button class="btn btn-primary">Save New Post</button>
</form>
And this is what I get when I leave a field blank:
form behavor after submitting empty field
in the image, 'Compila questo campo' just means 'Fill in this field'
Edit:
thank you for reminding me that it’s because of the required field, but then why is that in this example i can't submit if the title field is empty but can if the body is empty?
<form class="mt-3" action="/post/<%= post._id %>/edit" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" value="<%= post.title %>" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"><%= post.body %>
</textarea>
</div>
<button class="btn btn-primary">Save Changes</button>
Note that this is a ejs template, so that's why it as <% and <%=
You have required attribute both of your inputs. So you can't submit this form in this way.
See here for details
For example in this example you can submit the form:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="#" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
But in this example you can't:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" required><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
Good luck.
You explicitly said that the user was required to fill in a value.
Don't do that if the field is optional.
Because your <input> and <textarea> tags have required attribute. Remove that attribute if you want to make them optional.
You are using required attribute with textbox and text area.
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
This is client side (browser side validation).
Reference
I have an array of objects that is displayed using ng-repeat. In each of these objects there's a button that triggers an API request and toggles a flag in order to show a hidden div. Here's the HTML:
<div ng-repeat="tarjeta in tarjetas">
<label class="radio-inline">
<input type="radio" name="card" checked> {{tarjeta.brand}} ************{{tarjeta.digits}}
<button class="btn btn-dropdown" ng-click="openEditCard(); getEditableInfoCard(tarjeta.id)" ng-show="!editCard"></button>
<button class="btn btn-up" ng-click="openEditCard()" ng-show="editCard"></button>
</label>
<div ng-show="editCard">
<input type="text" name="nombre" placeholder="Nombre en la tarjeta:" class="form-control" ng-model="editableInfo.name" required>
<p ng-show="validaUpdateName">Dato incorrecto</p>
<div style="float: left; margin-right: 15px;">
<input type="text" name="expM" placeholder="Expiración (MM):" maxlength="2" class="form-control" ng-model="editableInfo.exp_month" required>
<p ng-show="validaUpdateMM">Dato incorrecto</p>
</div>
<label class="dash">
/
</label>
<div style="float: left;">
<input type="text" name="expY" placeholder="Expiración (YYYY):" maxlength="2" class="form-control" ng-model="editableInfo.exp_year" required>
<p ng-show="validaUpdateYY">Dato incorrecto</p>
</div>
<input type="text" name="direccion" placeholder="Dirección de la tarjeta:" class="form-control" required>
<br>
<br>
<br>
<div style="float: right;">
<button class="btn btn-primary" ng-click="updateCard(tarjeta)">Guardar cambios</button>
<button class="btn btn-trash"></button>
</div>
</div>
The problem is that when I click the button on a single element, the action is triggered for every element of the array. I think this is quite simple to solve but I'm a beginner using Angular and can't figure out what the problem is. I already tried tracking by $index. This is driving me crazy any help is welcome.
It really hasn't much to do with angular. Only with logic.
You're using single boolean editCard, and based on that boolean, you're supposed to know which cards should be opened, and which ones should not be. That can't possibly work. A single boolean can't store that amount of information. Only true or false.
Instead, you need, for each card to know if it is opened or not. So each card should have its own boolean flag:
<div ng-repeat="tarjeta in tarjetas">
<button ng-click="tarjeta.edited = true" ...></button>
<button ng-click="tarjeta.edited = false" ...></button>
<div ng-if="tarjeta.edited">
...
</div>
</div>
And if only one card is supposed to be opened at a time, thenwhat you need to know is which of the card is opened. Again, a boolean can't store that information. So you'd need
<div ng-repeat="tarjeta in tarjetas">
<button ng-click="edit(tarjeta)" ...></button>
<button ng-click="edit(null)" ...></button>
<div ng-if="tarjeta === editedTarjeta">
...
</div>
</div>
and in the controller:
$scope.editedTarjeta = null;
$scope.edit = function(tarjeta) {
$scope.editedTarjeta = tarjeta;
};
I am using AngularJs and have inputs with predefined value from ng-repeat. I want resend those data value via ng-click function to treat data.
The problem the data is not submitted
<label>Price</label>
<input type="text" class="form-group form-control" ng-value=s.prix required="required" ng-model="prix" >
</div>
<div class="modal-footer">
<button type="submit" id='submit' ng-click="edit()" class="btn btn-primary" data-dismiss="modal">Save</button>
s.prix is a value of column in the table prix (ng-repeat="s in produit") if you know what i mean.
Use ng-repeat instead as model
Like this
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
Then pass object in edit.
Try like this
ng-click="edit(s)"
JS
$scope.edit=function(s){
console.log(s);
}
html:
<body ng-controller="myCtrl">
<label>Price</label>
<div ng-repeat="s in produit">
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
<button type="submit" id='submit' ng-click="edit(s)" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</body>
controller:
myApp.controller('produitCtrl', ['$scope',function($scope){
$scope.produit = [{prix:'hello'}];
$scope.edit=function(s){
console.log(s);
}
}]);