Sormanne Sormanne - 4 months ago 10
Javascript Question

How change content of a input text when i click to send Form?

I'm needing develop a Google Chrome extension that can be able of change content (value) of text inserted in a input text field when submit button is clicked still in Form page and php script already receives value changed in Form.

eg:


  • Before of button clicked:

    input text value = "Jane"

  • After of button clicked:

    input text value = "Robert"



Here is all that i have until now, but this don't works.

Simple php Form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form example</title>
</head>

<body>
<form action="recovery.php" method="post">
<p>Name: <input type="text" value="Your Name" name="YName" /></p>
<p><input type="submit" value="send" /></p>
</form>
</body>
</html>


recovery.php

<?php

echo '<input type="text" value="' . $_POST['YName'] . '"/>';

?>


Waiting for any suggestion. :-)

Answer
  1. <input> elements are "void": they can't have children and thus don't have innerHTML.
    Change the value property.
  2. The element doesn't have an ID in your html.
    Use its "name".

So, inject.js:

document.getElementsByName("YName")[0].value = "Robert";

P.S. ALWAYS USE THE DEBUGGER to quickly diagnose such problems by setting breakpoints and stepping though the code.

Comments