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

Live submit form

Hi Experts,

I've stumpled upon a problem while coding a new website to track football goals and more.

I'm trying to create a submit form that looks like this (simplified):
<form>
<input type="hidden" name="type" value="goal" />
<input type="submit" class="grey" value="<?=$get[goal]?>" disabled />
<input type="submit" name="score" value="+1" />
<input type="submit" name="score" value="-1" />
<input type="submit" name="score" value="0" />
</form>

<form>
<input type="hidden" name="type" value="yellow" />
<input type="submit" class="grey" value="<?=$get[yellow]?>" disabled />
<input type="submit" name="score" value="+1" />
<input type="submit" name="score" value="-1" />
<input type="submit" name="score" value="0" />
</form>

Open in new window


As it works now it refreshes the whole page, but I want it to only update the SQL and refresh the form with the new update <?=$get[goal]?> without page reload.

I've tried myself setting up some jquery/ajax, but havn't been able to succeed due to the handling of the submit button(s).

I have multiple forms which should be able to be handled in each own way (goal, yellow card, red card, won, lost)

Hope to hear from anyone who'd be able to help me!

Best regards
0
implement
Asked:
implement
  • 8
  • 7
1 Solution
 
Ray PaseurCommented:
As written, this will make a GET method request to the current URL.  You almost certainly do not want that because it violates a law of HTTP to modify the data model on the basis of a GET request.  So I would suggest first using a POST request.

Let's look at this: <?=$get[goal]?>
When PHP sees that, it will either (1) bark, if short open tags are off, and because of interference with XML, many installations turn off short open tags, or (2) bark because goal is not a defined constant.  If you want to use goal as an index of an associative array, you need to put it in quotes.  If the statement is written like this you should be OK.

<input type="submit" class="grey" value="<?php echo $get["goal"]; ?>" disabled />
0
 
Ray PaseurCommented:
http://www.laprbass.com/RAY_temp_implement.php seems to work OK using plain old HTTP forms.  I expect you can do what you want with jQuery.  It should be fairly easy to give the different forms and input controls different id attributes.
<?php // RAY_temp_implement.php
error_reporting(E_ALL);
echo "<pre>";
var_dump($_POST);
echo "</pre>";

// DEFINE A VARIABLE
$get["goal"] = "thing";

// END OF PHP - USE HTML TO PUT UP THE FORM
?>
<form method="post">
<input type="hidden" name="type" value="goal" />
<input type="submit" class="grey" value="<?php echo $get["goal"]; ?>" disabled />
<input type="submit" name="score" value="+1" />
<input type="submit" name="score" value="-1" />
<input type="submit" name="score" value="0" />
</form>

Open in new window

0
 
implementAuthor Commented:
Hi,

Thanks for a quick comment.

The problem with the thing you posted is that the page reloads when the submit button is clicked.

The <?$get and so forth is only used in this simplified version posted here. I just tried to make it as easy to understand as possible.

The <?$get[goal]?> or <?$get[yellow]?> is getting a number from the mySQLdatabase, where +1 should increase the number live by 1.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Ray PaseurCommented:
Yes, I know the page reloads.  I did it that way to see if the HTML form would work correctly.  Once you get the HTML form working, and you see that the buttons are doing the correct things to your test data base, you can add the id attributes and the jQuery wrapper to use the script in the "background."  The advantage of doing it this way first is that you will be able to see any error messages very easily.  Once you add the jQuery layer, the messages will be harder to see.  I just find it is easier to debug one thing at a time, that's all.
0
 
implementAuthor Commented:
I've managed to get the form to work fine. I just don't wont the page to reload - only the submitted form.

I'm currently trying with:
  Goals:
    <input type="submit" class="grey button-standard" id="goals" value="<?php echo $p_g[goal]; ?>" disabled />
    <input type="hidden" name="type" value="goals" />  
    <input type="button" name="score[]" class="green" value="+1" onclick = "UpdateGoal(this)" />
    <input type="button" name="score[]" class="yellow" value="-1" onclick = "UpdateGoal(this)" />
    <input type="button" name="score[]" class="red" value="0" onclick = "UpdateGoal(this)" />

