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.
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.
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>
Considering the following HTML:
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<input type="hidden" id="_postid" value="1"/>
I'm trying to set the two input fields with the name post_id to to value from _postid using this JavaScript and jQuery:
$(document).ready(function() {
$('#post_id').val($('#_postid').val());
});
However, as you can see in this jsFiddle, it's only setting the value of the first one. How do I set the value of both of them? I thought the selector would end up grabbing both.
Now, I realize you might be wondering why I have two forms on this page. The basic reason is I have button inputs that I've styled the way I want but then I use the onclick to call the submit of the appropriate form here. I am ultimately going to be leveraging AJAX here, but that's coming later.
id is always unique. you cannot select 2 elements with same id. select by name
$(document).ready(function() {
$('input[name=post_id]').val($('#_postid').val());
});
Having two HTML elements with the same ID is illegal and will cause undefined behavior such as what you're experiencing. Using the same name is valid, however. Therefore you could use a selector like $('form > input[name=post_id]'), which would look for an input inside of a form with the name attribute set to post_id.
I have a form generated dynamically with the method .append() of jQuery.
I can add any number of new input, textbox, cmbbox, etc...
But the problem is that when I do the sumbit of the form, the PHP target does not receive the new input added, but just the vars connected to the input already in the form before the append().
Any ideas?
The javascript:
$("#button").live('click',function add(){
$("#list").append(
'<li style="height:20px;">'
+'<input type="text" class="text" id="prova" name="prova[]" value="prova">'+
'</li>'
);
});
The Html:
<input type="submit" id="button" value="Add input">
<form name = "form" id="form" action="post.php" method="POST">
<ul style="width:670px;padding:0px 0px 30px 0px" id="list">
</ul>
<input type="submit" id="submit" value="Submit">
</form>
The PHP:
<?php
print_r($_POST);
?>
Problem 1:
Your #button should not be of type submit, since you just want to use it to add to the form and not submit the form. So you should have:
<input type="button" id="button" value="Add input">
Problem 2:
You are overwriting your variables. The name is the variable sent with the form, so each input addition must have a new name, or the variable must be an array.
Additionally, you can't have more than one element with the same id.
The simplest way to solve this is to make prova an array by using the form prova[]:
$("#button").live('click',function() {
$("#list").append(
'<li style="height:20px;">' +
// Removed repetitive ID and made prova an array
'<input type="text" class="text" name="prova[]" value="prova"></li>'
);
});
jsFiddle example
You are intercepting the click event and adding elements to the form, but the event has already started, and will complete its default action (submit the form) without re-checking the content of the form.
You should stop the event after adding the fields (preventDefault should be the right choice), and then re-submit the form.
Something along these lines:
$('#button').live('click', function add(event){
event.preventDefault();
$('#list').append(...);
$('#form').submit();
});
I haven't tested it, but I'm pretty confident that it should work :)
Just to clarify, and putting any other problems aside, #Claudio's note is the correct answer here. I just had the same problem, button type was 'button' and the new element's name was being dynamically incremented. Everything looked fine, but the added elements would not submit.
Then I noticed my form tags were inside the table tags. I moved them outside and it all worked as planned.
Have any code to show? In order for php to "see" the vars submitted, you have to ensure that it has the "name" attribute specified on the form elements. I have a feeling your issue is going to be with the jQuery not the php.
Best guess: You haven't set name attributes for your dynamically added elements.
I have the worlds most simple javascript function:
fnSubmit()
{
window.print();
document.formname.submit();
}
Which is called by:
<button type="button" id="submit" onclick="fnSubmit()">Submit</button>
All is well and good, the print dialog shows up, however after printing or canceling the print I get the following error:
"document.formname.submit is not a function"
My form is defined as follows: (obviously I am not using formname in the actual code but you get the idea)
<form name="formname" id="formname" method="post" action="<?=$_SERVER['SCRIPT_NAME']?>">
Obviously I am not trying to do anything special here and I have used similar approaches in the past, what in the world am I missing here?
In short: change the id of your submit button to something different than "submit". Also, don't set the name to this value either.
Now, some deeper insight. The general case is that document.formname.submit is a method that, when called, will submit the form. However, in your example, document.formname.submit is not a method anymore, but the DOM node representing the button.
This happens because elements of a form are available as attributes of its DOM node, via their name and id attributes. This wording is a bit confusing, so here comes an example:
<form name="example" id="example" action="/">
<input type="text" name="exampleField" />
<button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>
On this example, document.forms.example.exampleField is a DOM node representing the field with name "exampleField". You can use JS to access its properties such as its value: document.forms.example.exampleField.value.
However, on this example there is an element of the form called "submit", and this is the submit button, which can be accessed with document.forms.example.submit. This overwrites the previous value, which was the function that allows you to submit the form.
EDIT:
If renaming the field isn't good for you, there is another solution. Shortly before writing this, I left the question on the site and got a response in the form of a neat JavaScript hack:
function hack() {
var form = document.createElement("form");
var myForm = document.example;
form.submit.apply(myForm);
}
See How to reliably submit an HTML form with JavaScript? for complete details
Given that your form has both an id and a name defined, you could use either one of these:
With the form tag's id:
document.getElementById('formname').submit();
With the form tag's name attribute:
document.forms['formname'].submit();
Try this:
fnSubmit()
{
window.print();
document.getElementById("formname").submit();
}
The most likely culprit is IE confusing JavaScript variables, ids, and names. Search in your source for something sharing the name of your form.
Place a input button inside your form.
Give tabindex="-1" on it.
Make It invisible using style="display:none;".
Like This
<input type="submit" tabindex="-1" style="display:none;" />