Below is my simple form html where I want to add the object data to my form fields. I went through Google search and StackOverflow but all of them were talking about jquery implementation, so here is my simple form html where I want to add the object data to my form fields. Since I'm not aware of Jquery, I want to use the Java Script approach.
Below, I have a user form where I want to bind the details object to my above form fields, so for that I'm using the below java script approach. I don't know where I'm going wrong. My object data is not getting bound with my form.
So kindly help me with it.
Thank you.
<!DOCTYPE html>
<html>
<body>
<div>
<form>
Name <input id="name" type="text" name="name"><br>
Place <input id="place" type="text" name="place"><br>
Age <input id="age" type="text" name="age">
</form>
</div>
<script>
var details ={name:'Krishna',place:'India',age:26};
document.getElementById("name").innerHTML=details.name;
document.getElementById("place").innerHTML=details.palce;
document.getElementById("age").innerHTML=details.age;
</script>
</body>
</html>
As mentioned in the comment by #Jaromanda X, there is no innerHTML for an input field. Instead, you should try setting the value attribute.
<script>
var details ={name:'Krishna',place:'India',age:26};
document.getElementById("name").value = details.name;
document.getElementById("place").value = details.place;
document.getElementById("age").value = details.age;
</script>
This should do the trick.
Related
I need a little bit of help. I'm stuck at making the form information I have on my first html document show up on the tables in the second html document.
Any help would really feel good right now.
I'm not sure exactly what your question means, but if you are asking about including an html inside another html, check this link: include html in another html
Edit:
If you have no option to use server-side programming, you could use the query string.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="name" />
<input type="text" name="phone" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the name, phone value as a parameter. like:
http://www.example.com/display.html?name=XYZ&phone=98745654
You should then be able to parse the query string - which will contain the parameters value - from JavaScript, using the window.location.search value:
// from display.html
<p id= 'hi' ></p>
<script>
document.getElementById("hi").innerHTML = window.location.search;
</script>
this should help you to start what you are trying to do.
I'm new to Jquery and need a solution for a challenge.
What I need precisely is to store the inputs of a HTML form into an existing array. Do you know the Jquery logic to do this?
Here is a sample of the HTML that is the focus of this inquiry.
<form>
<input type="text" id="inputform" value""idkyet></input>
</form>
Example of how I'd like this to work:
User types name into form and clicks submit. That name is now stored into an existing array.
thank you.
Try
yourExistingArrayThatIsDefinedSomewhere.push($("#inputform").val())
console.log(yourExistingArrayThatIsDefinedSomewhere); //should show all previously pushed values
Note that you should add the code above to an event handler of the submit button.
<input type="text" id="inputform"> <input type="button" value="submit" id="submitform">
JS:
var your_array = [];
$("#submitform").click(function(){
your_array.push($("#inputform").push());
alert(your_array);
});
i think you should do a bit of studing yourself instead of just posting anything here.
Getting the value of the input in jQuery and adding it to an array would be something like this :
var array = [];
$("#inputform").change(function() {
array.push(this.value);
alert(array);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form>
<input type="text" id="inputform" value=""></input>
</form>
For example, here each time the value of the input changes, it will add it to the array.
I was testing and trying to make an little form that when the user entered their name, it would take that name and display it on to the screen.
<html>
<head>
<center><h1>Test-Page</h1></center>
</head>
<body>
<div class="someRandomStuff">
<h2 id="testingID">What is your first name?</h2>
<form name="input" action="login.js" method="post">
Name: <input type="text" name="userID"/>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
Here is the js file
function displaySystem(name) {
document.getElementById("testingID").innerHTML("Ah, hello there" + name)
}
I know that I could probably do this in one HTML file, however I want to try and make the js and HTML separate. ANY help is appreciated.
You don't send data to a JavaScript function, but a JavaScript function can retrieve form data.
For example, and input of type text can be retrieved using its value property:
var input = document.getElementById("userID");
var value = input.value;
I know that I could probably do this in one HTML file, however I want
to try and make the js and HTML separate.
Nice step. In fact, there's no practical difference in terms of retrieving form data or manipulating the document from an inline script or a script that's included using a <script src=... element. The main difference is a script embedded in the HTML document won't be cached, while a one included as a separate file will be cached (obviously, there're other reasons if we talk about good separation of concerns!).
use onkeypress event on textbox and pass this to display that value and use that parameter in function to display it
<div class="someRandomStuff">
<h2 id="testingID">What is your first name?</h2>
<form name="input" action="login.js" method="post">
Name: <input type="text" name="userID" onkeypress="displaySystem(this)"/>
<input type="submit" value="Submit"/>
</form>
</div>
//javascript function
function displaySystem(name) {
document.getElementById("testingID").innerHTML("Ah, hello there" + name.value)
}
I can update an HTML form using Javascript, when the user hits enter when on something on the form or when he triggers the onclick event on the "submit" button, but I want the form to be updated while the user is typing something.
I know that I can do Infinity loop, yet it is not a good idea; or I can check after intervals but it will cause unnecessary checking, which I don't want.
Use keyUp event handler with the input field contained within your form.
References: Javascript,
jQuery
[UPDATE]
You missed round brackets at function definition, check the updated fiddle
I had the same question and based on this post and sohel's answer I managed to get it working. Now I would like to share my solution in form of a short working example: If you type your name in the first field it will suggest an email address in the second one.
<!DOCTYPE html>
<html>
<head>
<script>
function nameModify(emailElement, nameElement) {
emailElement.value = nameElement.value + '#stackoverflow.com';
}
</script>
</head>
<body>
<form name="aform" action="#">
<input type="text" name="name" onkeyup="nameModify(this.form.elements['email'], this);" >
<input type="text" name="email" >
</form>
</body>
</html>
You are looking for Autocomplete
I am using springsourcetoolsuite, grails project and I am coming across this problem of storing the value entered in the textfield into a table in the database created in mysql and connected to grails. Now I have a domain class called property having variables address, city,
zipcode, country etc. which are also fields of the table property in mysql database.
When I ask user to fill in using this piece of code-(gsp views)
<body>
<g:textField name="address" maxlength="40" value="${propertyInstance?.address}" />
</body>
it works and the value is stored in database.
However I am required to append an input field on each button click, so i have put this input field in a function called add(). Here is the code-
<head>
<script type="text/javascript">
function add() {
var newP = document.createElement("p");
var input1,
area = document.getElementsByTagName("form")[0];
input1 = document.createElement("input");
input1.type = "g:textField";
input1.placeholder = "street";
input1.value = "${propertyInstance?.address}";
newP.appendChild(input1);
area.appendChild(newP);
}
</script>
</head>
<body>
<g:form name='prop' method="post" action="save">
<input type="button" value="+Add" onclick= "add();" ><br>
<g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
</g:form>
</body>
Now when i do this and run it, it takes null value and prints an error saying 'address cannot be null'. Now i cannot see what is wrong, but if anyone is familiar with groovy/javscript.. please help me figure out whats wrong.
Thanks a lot.
I'm guessing you did not use the scaffolding feature to generate your views in first place. If you didn't, it's a good way to start understanding the basics of grails. In your case specifically, you need to put your fields that you want to pass to the controller (like address) inside the form tag. Like:
<body>
<g:form name='prop' method="post" action="save">
<g:textField name="address" maxlength="40" value="${propertyInstance?.address}" />
<input type="button" value="+Add" onclick= "add();" ><br>
<g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
</g:form>
</body>
Another thing is you can't create a tag input and put its type as "g:textfield". The html input fields only have limited types. The one you want to use in this case is really "text". In any case, the grails' tags are rendered before the javascript (in the server-side) while javascript code is rendered client-side. So the first time the page is rendered they will work. But to insert something dynamically in your page, you need ajax because the grails' tags are already rendered. The value ${propertyInstance?.address} needs to be processed at the server, returned and established in your field. Therefore you need to make an async request. Anyway JQuery is your guy.
Also, for what you're doing, JQuery helps to manipulate HTML DOM, that will make your work so much easier.