Open in new window


    <script type="text/javascript">
    function UpdateGoal(elm){        
        var elmgoals = document.getElementById("goals");        
        
        var url = "request.php";
        var params = "id="+elm.value+"&goals="+elmgoals.value+"&rand="+Math.random();
        var http = new XMLHttpRequest();
                
        http.open("POST",url ,true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.setRequestHeader("Content-length", params.length);
        http.setRequestHeader("Connection", "close");
        http.send(params);
        
        http.onreadystatechange = function () {
            if(http.readyState == 4 && http.status == 200 ){                
                elmgoals.value = http.responseText;                
            }
        }            
    }
    </script>

Open in new window


<?php    
    $id = $_POST['id'];    
    $goals = $_POST['goals'];        
    switch($id){
        case 0: $goals = 0;         break;
        case -1: $goals -= 1;    break;
        case 1: $goals += 1;    break;
    }    
    echo $goals;
?>

Open in new window


This seems to be working fine with the live updateing. I just don't know if this would be the correct way?
0
 
Ray PaseurCommented:
This seems to be working fine with the live updateing... -- that's usually a good sign!  You might want to consider adding a default case to your switch() to prevent hackers from throwing a wrench into the gears.

Line 2 of the first script immediately above.
<input type="submit" class="grey button-standard" id="goals" value="<?php echo $p_g[goal]; ?>" disabled />

Open in new window

Change that to use quotes like this.
<input type="submit" class="grey button-standard" id="goals" value="<?php echo $p_g["goal"]; ?>" disabled />

Open in new window

The reason you want to put quotes around your literal array keys goes to the nature of working in teams, which you will do if you ever advance very far in programming.  Your teammates may be in different countries or even speak a different language.  So consider what will happen to your script if one of them writes something like this in a script that intersects with your script:

define('goal', 'Touchdown!');

If you have quotes, your script will still work correctly.  If not, you're hosed.  So cultivate a good habit and always use the quotes.
0
 
implementAuthor Commented:
Alright that sounds reasonable.

In the above code - how would u use or handle a predefined value - fx. the user_id
<input type="hidden" name="user_id" value="<?php echo $get["user_id"]; ?>" />

Open in new window

0
 
Ray PaseurCommented:
Not sure I understand the question.  If the value does not have to be submitted through the form, you would not want to submit it.  
0
 
implementAuthor Commented:
The hidden value is the user id which should be used in the a query to the db (not shown in the script above). But I've solved this by using:

var elmType = document.getElementById("user_id");

Open in new window


But now I've come across another problem:

I'm printing out this "form" with php, so on each user i can add goals. but when printing through php and using +1 on player#2 it only live updates on player#1 (the <?php echo $p_g["goal"]; ?>

I'm guessing it's the $id, but I can't seem to find a way of changing this to reflect on each form.
0
 
Ray PaseurCommented:
Do you have more than one thing on the page with id="user_id" ?
0
 
implementAuthor Commented:
I managed how to retrieve the input from the php document, so that problem is solved.
0
 
implementAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for implement's comment http:/Q_27404202.html#37011143

for the following reason:

Found the answer elsewhere. The support I got on this thread was irrelevant to my problem.
0
 
Ray PaseurCommented:
@implement: There are so many things wrong with the code you posted here that almost any support would be relevant.  Professionals build applications in steps, and the first step in form handling is to get the HTML-to-Action process right.  The second step is data validation (See PHP function filter_var() to understand this).  The third step is data base access and update.  Those are the things that go on in the background script.  

Only after all of these things work correctly would you even consider starting on the UX/UI aspects of the app.  The first step in UX/UI would be to apply id attributes to the HTML elements so you could style them correctly.  Once that was completed, you would start on the addition of jQuery to make the client-facing page dynamic.  The jQuery calls would then be talking to a background script that you have already debugged and that you know is stable.  Thus any errors that you find would be researched and corrected in the client facing layer.

The part about "...without page reload" puts the cart before the horse.  I am going to post an objection to closing this so you will have an opportunity to show us how you implemented the answer that you found elsewhere.  Thanks and regards, ~Ray
0
 
implementAuthor Commented:
Hi Ray,

Thank you for following up.
The solution is used for an small internal "for fun"-projekt, which is the basic reason of the "bad" code. I'm no professional in coding in PHP.

The solution I found was:

Using 3 documents: index.php, submit.form.js & submit.form.php

index.php
 
<html>
<head>
<script src="submit.form.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<?php 
    $maal = 0; 
?>
<?php
$i = 0;
$p_q = "SELECT * FROM `player`";
$p_r = mysql_query($p_q) or die(mysql_error());
while ($p_g = mysql_fetch_array($p_r)) {
?>
<p>
  Goals:
    <input type="submit" id="goals_<?php echo $i; ?>" value="<?php echo $maal; ?>" disabled />
    <input type="button" value="+1" onclick = "UpdateGoal(this, <?php echo $i; ?>)" />
    <input type="button" value="-1" onclick = "UpdateGoal(this, <?php echo $i; ?>)" />
    <input type="button" value="0" onclick = "UpdateGoal(this, <?php echo $i; ?>)" />
	<?php $i++; ?>
</p>
<?php
}
?>




</body>
</html>

Open in new window


submit.form.js
 
function UpdateGoal(elm, i){
        var elmgoals = document.getElementById("goals_"+i);       
       
        var url = "submit.form.php";
        var params = "id="+elm.value+"&goals="+elmgoals.value+"&rand="+Math.random();
               
        $.ajax({            
            type: "POST",
            url: url,            
            data: params,
            success: function(msg){                
                elmgoals.value = msg;                     
            }
        });        
    }

Open in new window


submit.form.php
 
<?php   
    $id = $_POST['id'];
    $goals = $_POST['goals'];
    switch($id){
        case "0": $goals = 0;        break;
        case "-1": $goals--;    break;
        case "+1": $goals++;    break;
    }   
    echo $goals;
?>

Open in new window


The above gives me the possibility to live update the forms for each player.
0
 
implementAuthor Commented:
Resolved the solution my self with help outside of EE.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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