Solved

Adding a value from a text box without a Form Submit

Posted on 2010-09-06
6
711 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
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 

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

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

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

Foreword In the years since this article was written, numerous hacking attacks have targeted password-protected web sites.  The storage of client passwords has become a subject of much discussion, some of it useful and some of it misguided.  Of cou…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

932 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now