Create input with fixed value

Asked

Viewed 1,617 times

0

I intend to create a input to insert cell phone contacts.

<h5>
  <strong>Contato</strong>
</h5>
<input type="text" id="Contato" name="Contato" value="351" 
       style="width:150px" required />

I want the 351 code not to be possible for the user to delete it, but to be able to add the customer’s number in front, for example, 35191234455xx. When inserting into the table, you must enter the code and the number.

html

  • You are asking for help so that an input value is fixed and cannot be modified, but you are also saying that it has to be possible to add the customer’s contact on input. Could you clarify this better? This fixed field is field that the customer has to change?

  • @fernandosavio I intend that the indicative 351 it is not possible for the user to delete it, but it is possible to add the customer’s number in front, for example, 35191234455xx. When inserting into the table, you must enter the code and the number

  • Now it’s easier to understand, the 351 is a required prefix of the field, and the user can fill in the rest. Question, are you using any CSS framework? Tip: Edit your question and put this last piece of information you gave me, because it’s critical to understand your problem.

  • @fernandosavio I am not using any CSS framework

  • 3

    And why not present the value out of of <input> and add it to the backend? Put that figure in a <span>, for example.

  • @Anderson Carlos Woss, I used your tip, thanks. Just a doubt, and when entering in the database, also inserts the value that is within the <span>?

  • 1

    You’re not inserting what’s inside the span. What @Andersoncarloswoss meant is that when entering into the database, you include the number + what was typed, for example: insert into tabela (telefone) values ('351$telefone')...

Show 2 more comments

2 answers

2

Well, I don’t know if that’s the best way to do it. I created a div simulating the input, with the input readonlyinside and with another input textnext to it, making it possible to edit the value after 351.

<style>.read {
  border: none;
  width: 20px !important;
  margin-left: 5px;
}

.ajuste{
  width: 77.5% !important;
}

div.input {
  width: 155px;
  height: 20px;
  border: 0.3px solid gray;
} </style>
   
<div class="input">
  <input type="text" readonly id="Contato" class="read" name="Contato" value="351" required>
  <input class="read ajuste">
</div>

  • 1

    Otavio, the answer is good, but the disabled causes the input value not to be sent when the form is submitted. This detail is very important and cannot be ignored. It would be nice if you put the links to the documentation of disabled and of readonly. (This comment is just to improve the information. If you add these details in the reply I delete :D )

  • 1

    Well remembered Fernando, I was about to comment on the same thing about the use of disabled, its use can generate future headaches, own experience.

  • These two options are not possible, because in the case I want the value of the code to be inserted in the table of the database and also have to be allowed to add the customer contact.

1


Since it is a fixed number that should not be changed, put it outside the input, where the user will just insert the rest of the numbers into that input, something like this:

351 <input type="tel" name="telemovel">

In the back-end (PHP) you check if the user entered the number correctly and concatenate the "351" to the number:

$telemovel = $_POST['telemovel'];
if(!empty($telemovel)) $telemovel = '351'.$telemovel;

Thus, if the value of $telemovel is empty, nothing will be inserted in the table column where you want to store this number.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.