form to normal text using CSS and minimal jquery or javascript

Question

I have a form having all kind of tags (check box, dropdown etc) in my HTML page, on click of a button I want to show the same form as a normal text on the popup. For popup, I am using jQuery dialog.

using following code, I am able to show the same form on the popup. but it is coming as a form with editable fields.

var dialogHtml = jQuery('#requestForm').html();
            jQuery(dialogHtml).dialog();

is it possible to change the same form in non-editable text format on the popup. I don't want to write the same code for the popup.

Actually, requirement is like that, I have a form which needs to be filled and on submitting of that form, I need to display order number along with that form's data. OrderNumber + some other HTML data I am getting dynamically.

What do you mean by "normal text popup"? And why show the same form twice? — Zach Saucier
– Zach Saucier, Commented Feb 11, 2014 at 17:05
Is the requirement to show some sort of 'confirmation'? If so, then you want to send this data to the server first, then return it formatted to ensure that they are confirming what is actually sent to the server. You state that 'on submitting' which it sounds like you haven't actually yet done. — DA.
– DA., Commented Feb 11, 2014 at 17:57
(In other words, can you share the requirements in terms of user-flow/user-needs rather than solutioning? There may be a more appropriate solution) — DA.
– DA., Commented Feb 11, 2014 at 17:58
yes @DA. it is an order confirmation message. Requirement is: we need to submit one request form and in return one confirmation message will get displayed with some order number and date and form data. You are correct I should collect all the submitted data from the server and should display it. but I don't want to write same HTML code in my php file and html file. That's why I was doing it like thi. if you have any better idea, please let me know — user1653773
– user1653773, Commented Feb 11, 2014 at 18:09
@user1653773 I'm not sure I entirely follow. Are you saying you are taking the form data, submitting it to the server, and then want to return the form data for confirmation, but don't want to write any new PHP to reformat it and instead want to use the initial form markup? If so, I'd encourage you to rethink that if I can. Just from a user experience standpoint, the user doesn't want to see the 'form' at this point...they want to see the 'receipt' to confirm yes, that's what they want. — DA.
– DA., Commented Feb 11, 2014 at 18:30

Patrick Moore · Accepted Answer · 2014-02-11 17:07:45Z

3

Yes. Set the disabled property for all new fields.

var dialogHtml = jQuery('#requestForm').clone(); // must use clone() here
dialogHtml.find("input").attr( "disabled", "disabled");
jQuery(dialogHtml).dialog();

Example here: http://jsfiddle.net/tH8yv/

answered Feb 11, 2014 at 17:07

Patrick Moore

13.4k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Patrick Moore Over a year ago

Good point! There may be a better method then, something like $("#requestForm").appendTo("#dialog"); to move into the dialog, and then move back upon dialog close if necessary. That's a lot of extra overhead to apply checked values, selected values, etc.

user1653773 Over a year ago

clone() is a good idea. but I have some dynamic HTML which needs to be appended with the existing form. how can I do it?

Patrick Moore Over a year ago

You can use dialogHtml variable to anchor to, like:

dialogHtml.append("<p>Some new elements here</p>"); $("<p>Something else</p>").insertAfter( dialogHtml.find("input:first") );

user1653773 Over a year ago

I think text area value is getting lost when I am using clone(). is it jquery issue or my code issue..any idea?

Patrick Moore Over a year ago

It is .clone() issue almost certainly. I am going to post another answer which I think may be more relevant given your edits.

Patrick Moore · Accepted Answer · 2014-02-11 18:17:16Z

1

You might try something like this, which loops through all the form elements, and put their names and values into a table for display.

var dialogHtml = $("<table></table>");
jQuery('#requestForm').find("input,select,textarea").each( function(){
    results.append( "<tr><td>" + $(this).attr("name") + ":</td><td>" + $(this).val() + "</td></tr>");
});

jQuery(dialogHtml).dialog();

answered Feb 11, 2014 at 18:17

Patrick Moore

13.4k5 gold badges41 silver badges63 bronze badges

1 Comment

user1653773 Over a year ago

you solution in really good. but it has few problems: 1. my form has "datatable" also, above code is not handling that. I don't know, how to handle it with above logic. 2. "option" button both are coming selected and unselected both.in that case I don't want to display value, I want to display that option label only 3. for all the tags we have some label so instead of "name" I want to display corresponding label value. <label for="details">Details *</label><textarea type="text" id="details" name="details" maxlength="50" size="30"></textarea> like this.

Collectives™ on Stack Overflow

form to normal text using CSS and minimal jquery or javascript

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related