Как сделать так, чтобы поле имело префиксное значение и X для удаления значения

Question

Я хочу, чтобы в моей форме было поле с предварительно фиксированным значением, например:

Нью-Йорк x

И пусть пользователь сможет изменить его, нажав X. Другими словами, он нажимает X и получает текстовое поле для записи того, что хочет.

Есть ли простой способ сделать это или много кода?

-

Вставка 9: после интеграции кода он не вводит предварительно заполненное значение при отправке:

<form class="questionform" name="questionform-0" id="questionform-0">

<textarea class="question-box" cols="12" rows="5"  id="question-box-' . $questionformid . '" name="title"  type="text" maxlength="200" size="28"></textarea>

<span class="prefilled"><script language="javascript"> document.write('' + geoip_city() +''); </script><a href="#"> X</a></span>

<input type="text" name="question" style="display:none">

<input  type="button" name="ask" value="Publicar" onclick="askquestion('questionform-0'); window.location.reload(true);">

</form>

<script type="text/javascript">
$(".prefilled a").click(function () {
    $(this).closest(".prefilled").hide().next().show().focus();
    return false; // Prevent page from jumping to the top
});
</script>

Answer 1

Общее решение, если разметка следующая:

HTML:

<span class="prefilled">New York <a href="#">X</a></span>
<input type="text" name="city" style="display:none" value="New York">

Javascript:

$(".prefilled a").click(function () {
    $(this).closest(".prefilled").hide().next().val("").show().focus();
    return false; // Prevent page from jumping to the top
});

---

Видя, что вы получаете значение "New York" из сценария, а не из HTML, вы можете установить значение ввода следующим образом:

$("input[name=question]").val(geoip_city());

Answer 2

Если вы используете jQuery, это довольно просто сделать:

<form>
    <span id="city">New York</span>
    <a id="edit" href="#"> X </a>
</form>

И сценарий будет:

$("#edit").click(function() {
    $("#city").replaceWith('<input id="edit-city" type="text" name="city" />');
    $("#edit-city").focus();
    return false;
});

Увидеть это в действии .