• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 831
  • Last Modified:

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
INSERT INTO TIEBREAKERS SET
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,

-Dan
<script>
function _submit(teamid,selection) {
document.form.teamid.value=teamid;
document.form.selection.value=selection;
}

function validateForm(frm) {
	alert(frm.teamid.value + "\n\n" + frm.selection.value);
	return false;
}
</script>


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

0
dsg138
Asked:
dsg138
2 Solutions
 
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
0
 
ovi_mihaiCommented:
ok..
you could use 2 forms
or
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

<?php

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


?>




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

function _submit(what){
//verify content
switch(what){
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;
break;
case 'tie':
	tie = document.getElementById("tieVal").value
	strQuery = 'action=tieupdate&'+'tie='+tie;
break;
}
loadXMLDoc();
xmlhttp.open("GET","ajax_query.php?"+strQuery,true);
xmlhttp.send();

}


</script>
</head>
<body>

<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>
</form>

<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')";>

</body>
</html>

Open in new window

ajax-query.php
page.php
0
 
Chris StanyonCommented:
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:
ajaxReponse.php?myInput=3

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;
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				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;
	ajaxRequest.open("GET", "ajaxResponse.php" + queryString, true);
	ajaxRequest.send(null); 
}

//-->
</script>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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...
0
 
ovi_mihaiCommented:
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
0
 
Chris StanyonCommented:
I tend to use MooTools :)


0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now