serializing form values where name is blah[email] - javascript

If I have an html form where the name values are:
name="main[name]"
name="main[email]"
name="main[info]"
How would I go about getting all the values of the array in the form of:
main : { name : 'value', email : 'value', info : 'value' }
I've tried jquery's serialize() from an older stack (Obtain form input fields using jQuery?) question but that solution gives me an array along the lines of
{ 'main[email]' : 'value', 'main[email]' : 'value', 'main[info]' : 'value' }
EDIT: reason i'm doing the main[email] format is because I have an extra input there for csrf which I need to differentiate from the actual input values, the final array is gonna be something like:
[ csrf: '', main : { name : 'value', email : 'value', info : 'value' } ]
this way I can just use main values.

Why not just set your fields like this?
name="name"
name="email"
name="info"

Related

In xtype tagfield, the values sent to the server appear as a single combined line. Extjs

In the Ext.form.Panel component, I use the field:
....
{
xtype: 'tagfield',
fieldLabel: 'Установить сотрудников',
name: 'survey_users',
store: {
type: 'usertreestore'
},
reference: 'UserTreeStore',
displayField: 'text',
valueField: 'id',
filterPickList: true,
queryMode: 'remote',
publishes: 'value'
},
....
I set the values for this field and send it to the update in the store.
The value of the field survey_users looks like one combined string "survey_users": 469473475463
but the right kind of values is 469,473,475,463
Below is the full form data when you submit.
[{"text":"\u0414\u0430\u0432\u044b\u0434\u043e\u0432 \u0410\u043b\u0435\u043a\u0441\u0435\u0439","id":"75","survey_users":469473475463,"survey_cofficient":2,"parentId":"73"}]
In the controller, the save method looks like this:
...
saveUserData: function(button, e) {
var values;
var form = button.up('form');
record = form.getRecord();
store = this.getUserTreeStoreStore('UserTreeStore');
values = form.getValues();
id = form.getRecord().get('id');
values.id=id;
record.set(values);
console.log(record)
store.sync();
},
...
Before setting the values ​​in the record, it is clear that the values ​​are and they are in the correct format, but after setting the values ​​in the record field survey_users: NaN
I bring a screen output in the console
How to make sure that when submitting a form, the values of the survey_users field were sent in the correct format?
Try encodeSubmitValue
Here's the FIDDLE
Network:

cellEditableCondition always returning false

I'm trying to get a grid on a website to allow the user the ability to edit cell values for only certain properties. I'm sorry if this is basic level, but I'm new to this type of advanced website design.
I've been looking around and found two previous questions that I tried to draw my functionality from:
How to find if an array contains a specific string in JavaScript/jQuery?
nggrid how can I disable/enable individual column
Combining these, I created the following code so that any row that has "Value" equal to anything in my noneditable list will not be open for the user to change:
noneditable = [ "hamburger", "fries" ]
$scope.gridOptions = {
data : 'gridData',
enableRowSelection : false,
enableCellEditOnFocus : true,
showFooter : true,
columnDefs : [ {
field : 'name',
displayName : 'Parameter',
enableCellEdit : false
}, {
field : 'value',
displayName : 'Value',
/**enableCellEdit : true**/
cellEditableCondition : '$.inArray(row.getProperty(\'value\'), noneditable) == -1'
} ]
};
I'm running this, and its compiling, but all cells in column "Value" are noneditable, even the ones contained in the list (tried both > -1 and == -1 to see if I had just gotten the logic wrong, but both produce the same results). Any thoughts? And thank you in advance.
UPDATE (3/27/15):
I was unable to find the solution to this problem, instead I worked around it by just adding another property on the list of values to be displayed. My operational code is:
$scope.gridOptions = {
data : 'gridData',
enableRowSelection : false,
enableCellEditOnFocus : true,
showFooter : true,
columnDefs : [ {
field : 'name',
displayName : 'Parameter',
enableCellEdit : false
}, {
field : 'value',
displayName : 'Value',
cellEditableCondition : 'row.getProperty(\'editable\')'
}]
};
I'm just posting this code in case it helps someone else out.

ExtJS 3: form load with several items with identical names

