Generate input field using jQuery's append - javascript

Issue:
I am attempting to append an input field from a modal window, containing a value inserted by the user, to an existing panel. So far the user is able to create the new field from the modal and add it, however, as this is part of an edit page, I want their input to be added to an input field. Here is the working code: BOOTPLY EXAMPLE. I want the newly generated field to be formatted the same as the existing fields because it will become part of a giant form allowing it to be submitted and update the operational page.
Question:
Will I have to format this within the append function itself where I declare the other formatting constraints? or can I somehow set the attributes within the 'cloudcontainer' div where the input is being appended to? Also, should I be using .html function instead of append? Performance is really not a concern here.
Thanks

You have to append exactly same formatted input tag as you have generated in the beginning and then add the form value to it
$("#clickme").click(function(){
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b><input style="display: inline; width: 325px;" class="form-control" id="projectName" type="text" value="'+$('#fieldvalue').val()+'" </input></p></div>');
});
Demo

In your JavaScript, on the line where you append fields you should do something like this:
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b>'+'<input type="text" value="' + $('#fieldvalue').val() + '"></p></div>');

Related

How do I return a selected value from a complicated dropdownlist in MVC?

My dropdownlist works like a treeview. Since, I cant seem to figure out if Html.DropDownListFor does this, I am having to do it the old fashioned way. Here is my code.
View:
Controller:
How do I get the selected value (LocationId) back to my controller? id="locSelection" in the view, brought in as object selection in the controller. Thank you:)
First of all it's not a old fashioned way it's the bootstrap way of replicating dropdown
Second of all it's not a drop down element...
Since this contains only ul and li tags and those are not of input type you cannot post back the values...
Also another problem in the code is you are setting the ID locSelection on multiple elements and that too in a loop .. So you will have a whole lot of elements with the same ID which is a Big NO. The Id's must be unique else it's a nightmare when we start using Jquery on these elements...
Solution -- Use Jquery
Remove the Id's
Add a class to all the anchor tags eg: locSelection
Maintain a hidden input field inside your form. We will use this hidden input field to post back the data on form submit.
<input type='hidden' name='locSelection' id='locSelection' />
Now bind a click event to the anchor tag inside the li and inside this event put that Clicked anchor tag text value into the hidden input.
$('.locSelection').on('click',function(){
$('#locSelection').val($(this).text());
});

JQuery fill the form but failed to be recognized

I am using Flask as the backend. And I wrote a simple form with WTForm, say,
field = StringField('input:', validators=[Required()])
And I write a JQuery to fill it automatically
$('#theidofthefield').val('fillingin');
And I click the submit button in the form but it shows that the field is empty. And I check the request.form.field.data is also empty.
Hope to get a solution.
I have no idea about WTForm but you can check if your field element has got the name attribute, which is required to send back to the backend code.
Your field has to be something like this:
<input type="text" name="thenameofthefield" id="theidofthefield" />
//-----------------^^^^^^^^^^^^^^^^^^^^^^^---name attribute is required.
Another way to fill value is:
$('#theidofthefield').attr('value','filling');
Lets see if it works..
In case variable field is pointer to the object then..
$(field).val('dfsdf') or $(field).attr('value','filling') may work.

Disable editing part of input box

I know I can disable/lock part of an input box using
<input type="text" disabled="disabled"/>
or
<input type="text" readonly="readonly"/>
but I want to have
<input type="text" value="[[inputbox|edithere]]"/>
where the user can only edit edithere
I have tried to google this, however the only related things I can find are how to disable an input box completely or disable certain keys.
I don't know the input boxes id or how many there are (dynamically created via php onload), but I know that they will always be a pipeline and two ]] bookending the value I want to edit.
EDIT
http://jsfiddle.net/7rTMK/
You can't do this with a stock input just manipulating attributes.
However you can simulate this with css and some extra markup:
<div class="wrapper">
<div class="static text">static text</div>
<input class="text" type="text" />
</div>
Position "static text" div on top of the input and add left padding to the input text.
example http://jsfiddle.net/MTEec/
It's impossible. Use a tag to wrap the input, and put the uneditable parts before, or after the input, and style the tag to look like an input, and style the input to match that styling.
If you need the form to send all the data, create a hidden input after your input, and update it's value with JavaScript (to the static and the input's text concatenated) upon changing the value of the main input. That way when the form is sent, the later hidden input with the same name will be used.
While it's not entirely impossible to do, it would be extremely difficult to do and it's a very bad practice to try doing something like that, at least for your use case.
You should obtain the user input without restriction inside your input box, if you want to add square brackets or the such, you can add them later using either Javascript or your service side language.
Alternatively, if you really wish to display the characters inside the textbox, you can use claustrofob's solution and mess around with the CSS.

Process each form fields in a form using JQuery

I have many questions based on form. I don't know the title suits or not. I created a JSP page and contains a form. It has many fields like input, select, textarea.
First is I want to count the number of fields in the form using JQuery. I tried the following.
var ln=$("#fileUpload").find('input,select,textarea').length;
alert(ln);
The form has one select box, 3 input fields and a textarea. But it was giving 0, instead of 5.(#fileUpload is the form id I want to submit)
How to get the exact number of fields?
Next is, I want to get each element in the form and find some attribute value. For examaple I want to get the name or id attribute for each element.
I would recommend using each() function:
$("#fileUpload input,select,textarea").each(function(){
console.log(this);
}
Btw: don't use alert, use console.log() instead ;)
You need to make sure that the form is loaded before your js script is launched.
To do so, wrap it in document ready like so:
$(function () {
var ln = $('#fileUpload').find('input, select, textarea').length;
alert(ln);
});
There should no problem in your code
Check that you have added the jquery and add an attribute to your form
id="fileUpload" then check
Also, check you don't have any other element having id fileUpload
like input type="file"
In your page <form id='fileUpload' ... > must be unique
Fiddle http://jsfiddle.net/qUJZf/

Set value to hidden column with jquery

I am trying to set value to a hidden column. Previously i have achieved this by doing:
var bc = $("select[title='Broadcast Channel']").val();
$("select[title='Execution Channel']").val(bc);
This works fine as I am able to get the column which exist in html source.
Now I am trying to set value to a hidden column which I have hidden in Sharepoint 2010 list setting. And I am not able to find it under html source (e.g. <input type=hidden....>).
How can I set value to this hidden column?
Not sure if the following method will be acceptable to you, but here goes...
In sharepoint, make the input field non-hidden. Instead, make it invisible at document.ready() using JQuery. If the input field is given a specific ID/class name, you can get a reference to the same, and set the text (using text() function), or for more complex situations, consider enclosing it all in a div.
Best Regards,
Gopal Nair.
In share point make the field as text input and then using jquery make it hidden and then set the value. try something like
$('input[type="text"][title="abc"]').attr('type','hidden').val("abc");
There is a common problem that if an element is hidden from back end code, normally it is simply not rendered in the html generated. Elements that needs to be manipulated at the front end need to be shown but hidden using html or js code.

Categories

Resources