Question

I want my form to have a field with a pre-fixed value like this:

New York x

And let the user be able to change it by clicking on the X. In other words they click the X and they get a text field to write whatever they want.

Is there an easy way to do this or is it a lot of code?

—

Box9: After integrating your code it doesn’t input the prefilled value when submitted:

<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

A generic solution, as long as the markup is as below:

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
});

---

Seeing that you’re getting the value of “New York” from script and not in the HTML, you might want to set the value of the input like this:

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