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.
Related
I have a reactive form containing input having attribute in it:
<input type="text" [attr.data-challengeId]="value.id" [formControlName]="value.label">
On submitting form I get only value, but I need the attribute value too.
Tried adding tag reference #inputTag, but that doesn't help.
Let me know how I can read the attribute inside tags.
One solution to our problem is to create input hidden
<input type="hidden" name='data-challengeId' [value]="value.id" ngModel>
I have the following HTML:
<body>
<form action="/test/interop/InteropServlet" method="post" id="formTester" name="formTester">
<input type="hidden" name="ApiName" value=""/>
<input type="hidden" name="test.userId" value="admin"/>
<input type="hidden" name="test.password" value="admin"/>
<input type="hidden" name="test.progId" value="CustomTester"/>
<input type="hidden" name="InteropApiData" value=""/>
<input type="hidden" name="TemplateData" value=""/>
and I would like to use Javascript to get these hidden values and set them on clicking a button. I have the following Javscript method:
function callAPI(myform) {
saveCookies();
myform.ApiName.value=document.getElementById("traceName").value;
myform.TemplateData.value=document.getElementById("templateXMLText").value;
myform.test.userId.value=document.getElementById("userIDText").value;
myform.test.password.value=document.getElementById("passwordText").value;
myform.action="http://"+document.getElementById("urlText").value + "/test/interop/InteropHttpServlet";
myform.submit();
}
and this works for the hidden inputs that do not have a period in the name (ie test.userId, test.password) as I get the error "Error: TypeError: myform.test is undefined". I am unable to rename these hidden inputs due to the fact I do not maintain the code I am calling out to and the variables must be named this.
Is there any way I can read hidden inputs that have a period in the name from a form?
Another option, preferable in my opinion, is to use querySelector() to get the specific element:
myform.querySelector('input[name="test.userId"]').value="whatever";
DEMO: http://jsfiddle.net/xjG6W/
For visual purposes, in the demo I changed test.userId to be type="text". Type in the second textbox and click the button - it will change the first textbox's value (really, it's a hidden input).
References:
https://developer.mozilla.org/en-US/docs/DOM/Element.querySelector
Use the square bracket notation for accessing elements with a period in the name. For ex:
myform['test.userId'].value
In your case, this would become:
...
myform['test.userId'].value=document.getElementById("userIDText").value;
myform['test.password'].value=document.getElementById("passwordText").value;
...
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'm trying to serialize some contents inside of a form:
<form>
<input ...>
<input ...>
<div id=div1>
<input name=input1 ...>
<input name=input2 ...>
</div>
</form>
<script>
jQuery("#div1").serialize();
</script>
In this code serialize() function doesn't serialize the input1 and input2. Even I tried
jQuery("<form>" + jQuery("div1").html() + "</form>").serialize()
And it does serialize the inputs but all the values are Empty! it's like it doesn't assign values that user entered: input1=&input2=
Is there any solutions out there?
(The reason I need to do this is that this page is a ASP.NET page since ASP.NET standard is a single form based so I have to deal with this situation)
Better solution is to use the :input selector since it gets all of the form elements
jQuery('#div1 :input').serialize();
I believe this will work:
jQuery('#div1 input').serialize()
I have a form in HTML with multiple inputs of type submit:
<form id = "myForm1" action="doSomethingImportant/10" class="postLink" method="post">
<input type="hidden" id="antiCSRF" name="antiCSRF" value="12345"></input>
<input type="submit" value="clickThisLink"></input>
<input type="submit" value="Don'tclickThisLink"></input>
</form>
What I want to do is select only the first input with type submit while ignoring the others, the snippet of code I currently have is as follows, note it is within a for-each loop that goes through all forms on my page, hence (this) to avoid confusion:
var name = $(this).find("input[type='submit']").val();
I'm thinking this already grabs the first input of type submit by default, I'm not sure if that assumption is correct or if there's a more formal way of going about it, thanks.
Try:
$(this).children("input[type='submit']:first").val();
how about the first selector
var name = $("input[type='submit']:first").val();