How can i change the PHP value in textbox through Javascript

Question

I have a textbox the value load from PHP Here is the code

<input  type="text" id="fName" value="<?php echo $row['fName']; ?>" disabled/>
<input type="button" value="Edit" onclick="changeValue('fName')" />

my Javascript

function changeValue(id){  
var value = "test";
document.getElementById(id).value = value;
}

As soon as I click the function, the value change for a few second and go back to default one from database. Can anyone help me

that id is parameter in function.. the code can run show the output but less than 1 second it willgo back to the value of database — Eka Leonardo, Sep 13 '16 at 07:33
your page must be refreshing or your data must be fetched and your form is updated with values from the database, are you using ajax in anyway like for eg. constant sync — Dev Man, Sep 13 '16 at 07:34
@EkaLeonardo It is inside a `form`, it's not possible to have that behaviour unless it was. — Spencer Wieczorek, Sep 13 '16 at 07:44

score 4 · Accepted Answer · edited May 23 '17 at 12:15

After clicking on the button, the page will reload so that the value of the database will be restored.

Please change

<input type="button" value="Edit" onclick="changeValue('fName')" />

to

<input type="button" value="Edit" onclick="changeValue('fName'); return false;" />

to avoid submitting the form.

For more information, please have a look at this: What's the effect of adding 'return false' to a click event listener?

score 0 · Answer 2 · answered Sep 13 '16 at 07:35

If you click on elements like links (a element) or buttons (input[type="button"] or button) page will be redirect. So at the end of onClick action you must write return false to force say to the browser I don't want to redirect this page after click!

For example:

function changeValue(id){
    var value = "test";

    document.getElementById(id).value = value;

    return false;
}

Charly H · Answer 3 · 2016-09-13T13:32:26.353

0

How can i change the PHP value in textbox through Javascript

An alternative to using document.getElementById(id).value would be:

function changeValue(id){  
      var value = "test";
      document.getElementById(id).setAttribute("value", value);
}

edited Sep 13 '16 at 13:32

answered Sep 13 '16 at 07:36

Charly H

147
9

Code only answers are discouraged. Please add explanation of what you code is doing and why and how it answers the OP's question. – jwpfox Sep 13 '16 at 07:59

How can i change the PHP value in textbox through Javascript

3 Answers3