Is it possible to submit a form without reloading the page?

[kuau]

I have more than one form on the same page. The first is a tiny form that displays a drop-down with the client names so the user can select the correct client. This form does not actually load a table but rather just retrieves the client ID from the client table so that the second form can load it with the data into another table.

The problem is that when the user chooses a name from the drop-down, it reloads the entire page, which is rather annoying. I would like it to just display the name and let the user enter the data without changing the page until the user clicks the submit button.

I have tried combining the forms, moving the ID# field from one form to the other, using $_GET variables, changing the $_GET to $_POST, adding fields, removing fields, mucking about until now the nice drop-down that Blue Walrus helped me with doesn't even work anymore. The $_POST values don't seem to pass from one form to the other. I just can't start all over again.

Are there any examples anywhere of this type of form configuration? Tutorials? I don't have another whole day to spend on this. Sorry to be such a dummy. Thanks for any assistance.

[djr33]

There's no way to do this without doing a request to the server.
You can do a reload or you can do it dynamically using Javascript (Ajax), but submitting forms with Ajax can be a little complicated (and not something I can give much advice on since it's not really my area).
You could also preload everything into Javascript and use Javascript to "submit" the form by dynamically changing the data on the page without needing to request anything on the server.
Both methods have advantages and benefits, but both would work.

Remember though that Javascript needs a backup for uses who don't have a browser that supports it, so you'll need to do the two-page method anyway for that, or perhaps lose those visitors and/or suggest they use a different browser.

[prasanthmj]

There are different ways to do this:
Use Iframes. For example, put the form (that is loaded based on the drop down selection) in an iframe. When the user chooses an option from the drop down, you can load the iframe with the updated form. A small piece of JavaScript will do this.

window.frames[iframeName].location =url;

or you can use the name of the iframe as the 'target' attribute of the first form.

[kuau]

Hi Daniel! The only people who can access the page are the owners and the 2 agents who work in the gallery, and they have javascript enabled. I am using javascript already to trigger the lookup. I know minimal javascript.

<select name="client_id" onChange="document.SelectClient.submit()">

As there are 34,777 clients it has to present in the dropdown, perhaps the 1+ second delay is because of the volume of data. I just want to make sure it is not the fault of my code. Is it better to use GET or POST for this type of look-up? I left out the action and it still seems to do it. Is it better to do it as one form? What determines when you have to use 2 forms?

The ironic thing is that it worked before I "improved" the code and it drives me crazy that I don't know how I broke it. If GET is better, then I can probably get it to work again. I just like to know the best way to do things and it seems inefficient to have to do a whole new query just to display the variable value in the drop-down. Why is it not possible to store the value in a variable from the original query? And worse, I can't get the values from that query to display in the second form. If it's not possible that is one thing, but if I'm just doing something wrong, I'd like to fix it. Very frustrating. Just the answer to the GET/POSt dilemma would at least get me moving in some direction. Any ideas? Thanks.

[kuau]

Dear Prasanthmj: Iframes is a very cool idea. I'll have to try one to see if it will work. I'm not sure where this goes (?).

window.frames[iframeName].location =url;

[djr33]

GET will be sent through the URL and that's possible with forms, but it's not the usual way. Given that POST data was sent, $_POST should contain all the values you need.
print_r($_POST); will give you the info so you can see what is sent.

1.php
<form method="post" action="2.php">
<input type="hidden" name="a" value="1">
</form>
Submitted to 2.php:
print_r($_POST);
Result:
array ( a => 1)
From that you should be able to work out all the details.

[prasanthmj]

That code is to reload the second form. So it should be triggered when an item is selected in the drop down

<select name="client_id" onChange="loadtheform()">
...
...
<script>
function loadtheform()
{
//get the client_id from the drop down

window.frames['frm2frame'].location =url+'?id='+client_id;

}
</script>

Of course, you should have the iframe with that name.

<iframe src='url' width=300 height=300 name='frm2frame'></iframe>

[kuau]

Dear Daniel:

I wasn't quite sure what you meant, but I inserted the print_r($_POST); into my code and it hung my browser. I had to open a new browser to send this. I must have done something wrong.

I ended up changing it back to $_GET and it works great except there is still the 1+ second delay loading the form. Perhaps this is unavoidable.

Now I have a new challenge. There are 2 main girls who add the data and they each want their name to be the default in the agent drop-down to save having to click there each time. I thought that would be easy to fix but this code doesn't seem to work...

<p><label>* Agent:</label>
<select name="agent">
<?php if(isset($_POST['agent']) && $_POST['agent'] != "" && $_POST['agent'] == "DD"){ ?>
<option value="DD">Debbie</option>
<option value="JV">Joanne</option>
<?php } elseif(isset($_POST['agent']) && $_POST['agent'] != "" && $_POST['agent'] == "JV"){ ?> 
<option value="JV">Joanne</option>
<option value="DD">Debbie</option>
<?php } ?>
<option value="DD">Debbie</option>
<option value="JV">Joanne</option>
<option value="TT">Tom</option>
<option value="JJ">Joe</option>
</select></p>

What am I doing wrong? Thanks, e

[djr33]

It sounds like it got into an endless loop and overwhelmed your browser. Place print_r($_POST); before everything else, or even just replace the whole page with it-- then you can see what you're working with. That is-- if you want to take that approach.
If it's working I'd just leave it.

Here's a way to approach the selected issue:

<p><label>* Agent:</label>
<select name="agent">
<?php
$agent = array('AA'=>'Agent A','AB'=>'Agent B','AC'=>'Agent C');
foreach ($agent as $agentv=>$agentn) {
$selected = (isset($_POST['agent']) && $_POST['agent'] == $agentv)?' selected'':'';
echo "<option value=\"$agentv\"$selected>$agentn</option>";
}
?>
</select></p>

Replace the names and values as you need. Untested, but that should work.

Note that you don't need to use all of : isset($x) && $x!='' && $x=='value';
Instead, you just need to use the first and last-- make sure the value you're using exists and then make sure it matches; checking against a blank value is only useful if you aren't checking against another. It's not hurting anything in the code, but it's also not helping (and aside from just keeping it cleaner for readability, it'll run slightly faster, not that it's really relevant especially for a small admin system).

[kuau]

Dear Daniel: Thank you so much for your great advice and feedback about keeping my code clean... I love that. I have spent the entire day cleaning up the data and it is now ready so this will allow me to move on to the sales part. I was feeling like giving up only a day ago.

Here is my version of your code. Have to admit I don't understand agentv and agentn and I screwed it up (sorry):

<p><label>* Agent:</label>
<select name="agent">
<?php
$agent = array('DD'=>'Debbie','JV'=>'Joanne','HS'=>'House');
foreach ($agent as $agentv=>$agentn) {
$selected = (isset($_POST['agent']) && $_POST['agent'] == $agentv)?' selected''';
echo "<option value=\"$agentv\" $selected>$agentn</option>";
} ?>
</select></p>

Here is the error message:

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in .../client-history-add2.php on line 55

Garden time now