I'd like to be able to replace a standard HTML <TEXTAREA> input with insertable <INPUT> text inputs. By insertable, I mean having two TEXT form inputs (name, role) and an "Add" button after it to add a new name/role after this one if desired.
Ideally I'd have 'role' in an HTML <SELECT> input (drawn from my database) but I'm not really asking about that now :)
Also (again ideally) I'd like to be able to read these value in and parse them to look the same as when they were entered, i.e. with the text fields and pulldowns.
My database stores all of this in a single MySql 'text' which right now I have to enter manually in the format :
name - role ; name2 - role2 ; name3 - role3
and my script (that creates XML from this) explodes the "name" into two nodes explode'd by a "space-dash-space" and separates each node when it reads a semicolon.
Edited to show that my main problem is how to replace the plain HTML <textarea> with one or more <INPUT> fields and serialize them so they can be stored in my MySQL text record.
You can save the data as serialized php or JSON encoded string. That way, you can keep the object structure in the TEXT field.
Hope that helps.
Here was my solution: to use jQuery's replaceWith, replacing the TEXTAREA's tag with a bunch of <INPUT TYPE=TEXT name=myVar[]> so that they were stored in an array, and implode/explode the values as I needed them.
Related
I've got an PDF document with 2 editable text fields: "surname" and "email".
Now the Email ALWAYS consists of this format: Name.Surname#email.com . So I can simply copy the email and I already have got the data I need in the memory/clipboard.
Now I need JavaScript to do 2 things:
1) Copy the email into the "email" field on Open-Document event.
2) Parse the Name.Surname#email.com and only copy the Surname into the "surname" text field
Before the PDF document is opened, the Name.Surname#mail.com already has been copied to the memory. Now when I open the PDF document, I want both things 1) 2) done.
How do I go about this please?
Create onchange handler and parse input data by regexp. Then manually update fields.
I have a textbox where I want to allow users the ability to type in potentially dangerous characters such as < and > (this is a mathematical expression data entry field which required me to disable ASP.NET validation on the textbox). The data is stored in a database and retrieved later for display on the page. When I display the data in the textbox, I am setting it like this:
textboxA.Text = expression; where expression comes from the database with the potentially dangerous characters.
Anyway, I tried purposely inserting something like < script>alert('hi') < /script> but I can't get this script to execute when the Text property is set (translates to value attribute in client-side HTML. The result looks like:
< input type="text" value="<script>alert('hi')< /script>">>< /input>
So what gives, is the value attribute safe from injections?
Note: The spaces before each tag in the examples is only for StackOverflow because it deletes tags from questions.
To properly insert this code into your site you must understand how your code work. I'm not sure how ASP.net declares input field but as long it doesn't automatically encode special characters then my tip should let you insert code.
If for example this is how code of your input looks like (this is input field for HTML site) where is <?php if (isset($_SESSION['username'])) {echo $_SESSION['username'];} ?> its part of the code that inserts your script back into the HTML page (assuming you are saving value into session and redisplay the value in the textbox)
If you're passing argument back to the form by using the URL:
http://www.website.com/index.php?username="><script>alert('hi')</script>
From
<input type="text" name="username"
value="<?php if (isset($_SESSION['username'])) {echo $_SESSION['username'];} ?>">
Then the code you want to inject must look like this:
"><script>alert('hi')</script>
Notice "> at the beginning of this code. Basically what it does is to end the value="" by using " tag and then closes input field with >.
So the actual result would be:
<input type="text" name="username" value=""><script>alert('hi')</script>
From there you will be able to insert code such as JavaScript.
The builtin textbox control automatically encodes the text attribute. When you checked the output, did you use view source or the developer console. The console shows escaped data as unescaped, while view source will show the actual output.
Anyways, a classical attack on textbox value attributes would be:
" autofocus onfocus="alert(1)
It might not be possible but I think its worth a shot so I am asking.
Servlet API is basically a ticketing process/script which searches through a form to find form fields that it recognizes, it has a list of names and those names are the only form fields it recognizes, anything else it wont pick up when creating a ticket.
I am sure everyone knows of the property "NAME" in html that all elements have.
So basically this ticketing process has a list of "NAMES" that it searches for in a form and ALL the form fields that have a "NAME" from the Servlet API's list of "NAMES" it will pick and fill out a ticket..
So for example. http://jsfiddle.net/KWetJ/ over here there is a textbox named "priority"
Below is the list of "NAMES" the Servlet API has. It will search through the form and since one of the NAMES in the form matches its Servlet API name list, it will pick that up and add it to a ticket.
The priority form field is picked up as it matches a name in the Servlet API list and creates the ticket with priority that was chosen in the form and picked up by Servlet API.
NOW THE PROBLEM: as some might have guessed I cannot create additional or custom form field names because I cannot add new names into the Servlet API list. So What I was thinking if possible is to add a drop down list in to the Description section of the form and so in a way I can start adding textboxes and drop downs into that textarea for description.
Goal is this:
A POSSIBLE SOLUTION OR ALTERNATE, How would I do this?
![Alternative Or Possible Solution with AJAX][4]
![Alternative Or Possible Solution with AJAX][4]
Try this on for size: http://jsfiddle.net/maniator/Ke5dy/
$('#addText').change(function(){
$('#myText').append(this.value);
});
HTML:
<select id='addText'>
<option value='hello'>hello</option>
<option value='hi'>hi</option>
<option value='hola'>hola</option>
<option value='shalom'>shalom</option>
</select>
<textarea id='myText'></textarea>
A textarea can only ever have text in it. HTML form field tags within a textarea won't be rendered as input elements. If you want embedded HTML elements within text and have them rendered as input elements, you'll need to use something like CKeditor.
I have a form which has many elements (e.g. textarea, input, select), after users have entered some data the states of these elements should change.
For example, an input[type="radio"] element will have the attribute checked="checked" if a user has checked it. The value attribute of an input[type="text"] element will contain the text entered by user.
The problem is that the html string returned by $('#form1').html() does not contain these data.
Feel free to take a look at this example:
http://jsfiddle.net/cmNmu/
You can see that no matter what your inputs are, the html returned is still the same (having no attribute data).
Is there any easy way to collect the html including their states?
Thanks in advance.
use below code getting the value of input type text via jQuery
alert($("input:text").val())
Maybe you could use the 'onblur' event handler to set the value of the element when you leave it
You should get the value using :
$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();
if you have multiple input then you can filter them bu their name or class or even id. Then you will need to select input using .find(':input[name=input_field_name]'). My Suggestion is : use name property instead of other property if you want to use form.
People usually use $('#form1').serialize() to get the values. If html() doesn't return both the source and data, I don't think that there is something you can other than manually constructing the full html by looking at the data.
Live demo: http://jsfiddle.net/cmNmu/6/
By using the jQuery formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The changes in the input elements can be reflected in the html string returned by formhtml().
Thank you very much everyone.
I have a product page wherein if the user clicks on edit, an overlay form window is populated to make it editable.
After the edit is completed and the user clicks submit I want to update the text() of each field of the product which was changed.
So instead of getting value of each input field and updating is there a way I can use $(this).serialize() as an array
Current solution I think of is:
var name = $("#input_name").val();
$("#name_id").innerhtml(name);
But the problem is that there are a lot of fields, and I wanted to use the power of jQuery, instead of grabbing each input field's value manually.
Check out the serializeArray method.
var array = $('#someForm').serializeArray();
Well, there's got to be some way of relating the input elements to the plain text elements (spans? divs?) you want to update. That could be by some naming convention, or by some explicit hook in the input field class names. Once you've got that convention established, it should be a pretty easy matter to iterate over the form fields and update the text.
So for example if the text areas are <span> tags whose "id" value is the name of the input field plus the suffix "_text", then you could do something like this:
$('#theFormId input:text').each(function() {
$('span#' + $(this).attr('name') + '_text').text($(this).val());
});
There are approximately one billion possible variations of course.