I am trying to create a survey. The code looks like this:
<form ng-submit="passEngineer(engineer)">
<input type="radio" ng-model="engineer" ng-required="!engineer">Default
<input type="radio" ng-model="engineer" ng-required="!engineer">Custom
<input type="text" ng-model="engineer" ng-required="!engineer">
</form>
If First selected, it DOES pass it without issues. If Second selected, it SHOULD pass the value entered inside third input. How can I do that? Value in third input MUST be passed if second input selected. Tried many ways, can't really figure out.
I think you need to divide up how you're applying ng-model. You might make engineer an object in your controller and then change your markup like this:
<form ng-submit="passEngineer(engineer)">
<input name="engineer" type="radio" ng-model="engineer.isDefault">Default
<input name="engineer" type="radio" ng-model="engineer.isCustom">Custom
<input type="text" ng-model="engineer.customValue" ng-required="engineer.isCustom">
</form>
Related
Simple and easy.
I got two radio buttons.
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
How do i validate in AngularJS that at least one is chosen? And how can i type something like
$scope.myForm.gender.$invalid
Any ideas?
Without a form, you can fix this by check the value of the models in your controller, returning an error if both are false. You could also go ahead and set one true by default.
But to answer your question, you can do something similar to $scope.myForm.gender.$invalid all you have to do is wrap your input tags in a form with the name myForm. So, it would like:
<form name="myForm">
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
</form>
Then, $scope.myForm would be able to give you certain properties, like $isPristine and properties for each input field.
Either of these ways will work though, so I help that helps!
use required :
<input type="radio" name="gender" ng-model="male" required>
<input type="radio" name="gender" ng-model="female" required>
DEMO
same Question asked here : Validate Radio Button AngularJS
1) I have 3 input radio buttons with unique values.
For e.g.
<input type="radio" id="id1" value="This is first value" />
<input type="radio" id="id2" value="This is second value" />
<input type="radio" id="id3" value="This is third value" />
2) Next, I have 2 hidden form like this:
<form action="//mysite.com/process1.php"><input type="hidden" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" id="uniqueid" value=""></form>
3) Based upon whichever radio button the user clicks, I need to copy its value to the value of both the above forms hidden field.
For e.g. If user clicks on radio with id1, then it's value "This is first value" should be copied to both the forms hidden field.
CONSTRAINTS:
1) Have to use javascript or jquery, no server side processing available.
2) Note: both the final forms have one input field, but with same id. This is a constraint.
3) Why? Because based on some other actions on the page, the user gets to see one of the 2 forms. The only difference between them is their action is unique. All fields are same.
WHAT I HAVE SO FAR:
Using this, I am able to copy the value from the radio button to a hidden field's value, but it only copies to a field with a UNIQUE ID.
var $unique = $("#unique");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});
Can someone guide as to how can the value be copied to multiple input fields, but with same id's?(Yes, the id's of the initial radio buttons can be unique.)
Having two HTML elements with same ID is an error.
You cannot treat this as a constraint, this is NOT a valid HTML code and it will cause inconsistent behavior in different browsers.
Use classes instead:
<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" value=""></form>
And javascript:
var $unique = $(".uniqueid");
However, I couldn't find any #radio1 or #email in your code, are you sure you have the right selectors?
My recommendation for the JS will be: (Working jsFiddle)
var $unique = $(".uniqueid");
$('input[type="radio"]').click(function(){
$unique.val(this.value);
});
Notes for jsFiddle:
I've used click event instead of keyup (don't really understand why you used keyup here..).
I've given all radio buttons the same name so they will cancel each other out when selected.
I've turned the hidden fields to text so you could see the result.
<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
var $unique = $("input[type=hidden].uniqueid");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});
As said by others, id must be unique. Try using a data-attribute:
<form action="//mysite.com/process1.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
<form action="//mysite.php/process2.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
Now you can use that attribute as selector to do something like:
$('[data-shouldupdate]').val(this.value);
I agree with all other who posted that id have to be unique to have correct HTML document. So if it's possible I strictly recommend you to fix the HTML document to remove all duplicates.
I write my answer only for the case that you can't remove id duplicates because of some reason and you still have the same requirements. In the case you should change the line
var $unique = $("#uniqueid");
to
var $unique = $("*[id=uniqueid]");
The selector *[id=uniqueid] (or just [id=uniqueid]) works slowly as #uniqueid, but it allows you to get all elements with the specified id attribute value. So it works even in case of id duplicates on the HTML page.
The most simple solution is to give a same name to both inputs. Check this link jsfiddle to see a working example. The code used is the one given is below:
HTML:
<input type="radio" name="copiedValue" id="id1" value="This is first value" />
<input type="radio" name="copiedValue" id="id2" value="This is second value" />
<input type="radio" name="copiedValue" id="id3" value="This is third value" />
<form action="//mysite.com/process1.php"><input name="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input name="uniqueid" id="uniqueid" value=""></form>
jQuery/javascript:
$("input:radio[name=copiedValue]").click(function() {
$("input[name=uniqueid]").val($(this).val());
});
The radio-buttons should have the same name. I removed the type="hidden" so u can see it working correctly.
Hope it useful!
I am trying to do a radio buttons group with couple of options and the last option will be a text input field "Other".
Something like this:
I want to do it so when submitted, the url called is
app://configuration?server=...
server should contain the value of the server attribute wether it's from one of the radio buttons or from the input group
I tried to do this
<form method="GET" action="app://configuration">
Select server <br>
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" value="">Other <input type="text" name="server" />
<input type="submit" value="Submit">
</form>
I have used the same name attribute for the radio buttons and the input field and the result is that the name (server) is being duplicated when the submit is pressed.
I understand why it doesn't work in the current way. Any idea how to achieve something like this with javascript ? (no third party like jquery please)
I have no access to change the server code so I can't use a different attribute name because the server will not know it...
Try this pure javascript (modified your html code)
function changeradioother() {
var other = document.getElementById("other");
other.value = document.getElementById("inputother").value;
}
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" id="other" value="other">Other <input id="inputother" type="text" onchange="changeradioother()" />
<input type="submit" value="Submit">
I added an id to the last radio button and the inputbox.
You cant use the same name for the text input. Radio buttons are fine because only one will be returned to the server.
Other <input type="text" name="serverCustom" />
Check to see if the value of "server" is null or empty ("") when you get it, and then if it is grab the value of serverCustom.
If you wish to use pure javascript to check the values, and send the data you require use this:
http://jsfiddle.net/Lord_Zero/w5x4h/
Is this what you are trying to do?
Fiddle: fiddle
function submit(){
var curRadio = document.querySelector('input[name="server"]:checked').value;
var serverValue;
if(curRadio==4)
{
serverValue=document.getElementById("other").value;
}
else
{
serverValue=curRadio;
}
alert(serverValue);
}
Is there any way to use an object for ng-value of a radio button?
Imagine you have a radio button whose ng-model is an object, like this:
modelObject: {val:'', text:''}
And this would be the radio button:
<input type="radio" ng-model="data.modelObject" ng-value=""/>
Is there a way to do something like the following (obviously it doesn't work)
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
?
Thanks
I know I can use the ng-change directive. I'm just wondering if what I am asking it's possible, it would be very smart
EDIT:
as requested in the comments, I am giving a bit of extra info on my setup.
I want to save in the model both the value of the button and its label. So let's say I have an array in my controller called impactOptions and a ng-repeat directive to create the buttons:
<div ng-repeat="option in impactOptions" >
<input type="radio" ng-model="data.modelObject.val" id="rbGroup{{option.id}} ng-value="option.id"/>
<label for="rbGroup{{option.id}}">{{option.text}}</label>
</div>
The problem with this setup is that in that way I'm only saving the value of the button, while I would like to also save it's label. I really need it later.
I'm looking for a way to do something like this
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
You can have an object as the value in ng-value:
<div ng-app>
<input type="radio" ng-model="modelObject" ng-value="{val:1, text:'text'}"/>
<p>>{{modelObject|json}}<</p>
</div>
example fiddle
The values in ng-value can also be dynamic as well per request:
<div ng-app ng-init="opt={id: 1, text: 'some text'}">
<input type="radio" ng-model="modelObject" ng-value="{val:opt.id, text:opt.text}"/>
<p>>{{modelObject|json}}<</p>
</div>
updated example fiddle
You can use ng-value="option":
<input type="radio" model="data.modelObject" ng-value="option"/>
When you need id you can have it from $scope.option.id and when you need text you can access it from $scope.option.text. Check my answer here. Does this work for your case?
I'm sure there's a simple answer to this, but I'm a novice teaching myself Javascript and JQuery and I just don't know enough to figure it out myself. Any help you can provide is greatly appreciated.
I'm building a form that generates HTML emails for my company based on hundreds of different inputs entered by the form user. Rather than copying and pasting each and every input name into a $_POST line in the form's action script to retrieve the input's data, I'm wondering if there's a way to use Javascript/JQuery to generate a list of the name="" fields from each input on the form to make this easier?
For example, from the following slice of the code, how can I automatically generate a list that contains the name values "bottlespecial6image", "bottlespecial6imagewidth", "bottlespecial6imageheight", "bottlespecial6imagelink", and "bottlespecial6includeprice" (with the idea that my form has hundreds (if not thousands) of inputs, so copying/pasting seems inefficient):
<input type="text" name="bottlespecial6image" value=""/>
<input type="text" name="bottlespecial6imagewidth" value=""/>
<input type="text" name="bottlespecial6imageheight" value=""/>
<input type="text" name="bottlespecial6imagelink" value=""/>
<input type="radio" name="bottlespecial6includeprice" value="yes" checked="checked" />
<input type="radio" name="bottlespecial6includeprice" value="no" checked="checked" />
I apologize if this has already been covered here -- I searched around here for similar questions, but couldn't find anything.
To create a serialized array to submit, you'd use jQuery's serialize()
$('form').serialize();
to just get the names in an array, you can map them:
var inputs = $('form').find('input[name]'); //all inputs with a name in the form
var names = $.map(inputs, function(el) { return el.name });
FIDDLE
$("[name='yourrequiredname']")
will give you list of all elements by same name