i have the below script where i want to pass the text field value to a variable
and display in alert window
<form name='searchdata' id="search_form" >
<div class="col-xs-4" id="form_submit_ins">
<label for="usr">Search Instance</label>
<input type="text" class="form-control" id="ins" id"searchval" placeholder="Instance Name"><br/>
<button class="btn btn-danger navbar-btn" onclick="form_submit();" >Search</button>
</div>
<div>
</div>
</form>
</div>
<script type="text/javascript">
function form_submit() {
var item = document.getElementById('searchval').value;
alert(item);
}
You have a typo:
id"searchval"
Should be:
id="searchval"
id should be equal to searchval i.e id="searchval"
There is something wrong with your HTML (does it have two ID fields? Is one missing a "=" sign?
Your code should work if you fix the HTML to:
<input type="text" class="form-control" id="searchval" placeholder="Instance Name">
Your input has two id's, it can only have one id
change:
<input type="text" class="form-control" id="ins" id"searchval" placeholder="Instance Name">
To:
<input type="text" class="form-control" id="searchval" placeholder="Instance Name">
Related
I have built a form where you can add a person by clicking a button. Now, I want to add a new button to delete the latest added person. My current code only deletes one person, and after that, I can't add another person again. Do someone know what's wrong?
$(document).ready(function(){
$("#button1").click(function(){
$(".flex-container-name-adult").append($(".test1").html());
});
});
$(document).ready(function(){
$("#button3").click(function(){
$(".test1").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container-name-adult">
<button id="button1">Add person</button>
<button id="button3">Delete person</button>
<div class="test1">
<div class="flex-wrapper-name-adult">
<span class="adult">Person</span><br>
<input type="text" class="input" placeholder="Name" name="name" required>
<input type="text" class="input" placeholder="Nachname" name="nachname" required>
<input type="date" class="input" placeholder="Geburtsdatum" name="geburtstag" required onfocus="(this.type='date')" onblur="(this.type='Geburtsdatum')">
</div>
</div>
</div>
When you click the add person button you are appending the html of test1 to the element with class flex-container-name-adult. That html don't include the div with test1 class itself. Now, when you click the delete person button you are deleting all the elements with the class test1. So, after that action, there will be no more elements with class test1 on the document that you can later use on the add person button.
I suggest to use .clone() for what you want to do, and to always delete the last added person. Something like this:
$(document).ready(function()
{
$("#button1").click(function()
{
// Clone the first ".test1" element and append it to the wrapper.
$(".flex-container-name-adult").append($(".test1").first().clone());
});
$("#button3").click(function()
{
// Delete last ".test1" element, if exists more than one.
let tests = $(".test1");
if (tests.length > 1)
tests.last().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container-name-adult">
<button id="button1">Add person</button>
<button id="button3">Delete person</button>
<div class="test1">
<div class="flex-wrapper-name-adult">
<span class="adult">Person</span><br>
<input type="text" class="input" placeholder="Name" name="name" required>
<input type="text" class="input" placeholder="Nachname" name="nachname" required>
<input type="date" class="input" placeholder="Geburtsdatum" name="geburtstag" required onfocus="(this.type='date')" onblur="(this.type='Geburtsdatum')">
</div>
</div>
</div>
I update input with id='total' with event onchange. When I fill quantity input, the input total is updated with correct value but when i try to get the value from controller, it returns null. Any idea? Thanks
This is the code:
<div class="form-group" >
<input type="text" name="quantity" class="form-control" id="quantity" onchange="updateInput(this.value)" >
</div>
</td>
<td align="center">
<div class="form-group ">
<input type="text" class="form-control" id="total" name="total" value="" disabled >
</div>
</td>
And this is function onchange
function updateInput(x)
{
var price=parseFloat(document.getElementById('price').value);
document.getElementById('total').value=parseFloat(x)*price;
}
Solved it, just removed disabled attribute and it works.
I am creating basic angular form and onsubmit trying to retrieve the form value, but my case instead of getting value I am getting value as object.
Note: copied the code with some example.
can you please let me know why i am getting object instead of value?
Please find my below code:
html:
<div class="container">
<h2> User Data </h2>
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ngModel>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" ngModel>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
component:
onSubmit(value: any) {
console.log("Form Value : " + value);
}
Your userForm.value contains two values which are name and email.
So when you do console.log(userForm.value);, it will return something like this:
{
name: 'Surjeet',
email: 'suri#yopmail.com'
}
To access the particular value you can do:
userForm.value.name => It will return 'Surjeet'
userForm.value.email => It will return 'suri#yopmail.com'
So what you can do now:
Two things you can do in your case:
First one: (get the value by its property)
onSubmit(value: any) {
//get the value by its property
console.log("Name: " + value.name);
console.log("Email: " + value.email);
}
Second one: (pass only those value which you need)
//(ngSubmit)="onSubmit(userForm.value.name)"
<div class="container">
<h2> User Data </h2>
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value.name)">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ngModel>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" ngModel>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
The value has to be an object. The form contains multiple elements , hence has multiple values.
Try this:
onSubmit(value: any) {
console.log("Form Value : ",value);
console.log(value.name);
console.log(value.email);
}
Your input field should be something like this:
<input class="form-control" type="text" [(ngModel)]="name" formControlName="name">
and then in submit function get it's value like
onSubmit(post){
console.log(post.name);
}
--> in HTML file
<div class="container">
<h2> User Data </h2>
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value.name,userForm.value.email)">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ngModel>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" ngModel>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
--> in TS file
onSubmit(name:any, email:any) {
console.log('Name = ' + name);
console.log('Email = ' + email);
}
--> By this code you can get specific value in form either by button triggering (should mention required properties to submit and also in receiving method) or by entire form submit.
How to get a formId that is generated by using a jsp using jquery?
<c:url var="updateSubUserDetails" value="/employer/recruiters/updateSubUserDetails"/>
<form id="updateform${subUser.employerId}" action="${updateSubUserDetails}" method="post" >
<div class="modal-body">
<input type="hidden" name="subUserId" value="${subUser.employerId}"/>
<div class="form-group">
<input type="text" id="subUserName${subUser.employerId}" name="subUserName" class="form-control " value="${subUser.firstName}" placeholder="Edit Sub User Name"/>
</div>
<div class="form-group">
<input type="text" id="subUserEmail${subUser.employerId}" name="subUserEmail" class="form-control " value="${subUser.emailId}" onchange="checkMail(${subUser.employerId})" placeholder="Edit Email"/>
</div>
<span id="avialabilityMessage${subUser.employerId}"></span>
<div class="form-group">
<input type="text" id="subUserMobile${subUser.employerId}" name="subUserMobile" class="form-control " value="${subUser.mobileNumber}"placeholder="Edit Contact No"/>
</div>
<sec:csrfInput/>
<div class="modal-footer">
<input type="button" id="muEditButtonID" onclick="updateSubUserDetails(${subUser.employerId})" class="btn btn-warning btn-lg glyphicon glyphicon-ok-sign" value="Update">
</div>
</div>
</form>
How to get above dynamically generated form id in javascript jquery? Please assist me.
//if you sure there is only one form
document.forms[0]
//else
document.querySelector('[id^="updateform"]')
so, if you want to get id just add .id
//if you sure there is only one form
document.forms[0].id
//else
document.querySelector('[id^="updateform"]').id
I know how to create a element whit JQuery, but I don't know how to place that element, exactly where I want.
<form action="/register" enctype="multipart/form-data" method="POST">
<span class="help-block">Username</span>
<input id="checkuser" type="text" name="nuser" placeholder="Username"/>
<span class="help-block">Email</span>
<input id="mail" type="text" name="nmail" placeholder="Your m#il"/>
<span class="help-block">Password</span>
<input type="password" name="npass" placeholder="Your password"/>
<span class="help-block">Avatar</span>
<input type="file" name="navatar" accept="image/*">
<br/>
<input type="submit" value="Submit"/>
</form>
I'm doing AJAX request with JQuery, so, depends of the result of the request, I create, or not an element to the left of the inputs. How I do that?
Thank's advance!
If by left of an input you mean before it then you can use .insertBefore().
$("<span/>", {
text: "My newly created span element"
}).insertBefore("input#checkuser");
Or, also you may use .before().