• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1028
  • 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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
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
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

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