?
Solved

Adding a value from a text box without a Form Submit

Posted on 2010-09-06
6
Medium Priority
?
761 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 1600 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 400 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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 

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

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

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…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
Suggested Courses

762 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