I've got a Jquery UI sortable list with add item option. I want to gather these items up and submit them. what input type should I use?
Use the serialize method of the sortable object (http://api.jqueryui.com/sortable/). This method returns a string that you can send using a text input or a hidden one.
Related
I am using number format internationalization for input field.
e.g.my input field will take input values as 12,555.8 but when I submit form, I want to use value 12555.8 without comma.
I am using library react-number-format which is taking care of both the formats.
My question is how can I attach the 12555.8 number without comma to input field so that when I submit form, I can use that value?
<NumberFormat
thousandSeparator={this.props.thousandSeparator}
decimalSeparator={this.props.decimalSeparator}
value={this.state.formattedValue}
valOriginal={this.modifiedInputValue}
onKeyUp={(event) => {this.onKeyUpFormatted(event)}}
onValueChange={(values) => {
const {formattedValue, floatValue} = values;
this.modifiedInputValue = isNaN(floatValue)?'':floatValue;
this.setState({formattedValue});
}}
/>
I tried this code and while form submit tried to capture non formatted value like following
event.target.elements.valOriginal
I added property as data-valOriginal for React element. After this, we can access this value as element.dataset.valOriginal during submit form event.
I am using library react-number-format which is taking care of both the formats. My question is how can I attach the 12555.8 number without comma to input field so that when I submit form, I can use that value?
You do NOT want to attach the value of 12555.8 without the comma to the input field. Whenever you modify the "value" of an input field, you will be changing what is displayed for the user.
Instead, the solution is to do all data-modification outside of the form, right before it is submitted.
So on your form, you'll want to have an "onSubmit" handler, and in your react component, you'll define:
onSubmitHandler = (formData) => {
let cleanFormData = {...formData}
cleanFormData.myNumberInput = cleaningFunction(cleanFormData.myNumberInput)
//submit cleanFormData to server
}
I my form I have some input controls which are bounded with controller's scope data. Based on users selection I am bounding selected item by using ng-model to input controls.
I am validating those inputs by using ng-maxlength ,minlength ,ng-pattern and other inbuilt validation directives.
Class for highlighting the invalid values.
.ng-invalid { border-color:red; }
But when user wants to add a new product, then I am creating an empty object and adding it to controller's scope data.
At the very first time while creating new item I don't want to highlight every thing with red, because very thing is empty.
Is there any way by which I can highlight invalid input on their focus and after it will show as invalid until use put some valid values in it.
When use select any existing data then I am validating control at that movement.
You can use forms' $pristine as a condition for your classes.
I am populating a list of string from jsp to an html <textarea>. e.g.
out.println("<textarea name='word_suggest' rows='10' id='word_suggest'>");
while(it.hasNext()){
out.println(it.next());
}
out.println("</textarea>");
I want the user to edit the textarea and read back the values to jsp (e.g. create another list of strings) so that I can work around with the new list. Can I do this without using the <form> and <post> action e.g work around within the same page?
Currently I am using UiService to create a form and I uses ListBox, from what I understand to pass a value via handler will be something like e.parameter.[Name of ListBox] to access the selected item.
Does anyone know is it possible to use like app.getElementById([Name of ListBox]) to access the selected item. The reason I am using this method is because my list of ListBox-es are dynamic.
I spent some time looking for this answer as well, but finally I tried one idea and it worked.
You can use e.parameter as an array so you can these two will give the same:
e.parameter.LIST_BOX_NAME
and
e.parameter['LIST_BOX_NAME']
So in the second sample any dynamic list box ID can be used. I use same handler for all added dropdown list and have this code to check what dropdown was changed and what value it has now:
if (e.parameter[e.parameter.source] == 'a'){
To change the content of the listBox you can use app.getElementById('ID of the listBox'), from there you can clear() and addItems again but you cannot read the listItems.
When I need to do this I usually store the list of items somewhere else, in a place that I can read anytime, for example the list of items can be stored as a string in the listBox tag itself so I have all items at hand to repopulate the listBox after I have clear it.
I have a simple HTML page with an Unordered list. Is it possible to have an input field where you could add more to the list and it would be saved after you submitted it. What I would like to add would be the content inside of an <li> tag as well as the <li> tags themselves.
Thanks,
Here is a jsfiddle with a demo of what I think you want to achieve: http://jsfiddle.net/mvJNq/25/
Note that I can not answer as to how you should do this on the server, as that depends on how your serverside code, database etc is set up. However, if all you want is to display it as HTML and not have it saved as the user navigates away, you won't need the Submit button at all - then you just need the "Add" functionality.
Yes, it is possible - no, it will not be pretty. Here is what you would do:
create your base form with any default list items/inputs
use jQuery/JavaScript to bind an event handler to a button that you click when you want to add another item (alternatively, you could skip this step and just have another item appear by default)
on your event (be it checking that all input boxes have user-entered text, or the click event in step two) add another list item using jQuery.append(...)
ensure that you have a hidden input field to be used as a "counter" to keep track of the total number of list items and increment the value of this counter each time you add a new list item (note: you may need to use the ParseInt() method, depending on how you design the code for this field)
the page that is receiving the form's inputs should first read the hidden field so that it knows how many items to add, and then you should loop through the items (for or while loop) to add them correctly
Note: I don't know what Server-Side language you are using to handle receiving the form so step 5 is a fairly generic and universally viable option
Sure, it's possible.
The complexity of this comes in when you want to "save" the items. If the user leaves the page and comes back later will that data be available? If so, you will need a database like mySQL or similar. The li tags can be stored as well, but why?
If you just need that information available in that session you can store in a JavaScript variable and have it loop through the variable and spit them out as <li>'s
If you did want to use an add button instead of submit:
$('#addButton').click(function(){
var savedContent = $('#input').val();
}
To create + insert the <li>you can use javascript to create the element and append it to the ul. If you have more than one ul change the index:
var content = document.createElement('li');
content.innerText = savedContent;
document.getElementsByTagName('ul')[0].appendChild(content);