OnChange Submit

[neverforget98]

Hey everyone,

 

I'm trying to make everyones life easier by automating the submit function for our Dropdowns when they have Javascript enabled. But I just cannot get this script to work.

 

You select a name from the dropdown populated from MySQL (that is $result3) but then when the name is selected (with Javascript enabled) the onChange function refreshes the page and doesn't appear to submit anything. It is supposed to submit to the same file and then the submit takes the values and pushes the individual to quickcontact2.php?qcontact=$qcontact but it won't do that. Help please, greatly appreciated!

		<form method='post'>
			<select name='qc2' onChange='this.form.submit()'>
				<option selected>Select a volunteer to lookup...</option>
";
	$result3=mysql_query("SELECT * FROM `regstaff` ORDER BY lname");
		while($test = mysql_fetch_array($result3))
			{
				$fname = $test['fname'];
				$lname = $test['lname'];
				$id = $test['id'];
					{
						echo "<option value='$id'>$lname, $fname</option>";
					}
			}
echo "
			</select>
			<noscript><input type='submit' name='submit' value='Submit'></noscript>
		</form>
";
	if (isset($_POST['submit']))
		{
			$qcontact=$_POST['qc2'];
				header("Location: quickcontact2.php?qcontact=$qcontact");
				exit();
		}	

Thank ya'll!

[ginerjm]

Is this some new form of html where you don't need an action= attribute on your <form>? Also - how are you switching from php mode to html mode and back? I don't see any <? ?> tags.

[trq]

$_POST['submit'] will never be set using an onChange to submit the form. Use a hidden input instead.

[neverforget98]

Is this some new form of html where you don't need an action= attribute on your <form>? Also - how are you switching from php mode to html mode and back? I don't see any <? ?> tags.

Actually, I've never ever had to use the action attribute on my form. Never had problems with that. It might be my problem, I dunno. And as you can see, I start the portion of the script you guys can analyze on line 31. My entire page (quicklookup.php) starts in PHP and ends in PHP.

EDIT: I don't have to use the action attribute because the form is submitting to the same page.

 

$_POST['submit'] will never be set using an onChange to submit the form. Use a hidden input instead.

 

What do you mean by "hidden input"? Sorry, I wish I was as fancy as I think I am. :/

Edited June 25, 2013 by neverforget98

[Zane]

He means that in order for $_POST['submit'] to be set, the user would have to click on it. In your case, the form submits on change so it's assumable that no one will ever be clicking the submit button.

[neverforget98]

He means that in order for $_POST['submit'] to be set, the user would have to click on it. In your case, the form submits on change so it's assumable that no one will ever be clicking the submit button.

The submit button is clicked when users do not have Javascript enabled. What can a solution be for this?

[Zane]

For one, you can use the HTML tag. Put the button inside it and it will only appear when javascript is not enabled.

[ginerjm]

