In my project i have 10 products for every product i have button called info, if i click on a info button a form popups in that i wanted to fill the first field(product name) automatically ....lets say for product soap i have info button
`info`
In the form
`<form>
<input type="text" id="product_name">
<input type="text" id="number">
</form>`
I want the field Product_name to be filled automatically based on button pressed
so how to get this ..plz help
i tried using
info
and my js
function reply_click(clicked_id)
{
//alert(clicked_id);
if(clicked_id == "1")
{
document.getElementById(product_name).value='Soap';
}
else
{
alert("button not pressed");
}
}
i tried this logic for example, i am able to read button click but iam unable to write to form...
some one please help me out
Thank you in advance
You are using id without quotes product_name but 'product_name'
should be
document.getElementById('product_name').value='Soap';
instead of
document.getElementById(product_name).value='Soap';
As stated by Suman, you need to provide 'product_name' as a string to getElementById(). Here is a working example of your approach: http://jsfiddle.net/CTnFt/
But since you will likely have many of these tags for many products, a simpler solution might be to place the value in a data- attribute of your tag and read it in your javascript function, instead of a larger, harder to maintain collection of if/elses. Here is a working example: http://jsfiddle.net/Rc9MG/
info
<form>
<input type="text" id="product_name" />
</form>
<script type="text/javascript">
function reply_click(element)
{
document.getElementById('product_name').value = element.getAttribute('data-product-name');
}
</script>
Related
I am trying to take the inputs the customer selects, and add them to hidden fields, to then be able to display them on the cart page.
<form method="post" action="https://omgneonsigns.com/cart/?add-to-cart=5825" name="contentForm" runat="server">
Here is the code for my form, and of course I have my fields setup this way:
<input type="hidden" id="hiddenText" name="hiddenText" value="">
So, what is the next step? I am able to alert the values back to me, so I know they are being held/stored... but I'm not sure how to take them with me to the next page and alert them there?
Firstly, you need to select the hidden input. JavaScript way:
<input type="hidden" id="hiddenText" name="hiddenText" value="" onchange="myFunction(this.value)">
<script>
function myFunction(val) {
let hidden_val = val
// now store it using `session`
}
</script>
Basically you can do it in many ways:
Use JavaScript session. link: https://www.w3schools.com/jsref/prop_win_sessionstorage.asp
Use php session. link:
https://www.w3schools.com/php/php_sessions.asp
Then get the value in the next page from session.
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.
How do I access hidden fields in angular? I have an app, where I want to submit a form for each of items in the list. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty.
I updated the default angular example to display the situation - the todo text is in hidden field.
http://jsfiddle.net/tomasfejfar/yFrze/
If you don't want to hardcode anything in your javascript file, you can either load it via AJAX, or do:
<input type="hidden" name="value" ng-init="model.value=1" value="1">
this way, you can keep the form functionality with JS off, and still use the hidden field in AngularJS
If you want to pass the ID from the ng-repeat to your code, you don't have to use a hidden field. Here's what I did:
For example, let's say I'm looping through a collection of movies, and when you click the "read more" link it will pass your ID to your JS code:
<ul>
<li ng-repeat="movie in movies">
{{movie.id}} {{movie.title}} read more
</li>
</ul>
Then in your JS code, you can get the ID like this:
$scope.movieDetails = function (movie) {
var movieID = movie.id;
}
In your simpler fiddle, the problem can be fixed by using ng-init or setting an initial value in the controller. The value attribute won't effect the ng-model.
http://jsfiddle.net/andytjoslin/DkMyP/2/
Also, your initial example (http://jsfiddle.net/tomasfejfar/yFrze/) works for me in its current state on Chrome 15/Windows 7.
You can do something like this.
It is a dirty trick, but it works (like most dirty tricks ;-)
You just use the form name as Your hidden field
and always give the form the id "form"
<!doctype html><html ng-app><head>
<script src="angular-1.0.1.min.js"></script>
<script>
function FormController($scope) {
$scope.processForm = function() {alert("processForm() called.");
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("form").name;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
};
}
</script></head><body>
<div ng-controller="FormController">
<form name="YourHiddenValueHere" id="form">
<input type="text" ng-model="formData.foo" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
</div></body></html>
This allows You to use ONE Controller for ALL forms and send
them to ONE server script.
The script than distinguishes by the
form name (formData.foo) and knows what to do.
The hidden field names the operation in this scenario.
Voila - You have a complete application with as
many forms You want and one server script
and one FormController for all of them.
Simpler:
<input type="hidden" name="livraisonID" value="{{livraison.id}}"/>
It works!
Use ng-binding="{{employee.data}}". It will work properly.
I have to correct (improve) myself:
You can do it more elegantly:
<form>
<input type="text" ng-model="formData.foo" />
<input type="hidden" id="bar" value="YourHiddenValue" />
<button ng-click="processForm()"> SUBMIT </button>
</form>
and then in the JavaScript controller:
$scope.formData.bar = "";
try {$scope.formData.bar = document.getElementById("bar").value;}
catch(e) {alert(e.message);}
alert("foo="+$scope.formData.foo+ " bar="+$scope.formData.bar);
So you can have as many hidden fields as you like.
I have a form with a unique identifier field that the user needs to enter, when passing this value it needs to appear in different field id. so for instance. the field that user enters the unique code in is called "unique" and the copy needs to be in "message", how can i achieve that?
<div data-role="fieldcontain">
<label for="pins" id="pinLabel"><span style="color:#f22300">*</span> Unique Code:</label>
<input data-mini="true" name="pins_r" id="pins" placeholder="9 alphanumeric characters"/>
</div>
<input type="hidden" id="msg" name="msg" value=pins>
Thanks
There are two ways to do this with JavaScript.
Method 1)
Have an onchange event on the unique field such that whenever the value is changed, change it in a hidden field called message.
<input type="text" id="unique" name="unique" onchange="setMessage(this);">
<input type="hidden" id="message" name="message">
function setMessage(field) {
document.getElementById('message').value = field.value;
}
Method 2)
Use ajax to post the form instead, that way you can build the fields yourself.
ie. post message= document.getElementById('unique').value
Both the above are greatly improved if you use JQuery or another JS helper framework.
If you want your values to be set in the label at the same time, it is entered.
You can do some thing like this.
$(document).ready(function() {
$('#pins').keypress(function() {
setTextValueForPins(this);
});
});
function setTextValueForPins(textPin)
{
$('#pinLabel').text($('#textPin').val());
}
If you want the value to be set after the user have entered the value, you can use the change event.
PS: Not tested the code , let me know if you face any Issues.
I have been searching for the solution to this problem for a while and have to come across an answer that is newbie-friendly enough for me to understand its implementation. Heres my situation:
I am creating a simple, little, Web-based document numbering system that takes data entered into a form and combines it to form a document number. An example would be: A user enters a, Class Code(CCC), Base Number(BBBB), and a Dash number (DDD). The resulting document number would be CCC-BBBB-DDD. Super simple. I have it writing all of this to the database and all that jazz. I would just like to add one user friendly add on.
I want a little live-generate string at the top that shows what the Document number will be as the user edits each field before they actually press submit. Kinda like this example: http://inimino.org/~inimino/blog/javascript_live_text_input
I know almost nothing about javascript so it would be really helpful to know, 1: what the script should look like, 2: And How that script is interfacing with the html form.
Heres what the form looks like:
<form action="submit.php" method="post">
Enter Title:<input type="text" name="title" size="20"><BR>
Enter Class Code:<input type="text" name="class" size="20"><BR>
Enter Base Number:<input type="text" name="base" size="20"><BR>
Enter Dash Number:<input type="text" name="dash" size="20"><BR>
<input type="submit" value="Submit">
Thanks so much for any help you can offer. I'm sure this isn't too hard for someone well versed.
Thomas
From what I'm understanding this should do what you describe.
$('#yourForm input').bind('keyup', function(e) {
var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val();
$('#preview').html(docNum);
});
For your second question, in how it interfaces with the HTML form. The first jQuery selector #yourForm input is going to look for any <input> that falls under a <form id='yourForm'>. It's then binding the keyup event to fire the function. The function takes the value from the <input> with the name value of class, base and dash as well as some formatting and creates a variable named docNum. docNum is then inserted into the element with the id set to preview, which in the Fiddle example is a div right above the form.
http://jsfiddle.net/nuY2M/
Include this html where you want the document number preview to display:
Document #:
<span id="classPreview"></span>
-
<span id="basePreview"></span>
-
<span id="dashPreview"></span>
Add this script to populate the values:
function updateDocNumPreviewPart(fieldName)
{
var preview = document.getElementById(fieldName + "Preview");
var field = document.forms[0][fieldName];
preview.innerHTML = field.value;
}
function updateDocNumPreview()
{
updateDocNumPreviewPart("class");
updateDocNumPreviewPart("base");
updateDocNumPreviewPart("dash");
}
Finally, add some code to your form fields to call the script:
<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />