I have this form with get set as method.
<form method="get" action="index.html">
<input type="checkbox" name="item" value="1" />
<input type="checkbox" name="item" value="2" />
<input type="submit" />
</form>
When I submit, i end up with the url
index.html?item=1&item=2
I wonder if it is possible to make a more neat format like comma-seperation, for instance
index.html?item=1,2
I have been searching for a while, but I cannot find how to obtain this. Do I really need to implement this with javascript?
function submitForm(){
var name=document.getElementsByName('item[]');
var str="";
for(i=0;i<(name.length);i++){
if(name[i].checked){
str+=name[i].value+",";
}
}
if(str.length>0){str=str.substring(0,str.length-1)};// remove the last comma
var url="actionpage.html?item="+str;
document.getElementById('formid').action=url;
document.getElementById('formid').submit();
}
Please rename the checkbox to item[], this will create an array. Then call this function in your button click event.
Related
do get to point quick
<input type="checkbox" name="name1[]" value="1" />
<input type="checkbox" name="name1[]" value="2" />
note the brackets in name [] - in classic html, posting form with this, the POST body would contain this
{name1:[1,2]}
now building a reactjs, inputs have name, ref, but can i use the brackets there too? does not seem to work... having predefined objects, trough .map() function i output the checkboxes, but how to keep their values qrouped with the shortest code?
actually, its supersimple, if i would write it as
<select ref="name1" name="name1" multiple="true" ....
how simplest way do this with checkboxes, with select i have result in this.refs["name1"], without any overhead hassle, how to do it with checkboxes pls? to avoid any crazy long coding?
The way is to wrap checkbox in a parent div & then access them through its ref as follow:
<div
ref={ref => this.inputs = ref}
>
<input type="checkbox" name="name1" value="1" />
<input type="checkbox" name="name2" value="2" />
<input type="checkbox" name="name3" value="3" />
</div>
const array = this.inputs.children
const name1 = array[0]
const name2 = array[1]
const name3 = array[2]
I hope it help you.
I have a form where I want to submit a hidden value that is not seen (or editable) by the user.
Originally I was attempting to do it with something like:
<input type="hidden" data-ng-model="data.selfscan" value="true">
But looking into the issue and at previously asked/answered questions here, I learned that hidden input type doesn't work with AngularJS. So instead I needed to do something like this:
<input type="text" data-ng-model="data.selfscan" value="true" data-ng-value="true" data-ng-show="false" />
Unfortunately, that did not work either.
I saw another post about how I should initialize it, so I had
<input type="text" data-ng-model="data.selfscan" data-ng-init="data.selfscan='true'" data-ng-show="false" />
That seemed to do the trick in getting the value to appear in the form (at least when I viewed it by making the box visible), but unfortunately the init seemed to break another part of the form making the entire thing unsubmittable.
I've spent way too much time on what should be a simple thing, so I'm looking towards all of your expertise for help or suggestions of what else to try or what could be going wrong.
Just handle the form submit action in the controller.. like this.
Html:
<form novalidate class="simple-form">
<input type="text" ng-model="user.name" /><br />
<input type="submit" ng-click="updateUser('hidden data')" value="Save" />
</form>
Controller:
$scope.updateUser = function(hidden){
if(hidden){
$scope.user.other = hidden;
}
};
Your first attempt is almost right:
<input type="hidden" data-ng-value="data.selfscan" value="true">
As input hidden is not editable by user it does not implement two-way binding, so you need to do one way value binding.
I have an array of persons, each one should have phone and name,
so I did :
<div ng-repeat="a in arr">
<ng-form>
phone{{a}}:<input type="phone" name="phone" />
text{{a}}:<input type="text" name="name" />
</ng-form>
</div>
When finish to enter phone and name for the first person, I want to call "doSomething" function .
What is the best way to do that? I prefer to not use watch.
Here is a plunker for example.
I'd suggest you to use ng-blur in your case. Using ng-keyup will trigger the function on every key release event, which is not good at all. You should check below example example how it works
phone{{a}}:<input type="phone" data-ng-blur="doSomething();" name="phone" />
I've updated your fiddle to check more.
EDIT
If you only want to execute for the first iteration then you should pass index to your function and check if its equals to 0. Then it must be for first iteration. like
ng-blur="doSomething($index)"
In your function
$scope.doSomething = function(index){
if(index === 0)
alert("finish");
};
one of the ways to achieve this is
<input type="phone" name="phone" ng-model="input.phone" ng-change="onchange()"/>
<input type="text" name="name" ng-model="input.name" ng-change="onchange()"//>
and then on your scope
scope.input = {};
scope.onchange = function(){
if(!input.phone) return;
if(!input.name) return;
//other logic
}
btw, best practises says always have a dot in your ng-model
Probably, you're looking for the following.
HTML
<div ng-repeat="a in arr">
<ng-form>
phone{{a}}:<input type="phone" name="phone" ng-change="doSomething()" />
text{{a}}:<input type="text" name="name" ng-change="doSomething()"/>
</ng-form>
</div>
Controller:
$scope.doSomething= function () {
// do something
};
Note: You can also use ng-blur that will be triggered only once you leave focus from input field.
I created this simple example: http://jsfiddle.net/5Bh59/.
If you switch between AngularJS 1.2.1 and 1.1.1, you'll see the radio buttons don't work properly in either version. If you watch the radio button's $dirty field, 1) for version 1.1.1, it will only be set when the first button is clicked, and 2) for version 1.2.1, it will only be set when the last button is clicked.
I read this answer: AngularJS Radio group not setting $dirty on field but I don't really understand the answer. Not only that but the fiddler example demonstrates the same behavior.
So, is this a bug in AngularJS and how can I work around it?
You either need to give each radio button input a different name, or you need to wrap each radio button in an ng-form (each of which have a different name). If you use two inputs with the same name in the same form, only the last one will be bound to the property on the FormController. If you use different names, then each input will have its own property on the FormController.
Example with different names for each radio button:
http://jsfiddle.net/BEU3V/
<form name="form" novalidate>
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.myRadio1.$dirty}}<br />
Field1 $dirty: {{form.myRadio2.$dirty}}<br />
Value: {{myRadio}}
</form>
Example wrapping with ng-form:
http://jsfiddle.net/39Rrm/1/
<form name="form" novalidate>
<ng-form name="form1">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
</ng-form>
<ng-form name="form2">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.form1.myRadio.$dirty}}<br />
Field2 $dirty: {{form.form2.myRadio.$dirty}}<br />
Value: {{myRadio}}
</form>
If you'd like a single check for the radio group, you can wrap all the radio buttons in their own ng-form and call it something like name="radioGroup".
http://jsfiddle.net/6VVBL/
<form name="form" novalidate>
<ng-form name="radioGroup">
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Group $valid: {{form.radioGroup.$valid}}<br />
Group $dirty: {{form.radioGroup.$dirty}}<br />
Value: {{myRadio}}
</form>
This answer is related but perhaps not exactly applicable, but after finding and reading this item I felt it valuable to provide, and I don't have enough points to just comment on an answer (which I thought would have been a more appropriate way to respond).
My issue was that I wanted to show a required error (using ng-messages) but when you tabbed through / past the radio button group $touched didn't turn true unless you shift-tabbed back from the next UI element back to the last radio button of the group. (When my form renders the radio buttons are not set - I'm wanting the user to make a selection and not rely on the user accepting a default.)
Here's my code:
<div class="form-group" ng-class="{'has-error': pet.genderId.$invalid && pet.genderId.$touched}">
<label class="control-label">
What is your pet's gender?
<span ng-messages="pet.genderId.$error" ng-show="pet.genderId.$invalid && pet.genderId.$touched">
<span ng-message="required">(required)</span>
</span>
</label>
<div>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="1" required ng-blur="pet.genderId.$setTouched();" />Male</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="2" required ng-blur="pet.genderId.$setTouched();" />Female</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="3" required ng-blur="pet.genderId.$setTouched();" />Not sure</label>
</div>
</div>
The 'magic' was adding the ng-blur attribute to set 'touched' myself even if only the first radio button was tabbed past.
You may be able to employ a similar tactic for $dirty by calling $setDirty() in the ng-changed attribute.
In the following example, message is undefined when I display it in the controller after the event is fired. Why?
<form>
<input type="text" ng-model="message.Title" />
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-click="sendMessage(message)" />
</form>
Controller:
$scope.sendMessage = function(message) {
console.log(message);
}
My code seems identical to the documentation here except my controller manages the entire "page" not just the form.
Wow nevermind, apparently when you submit with blank values it doesn't even create the object.
I see you've found your problem, but I'd like to propose a solution to prevent your problem anyway:
<form name="messageForm" ng-submit="sendMessage(message)">
<input type="text" ng-model="message.Title" required/>
<span ng-show="messageForm.title.$error.required && messageForm.title.$dirty">required</span><br/>
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-disabled="messageForm.$invalid" />
</form>
The above will make the Title required, display an error message, and disable your submit button if the form isn't valid.