Adding a value from a text box without a Form Submit

Experts, in a related post, I received a solution of listing out the 2 teams for different games.
There is a "Choose!" button next to each team which:
-  Allows the user to Choose one of the 2 teams
-  Inserts that Choice into the database with the

<input type="submit" value="Choose!" onClick="_submit('<?=$gameid?>','<?=$fav?>')";>

Since each line has it's own submit button, the Form itself does not have one.
This has been working fine, but...

Recently, I realized that I needed to add ONE text field to allow the users to type in the total number of points (INT) as a tiebreaker...

Something like this:
echo "<CENTER>For Tiebreaker, Enter total points in Game #10 above: <input name='Tiebreaker' type='text' size='5' maxlength='5'></CENTER>";      

Since the form itself doesn't have a submit button, I would like to
-  Have the user enter their number in the box
-  Click a SUBMIT NUMBER button right next to the text box
-  Have the number insert into the database
userid = '$MemberID'
tiebreaker = //Number from the Text Box

-  And have the text box show the chosen number after it's entered into the database (in case the user wants to change it)

Thanks in advance,

function _submit(teamid,selection) {

function validateForm(frm) {
	alert(frm.teamid.value + "\n\n" + frm.selection.value);
	return false;

if($_POST) {
$finalPID = $_POST["teamid"];
$finalselection = $_POST["selection"];

//add to database
//refresh page


<input type="submit" value="Choose!" onClick="_submit('<?=$gameid?>','<?=$fav?>')";>

Open in new window

Who is Participating?
ovi_mihaiConnect With a Mentor Commented:
you could use 2 forms
you don't need a submit button if you use a simple ajax script

first code is in your page

and you have to create a ajax_query.php page


switch ($_GET['action']){
case 'teamupdate':
      //insert into db the $_GET['team'];
      echo "Team updated ".$_GET['team'];
case 'tieupdate':
      //insert into db the $_GET['tie'];
      echo "Tie updated ".$_GET['tie'];


<script type="text/javascript">
function loadXMLDoc()
if (window.XMLHttpRequest)  { xmlhttp=new XMLHttpRequest();}  // for new browsers
 else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }  //for older browsers
  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    //here you get back from the php response page
    // do what you want with the result

function _submit(what){
//verify content
case 'team':
	for (i=0;i<document.frm.teamRadio.length;i++){
			if (document.frm.teamRadio[i].checked) {team = document.frm.teamRadio[i].value;}
	strQuery = 'action=teamupdate&'+'team='+team;
case 'tie':
	tie = document.getElementById("tieVal").value
	strQuery = 'action=tieupdate&'+'tie='+tie;



<form name='frm'>
<input type=radio name="teamRadio" value="team1">Team 1<br>
<input type=radio name="teamRadio" value="team2">Team 2<br>
<input type="button" name="team" value="Choose!" onClick="_submit('team')";><br><br>

<input type=text name="tieVal" id="tieVal"> <!-- you can put an |onBlur="_submit('tie')"|  so it would update without the button-->
<input type="button"  name="tiebreaker" value="Choose tiebreaker" onClick="_submit('tie')";>


Open in new window

Marco GasiFreelancerCommented:
You can't. As far as I know, since a query has to run on server side, you must pass through the server, that is you must post a form. I have to ask: you have only one form with several submit input or you have several form each with its own submit input?

Anyway, I would suggest to change  the logic of your app: use only one form, replace choose buttons with radios and place in the bottom yout text box for tiebreaker. Finally a beautiful submit button wich pass both choosen team and tiebreak value to insert them in db. Could you consider to use this design pattern?

Best, marqusG
Chris StanyonConnect With a Mentor Commented:
You'll need to run your PHP database script using Ajax. Have a look at the following Javascript function. Basically it makes an Ajax call to a page called ajaxResponse.php with a query string built using the value of a text box with an ID of myInput.

For example:

In your php page, you will need to take the $_GET['myInput'] and run your INSERT query (or what ever other code you need)

Whatever your PHP outputs (echos) will be inserted into a textbox with an id of result

<script language="javascript" type="text/javascript">
function updateDatabase(){
	var ajaxRequest;
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				alert("Your browser seems to have a problem");
				return false;

	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			document.myForm.result.value = ajaxRequest.responseText;
	var myInput = document.getElementById('myInput').value;
	var queryString = "?myInput=" + myInput;"GET", "ajaxResponse.php" + queryString, true);


Open in new window

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

dsg138Author Commented:
Thanks everyone for the help.

I started with ovi's solution and it worked out great.  
Appreciate the Ajax samples!

Chris, appreciate your sample code as well.
Looks like AJAX was definitely the way to go here...
i recomand you ti dig in jQuery!
that's the way you should go..

but first you have to know a little bit of JavaScript
Chris StanyonCommented:
I tend to use MooTools :)

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.