Solved

Adding a value from a text box without a Form Submit

Posted on 2010-09-06
6
731 Views
Last Modified: 2013-12-13
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
Comment
Question by:dsg138
6 Comments
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 33612569
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
 
LVL 3

Accepted Solution

by:
ovi_mihai earned 400 total points
ID: 33612770
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
ID: 33612779
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
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 

Author Closing Comment

by:dsg138
ID: 33614674
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
 
LVL 3

Expert Comment

by:ovi_mihai
ID: 33619702
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 33619778
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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question