Value stays the same

Question

I want to change the value of an input field before it is getting submitted to the server. It should remove accents. For example, if a user types in "Café" it should search for "Cafe".

It works fine the first time, but when I want to try a different input it goes back to my first input.

For example: I search for "Cafe". Then it searches normally for "Cafe". When I now want to search for "Fruits" it will be searching for "Cafe", since the value doesn´t change.

First of all I created a table like this

<table cellpadding=0 cellspacing=0>
        <tr>
            <td>
                <form action="?" method="Post" style="" name="f_suche">
                    <input name="ID" type="hidden" value="{$smarty.session.POOL.P_ID}" />
                    <input name="SID" type="hidden" value="{$smarty.session.POOLBLOCK.PB_ID}" /> 
                    <input name="addq"  type="hidden" value="" /> 
                    <input name="lastq" type="hidden" value="{$LASTQ|escape:" html"}" />
                    <div style="padding: 10px 0px;">
                        Pool:<strong> {$smarty.session.POOL.P_NAME}</strong> <br>
                    </div>
                    <div class="input-append">
                        <input class="input-xxlarge" name="q" value=qx id="q" type="text" data-provide="typeahead" autocomplete="off" >
                        <button class="btn btn-primary" type="button" onclick="form_submit();">Suchen</button>
                        {if count($key) > 0}
                        <button class="btn btn-primary" type="button" onclick="sx.save(); ">Speichern</button>
                        {else} {/if} <span id="save_rep"></span>
                    </div>
                </form> {if count($key) > 0}
            </td>
        </tr>
</table>

The table works fine and I get everything I supposed to get.

var eingabe = "{$smarty.post.q|escape:"quotes"}";
var pid = "{$smarty.session.POOL.P_ID}"; 
var pbid = "{$smarty.session.POOLBLOCK.PB_ID}"; 
{literal}

function replaceDiacritics(str) {
     var returnStr = '';
       if(str) {
            for (var i = 0; i < str.length; i++) {
              if (diacriticsMap[str[i]]) {
                returnStr += diacriticsMap[str[i]];
              } else {
                returnStr += str[i];
              }
            }
          }
          return returnStr;
}

var qx = replaceDiacritics(eingabe); 
console.log("Test: " + qx);

$('#q').attr('value', qx);
$("#myq").html(qx);

function form_submit() {
    show_loader(); 
//  document.getElementById("q").value = qx;
    document.f_suche.submit(); 
}

As you can see, I tried to change the value everytime, when the button is being clicked, but this is the point, where I find no more workaround. I also tried to insert another button, which should only overwrite the current value with the unaccent word, which also didn´t worked.

I thought that it has something to do with the way, how I tried to change the value, but I can´t figure out, how I can do it another way.

Answer 1

Changed the following way. As I was thinking, I had troubles to assign the newest value to the input field, before submitting it to the server. So I fixed it the following way:

function form_submit() {
  show_loader(); 

  var eingabe = document.getElementById("q").value;
  var result = replaceDiacritics(eingabe);
  document.getElementById("q").value = result;

  document.f_suche.submit(); 
}

function replaceDiacritics(str) {
   var returnStr = '';
   if(str) {
      for (var i = 0; i < str.length; i++) {
        if (diacriticsMap[str[i]]) {
          returnStr += diacriticsMap[str[i]];
        } else {
          returnStr += str[i];
        }
      }
    }
    return returnStr;
}

The changes are right at the moment, when the user hits the button and the newest value is assigned to the input field, which is send to the server, without an accent.