I have an ExtJS form which contains several items that have the same name. I expect that when the form is loaded with the values from server-side all of those equally named components will get assigned the same relevant value.
Apparently, what happens is that only the first element from the group of equally named gets the value, others are skipped.
Is there an easy way to alter this observed behavior?
UPDATE
Below is the code of the form:
var productionRunAdvancedParametersForm = new Ext.form.FormPanel({
region : 'center',
name : 'productionRunAdvancedParametersCommand',
border : false,
autoScroll : true,
buttonAlign : 'left',
defaults : {
msgTarget : 'side'
},
layoutConfig : {
trackLabels : true
},
labelWidth : 200,
items : [
{
xtype : 'fieldset',
title : 'ASE',
collapsible : true,
autoHeight : true,
items : [ {
xtype : 'hidden',
name : 'genScens'
}, {
xtype : 'checkbox',
name : 'genScens',
fieldLabel : 'GEN_SCENS',
disabled : true
}]
}]
,
listeners : {
beforerender : function(formPanel) {
formPanel.getForm().load({
url : BASE_URL + 'get-data-from-server.json',
method : 'GET',
success : function(form, action) {
var responseData = Ext.util.JSON.decode(action.response.responseText);
if (!responseData.success) {
Screen.errorMessage('Error', responseData.errorMessage);
}
},
failure : function(form, action) {
Ext.Msg.alert("Error", Ext.util.JSON.decode(action.response.responseText).errorMessage);
}
});
}
}
});
The server response is:
{"data":{"genScens":true},"success":true}
What happens is only the hidden component gets value 'true', the disabled checkbox doesn't get checked. If I swap them in the items arrays, then the checkbox is checked but the hidden doesn't get any value.
The behaviour you see is exactly what I'd expect.
Inside a form, using the same field name multiple times -unless you use it for radiobuttons, which is not the case- is an error. Just think about what the form submit function should do in this case: should it send the same key (input name) twice, possibly with different values?
(Obviously, in the case of radiobuttons the answer is simple: sent the input name as key, and the checked radiobutton's value as value).
What Ext does here is, scan the form seaching for the input field matching the name, and then assign the value to the first matching input (since it assumes no duplicate names).
You can work it around simply by:
using two different names in the form (eg. genScens and genScens_chk )
sending the same value under two different keys in the server-side response, e.g.
{"data":{"genScens":true,"genScens_chk":true},"success":true}
Please note: if you cannot alter the server response, still use two different names, just add a callback to the success function, setting the genScens_chk value accordingly, like that:
success : function(form, action) {
var responseData = Ext.util.JSON.decode(action.response.responseText);
if (!responseData.success) {
Screen.errorMessage('Error', responseData.errorMessage);
}
else{
formPanel.getForm().findField("genScens_chk").
setValue(responseData.data.genScens);
}
},

How to set value of ng-model attribute based on value from $scope?

I have an array that looks like this:
$scope.fieldsets =
[
{
fields:
[
{
label: 'What would you call your idea?',
name: 'name',
key: 'entry.810220554',
type: 'text',
required: true
},
{
label: 'Bild',
type: 'file',
key: 'entry.810220554',
required: false
}
]
}
];
It generates a bunch of fields, like this:
(this is simplified)
<input
type="{{field.type}}"
name="{{field.key}}"
id="{{field.name}}"
ng-required="field.required"
/>
Currently, I post the values using http-post and a html-form. I would like to use angular $http.post instead. Therefore i would like to bind the the value connected to the key-key in the array. So it posts with the same key-values as it does when I post it in html with the name-attribute.
<input
ng-switch-default
type="{{field.type}}"
name="{{field.key}}"
id="{{field.name}}"
ng-required="field.required"
ng-model="{{field.key}}"
/>
but this generates an error. I also tried ng-model="field.key"the problem with this is that the input is populated with the value entry.810220554, I want ng-model=entry.810220554
Try ng-model="entry[field.key]", if the value of field.key is indeed a key in the entry hash.

Dynamically assign variable to jquery autocomplete query string

I'm coding form where a user can submit playlists. There is an 'artist' field and a 'song' field. Both are input type 'text'.
I'm attempting to use jquery's autocomplete functionality in both fields. Autocomplete results for the artist are functions of user-keystrokes and autocomplete results for songs are functions of user-keystrokes AND the value of the artist input field.
Autocomplete seems to work to populate a list of suggestions under the artist input field. search.php is the script reading the query string.
$(".artist").autocomplete("searchDev.php?type=artist&"+mydate.getTime(), {
width: 180,
selectFirst: false
});
In search.php, a var_export of $_GET in searchDev.php after an a keystroke yields
array (
'type' => 'artist',
1367531572213 => '',
'q' => 'a',
'limit' => '10',
'timestamp' => '1367531576911',
)
This is just fine.
However, when I try to supply a variable to the query string(here window.sartist) in autocomplete(for the song input field),
$(".song").autocomplete("search.php?type=song&sartist="+window.sartist+"&"+mydate.getTime(), {
width: 180,
selectFirst: false
});
sartist is not defined correctly, ie var_export($_GET) in search.php yields
array (
'type' => 'song',
'sartist' => '[object HTMLInputElement]',
1367525807081 => '',
'q' => 'a',
'limit' => '10',
'timestamp' => '1367526169637',
)
if a global variable, not attached to the window is used in place of window.sartist in the query string, var_export($_GET) yields
array (
'type' => 'song',
'sartist' => '',
1367528252501 => '',
'q' => 'a',
'limit' => '10',
'timestamp' => '1367528260585',
)
So I suspect that the query string cannot be modified after it is loaded. Does anyone have a viable workaround to allow variables to be dynamically assigned to the autocomplete query string? Basically I need the 'song' autocomplete suggestions contingent upon the value of the 'artist' field.
You just need to use a function as source to pass multiple dynamics params to the query :
$('.song').autocomplete({
var value = $(this).val();
source:function( request, response ) {
$.getJSON( "searchDev.php", {
term: value ,
data:{
type:"song",
myparam:$('#myparam').val()
}
}, response );
}
})
In this example, if current input .song have value 'high hope' and the #myparam field have value "pink" the query will looks like : searchDev.php?term=high+hope&type=song&myparam=pink
Fiddle (no real data source, just see the console) : http://jsfiddle.net/RfuBP/3/
Doc for the source option of jquery autocomplete : http://api.jqueryui.com/autocomplete/#option-source
PS : In your code, are you sure that window.sartist returns a value and not the element ?

Categories

Resources