Javascript button in a php form

PHP
1

I sure would like to get the “prev ln” button to the right of the ln inputbox with out using a div. The button fails if I place it inside the form on the same line as the input box.

Is that even possible without a div? I’ve not had this need before.

My current script

<!DOCTYPE html>
<html>
<head>
<script>
function ln(ln)
{
var elem = document.getElementById("ln");
elem.value = ln;
}
</script>
</head>

<body>
<?php
$_GET['ln'] = "SMITH";
$ln = "'" . $_GET['ln'] . "'";
echo '<form action="" method="post">';
echo 'ln: <input id="ln" type="text" name="ln" value=""/>';
echo '<input value="Submit Form" type="submit"/>';
echo '</form>';
echo '<button onclick="ln(' .$ln . ')">Prev ln</button> <br/>';
?>
</body>
</html>
2

@nichemtktg ;

Try this,


<!DOCTYPE html> 
<html> 
<head> 
	<script> 
	function ln(ln) 
	{ 
		var elem = document.getElementById("ln"); 
		elem.value = ln; 
	} 
	</script> 
</head> 

<body> 
	<?php 
		$_GET['ln'] = "SMITH"; 
		$ln = $_GET['ln']; 
	?>
		<form action="" method="post"> 
		ln: <input id='<?php echo $ln; ?>' type='text' name='<?php echo $ln; ?>' value=''/> 
			<input value='Submit Form' type='submit'/>
		</form>
		<button onclick="ln(' .$ln . ')">Prev ln</button> <br/>
</body> 
</html>
3

Thanks, but that didn’t work.

However, even when I remove the php, this doesn’t work either though it displays the way I need it to. I think this scripy demos that you can’t have a JS button in a form. I can live with that.

<!DOCTYPE html>
<html>
<head>
<script>
function ln(ln)
{
var elem = document.getElementById("ln");
elem.value = ln;
}
</script>
</head>

<body>
<?php
/*$_GET['ln'] = "SMITH";
$ln = "'" . $_GET['ln'] . "'";
echo '<form action="" method="post">';
echo 'ln: <input id="ln" type="text" name="ln" value=""/>';
echo '<input value="Submit Form" type="submit"/>';
echo '</form>';
echo '<button onclick="ln(' .$ln . ')">Prev ln</button> <br/>';
*/?>

<form action="" method="post">
ln: <input id="ln" type="text" name="ln" value=""/> <button onclick="ln('SMITH')">Prev ln</button> <br/>
<input value="Submit Form" type="submit"/>
</form>


</body>
</html>
4

By having the button inside the form, you need to prevent the default action so the form doesn’t get submitted. Try the example below:


<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <form action="" method="post">
            ln: <input id="ln" type="text" name="ln" value=""/><button id="prev-ln">Prev ln</button>
            <input value="Submit Form" type="submit"/>
        </form>
        <script>
            var ln = '<?php echo "SMITH" ;?>';
            document.getElementById("prev-ln").addEventListener("click", function(e){
                e.preventDefault();
                document.getElementById('ln').value = ln;
            }, false);
        </script>
    </body>
</html>

Here I’ve attached an event listener via JS rather than using the inline onclick attribute, as it’s preferable not to mix JS in with your HTML.

5

Very cool fretburner! Thank-you.

I understand what you did, but I don’t understand

}, false);

what is its purpose in addition to making the script work?

EDIT:

I thought it had to do with keeping the form from submitting, but changing the false to true had no effect that i could detect.

6

addEventListener takes a third argument which specifies whether to use capturing or not. In older versions of FF it wasn’t optional, so it’s a good idea to supply false as the default value: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

7

Excellent work fretburner. Thanks again for all your help.

8