Question

I am using the below code with JQuery and the below is the Form for submittion

<script type="text/javascript">
$(document).ready(function() {
    $("#selhead").click(function() {
        $("#fcourt").show();
    });
    $("#selfile").click(function() {
        $("#fcourt").hide();
    });
});
</script>

<form method="get" action="search.php" name="abc">
<label for='search'>Search : </label>
<input name="searchterm"  type="text" class="searchbox_field" size="60" />
<input class="searchbox_field"  type="submit" value="Submit" />
<div style="font-size:14px; color:blue; font-weight:bold">
    <input class="searchbox_field"  type="radio" name="sel" value="headnote" id="selhead" checked />: Headnote</div>
<div style="font-size:14px; color:blue;; font-weight:bold">
    <input class="searchbox_field"  type="radio" name="sel" value="filenumber" id="selfile" />: Search by File Number</div>

Now my problem is user type “rent & eviction” in search box and submit the form but I want to change it to “rent and eviction” means changing ‘&’ with ‘and’ term

Answer 1

This should work.

<script type="text/javascript">
$(document).ready(function() {
    $("#selhead").click(function() {
        $("#fcourt").show();
    });
    $("#selfile").click(function() {
        $("#fcourt").hide();
    });
    $("#searchform").submit(function() {
        $("#searchterm").val($("#searchterm").val().replace("&","and"));
    });
});
</script>

<form method="get" action="search.php" name="abc" id="searchform">
<label for='search'>Search : </label>
<input name="searchterm"  type="text"  id="searchterm" class="searchbox_field" size="60" />
<input class="searchbox_field"type="submit" value="Submit" />
<div style="font-size:14px; color:blue; font-weight:bold">
    <input class="searchbox_field"  type="radio" name="sel" value="headnote" id="selhead" checked />: Headnote</div>
<div style="font-size:14px; color:blue;; font-weight:bold">
    <input class="searchbox_field"  type="radio" name="sel" value="filenumber" id="selfile" />: Search by File Number</div>

For accessibility’s sake I would recommend changing
$("#selhead").click(function() {
$("#fcourt").show();
}); and its counterpart to $("#selhead:checked").change(function() {
$("#fcourt").show();
});