What you need to do is have a hidden field (<input type='hidden' name='submit' id='submit_hidden'> that you populate with the value of your submit button when the js code submits the form.

 

document.getElementById('submit_hidden').value=(your real submit button's value);

 

Now your php code will see a $_POST['submit'] element and your script will function as if they clicked the button instead of the onchange doing the submit.

[neverforget98]

For one, you can use the <noscript> HTML tag. Put the button inside it and it will only appear when javascript is not enabled.

 

My code is like that...you can see it on line 47...

 

What you need to do is have a hidden field (<input type='hidden' name='submit' id='submit_hidden'> that you populate with the value of your submit button when the js code submits the form.

 

document.getElementById('submit_hidden').value=(your real submit button's value);

 

Now your php code will see a $_POST['submit'] element and your script will function as if they clicked the button instead of the onchange doing the submit.

 

I tried this method but I must be doing something wrong. This is my code now:

		<form method='post'>
			<select name='qc2' onChange='this.form.submit()'>
				<option selected>Select a volunteer to lookup...</option>
";
	$result3=mysql_query("SELECT * FROM `regstaff` ORDER BY lname");
		while($test = mysql_fetch_array($result3))
			{
				$fname = $test['fname'];
				$lname = $test['lname'];
				$id = $test['id'];
					{
						echo "<option value='$id'>$lname, $fname</option>";
					}
			}
echo "
			</select>
			<input type='hidden' name='submit' id='submit_hidden'>
			<noscript><input type='submit' name='submit' value='Submit'></noscript>
		</form>
";
document.getElementById('submit_hidden').value('submit');
	if (isset($_POST['submit']))
		{
			$qcontact=$_POST['qc2'];
				header("Location: quickcontact2.php?qcontact=$qcontact");
				exit();
		}				
				

When I go to the page it produces this error:

Notice: Use of undefined constant document - assumed 'document' in /home/isoub/public_html/v4/qiucklookup.php on line 51

Fatal error: Call to undefined function getElementById() in /home/isoub/public_html/v4/quicklookup.php on line 51

[Zane]

My code is like that...you can see it on line 47...

I can't believe I overlooked that!

[ginerjm]

You are throwing some js code in the middle of your php code.  Put that code into the <head></head> section as a function of your webpage output and instead of using explicit js code for your submit, make it call to a js function call and include the setting of the hidden field value as part of the new "submit" function.

[neverforget98]

You are throwing some js code in the middle of your php code.  Put that code into the <head></head> section as a function of your webpage output and instead of using explicit js code for your submit, make it call to a js function call and include the setting of the hidden field value as part of the new "submit" function.

I give up, I cannot get this to work. Thanks for trying though. 

[Zane]

After further inspection of the code [that you] provided, I realize that you are outputting to the browser before your header call.

Not to mention that fact that ginerjim pointed out

You are throwing some js code in the middle of your php code. 

I'll admit, overlooking the noscript tag was an ignorant thing to do, but forgetting to use the tag is pretty ironic.

Surely you must have received a header redirect error? Straight from the manual it tells you:

Remember that header() must be called before any actual output is sent, either by normal HTML tags, blank lines in a file, or from PHP. It is a very common error to read code with include, or require, functions, or another file access function, and have spaces or empty lines that are output before header() is called. The same problem exists when using a single PHP/HTML file.

 

[ginerjm]

A properly constructed html page has header information such as the <doctype> tag, <meta> tags and others at the top.  Then it has a <header></header> section where your <style></style> and <script></script> stuff goes.  (This is the css style settings and your JS code.

 

What I suggested was to create function to put your JS code into, moving it into the <header> section of your page and to add a line to set the value of the hidden submit <input> tag.  Very simple to do.

 

Now in your html, you change your 'onchange' event to point to your new js function:

 

onchange='mySubmitFunc(this.form)'

 

and then your function will be

function mySubmitFunc(f)

{

   f.getElementById('submit_hidden').value=(your real submit button's value);
   f.submit();

}

 

Keep trying!!  The concepts of html processes, js executions and behind-the-scenes PHP processing are difficult to grasp all at once, but it will come to you - but only after you have worked at it for awhile.  When you get something that works - keep it handy to reference for the next time.

[neverforget98]

A properly constructed html page has header information such as the <doctype> tag, <meta> tags and others at the top.  Then it has a <header></header> section where your <style></style> and <script></script> stuff goes.  (This is the css style settings and your JS code.

 

What I suggested was to create function to put your JS code into, moving it into the <header> section of your page and to add a line to set the value of the hidden submit <input> tag.  Very simple to do.

 

Now in your html, you change your 'onchange' event to point to your new js function:

 

onchange='mySubmitFunc(this.form)'

 

and then your function will be

function mySubmitFunc(f)

{

   f.getElementById('submit_hidden').value=(your real submit button's value);

   f.submit();

}

 

Keep trying!!  The concepts of html processes, js executions and behind-the-scenes PHP processing are difficult to grasp all at once, but it will come to you - but only after you have worked at it for awhile.  When you get something that works - keep it handy to reference for the next time.

 

I'm quite obviously doing something completely wrong. It will just NOT work...here is my whole code. Please help. :/ I just wanna get it done, use it and store it as a resource...I've never felt so distructed by code in my life haha.

<?php
ob_start();
/*
REMOVED
REMOVED
*/

require_once("models/config.php");
if (!securePage($_SERVER['PHP_SELF'])){die();}
require_once("models/header.php");
require_once("models/db.php");
echo "
<header>
	<script type='text/Javascript'>
		function mySubmitFunc(f)
			{
				f.getElementById('submit_hidden).value=submit;
				f.submit();
			}
	</script>
</header>";


echo "
<body>
<div id='wrapper'>
<div id='top'><div id='logo'></div></div>
<div id='content'>
<h1>Integrated Services</h1>
<br />
<h2>Quick Lookup</h2>
<div id='left-nav'>";

include("left-nav.php");

echo "
</div>
<div id='main'>
<center>
	<br /><br /><br />
		<form method='post'>
			<select name='qc2' onChange='mySubmitFunc(this.form);'>
				<option selected>Select a volunteer to lookup...</option>
";
	$result3=mysql_query("SELECT * FROM `regstaff` ORDER BY lname");
		while($test = mysql_fetch_array($result3))
			{
				$fname = $test['fname'];
				$lname = $test['lname'];
				$id = $test['id'];
					{
						echo "<option value='$id'>$lname, $fname</option>";
					}
			}
echo "
			</select>
			<input type='hidden' name='submit' id='submit_hidden'>
			<noscript><input type='submit' name='mySubmitButton' id='submit' value='Submit'></noscript>
		</form>
";
	if (isset($_POST['submit']))
		{
			$qcontact=$_POST['qc2'];
				header("Location: quickcontact2.php?qcontact=$qcontact");
				exit();
		}				
				
echo "</div>
<div id='bottom'></div>
</div>
</body>
</html>";
ob_flush();
?>

Edited June 27, 2013 by neverforget98

[ginerjm]

First - I have been very supportive of your issue and we have been having a long helpful dialog.  But your latest sample is too much for me to help you with.  I'm afraid if I get into it, I'll say something wrong and I don't want  to do that.  Maybe someone else can pick up and help you correct this latest code sample.  I will say that you should be using some kind of IDE that can help you out with syntax checking and code references, since right now you have a lot of issues like that.

 

Good luck!