Create a input textbox without using <input type="text">

Question

I want to create a input textbox that does not require a <input type="text"> form element. The user can still type text into this textbox and the value can still be retrieved using Javascript/jQuery. The reason for doing this is because this textbox will be in a form that upon submit, all form input values will be sent to the server side for processing, and there is this textbox that I dont want its values to be automatically send to server side.

Problem: What is the best way to create such a textbox without relying on HTML form elements input?

Remove the borders and outline of the text input and put it in a div as an only child. — aderchox
– aderchox, Commented Jul 26, 2021 at 8:36

Asaph · Accepted Answer · 2011-11-13 13:54:19Z

9

Just don't give the <input type="text"> tag a name attribute and it won't submit. Here is an example:

<input type="text" id="myinput" value="you will not see this submitted" />

answered Nov 13, 2011 at 13:54

Asaph

164k25 gold badges204 silver badges204 bronze badges

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

1 Comment

Strelok Over a year ago

This is the correct answer to OPs problem. Creating a textbox by not using an input tag is silly.

Philippe Plantier · Accepted Answer · 2011-11-13 13:52:10Z

8

You could use a contenteditable div, too.

From the MDN:

<!DOCTYPE html>
<html>
  <body>
    <div contenteditable="true">
      This text can be edited by the user.
    </div>
  </body>
</html>

http://html5demos.com/contenteditable

answered Nov 13, 2011 at 13:52

Philippe Plantier

8,0733 gold badges29 silver badges40 bronze badges

2 Comments

Mottie Over a year ago

+1 This is what I would have said too, but be aware that this doesn't work in all browsers.

Philippe Plantier Over a year ago

It works on all major desktop browsers. Mobile support is lacking, though.

Royi Namir · Accepted Answer · 2011-11-13 13:49:28Z

1

if you create dynamic <input type="text"> by jQuery - it WILL post back its values.

What do you care if its values are posted back ? just dont do anything with them in the server side.

or ,

before submit - change the type from input to label. ( + save values)

or ,

if youll add the input OUTSIDE the FORM element - it wont submit.

answered Nov 13, 2011 at 13:49

Royi Namir

149k145 gold badges504 silver badges833 bronze badges

Comments

tmaximini · Accepted Answer · 2011-11-13 13:50:38Z

1

you can use a textarea instead of input. then apply stlying with css. also you can use your input tag, just keep it outside the <form></form> then it won't be send over to the server.

answered Nov 13, 2011 at 13:50

tmaximini

8,4937 gold badges50 silver badges69 bronze badges

Comments

Kae Verens · Accepted Answer · 2011-11-13 13:52:09Z

1

just create the input, and don't give it a name or id.

answered Nov 13, 2011 at 13:52

Kae Verens

4,0773 gold badges25 silver badges43 bronze badges

1 Comment

Asaph Over a year ago

You can still give it an id attribute. It will only get submitted if it has a name attribute.

Tim Joyce · Accepted Answer · 2011-11-13 13:53:32Z

1

$("#form").bind('submit', function() {
  $(this).children('input[name=excludethisfield]').attr('disabled', true);
});

I know this isn't specifically what you asked but might be the easiest way.

answered Nov 13, 2011 at 13:53

Tim Joyce

4,5276 gold badges37 silver badges50 bronze badges

2 Comments

Asaph Over a year ago

I don't see what this accomplishes. Users don't edit form input fields after they hit the submit button anyway.

Tim Joyce Over a year ago

@Asaph the disabled attribute will cause it to not post.

Collectives™ on Stack Overflow

Create a input textbox without using <input type="text">

6 Answers 6

1 Comment

2 Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related