How come the Javascript isValidEmailAndEqual isn't triggered when submitting the form:
echo("<script language='javascript' type='text/javascript'>
<!--
function isValidEmailAndEqual() {
regExp = /^[^#]+#[^#]+$/;
if((document.subscribe.email1.value.search(regExp) == -1) || !isEqual(document.subscribe.email1.value, document.subscribe.email2.value))
{
//alert(isEqual(document.subscribe.email1.value, document.subscribe.email2.value))
alert('Incorrect entered email addresses. They must be valid e-mail addresses and equal.');
return false;
}
//document.subscribeForm.submit();
return true;
}
-->
</script>");
echo ("<div class='subscribe'>
<h4>Subscribe</h4>
<p>Subscribe to iAndApp's newsletter in order to get information about new and updated iPhone games and iPhone applications, that has been released by iAndApp. </p>
<form action='subscription.php' name='subscribe' method='post' onsubmit='return isValidEmailAndEqual()'>
<p class='formlabel'>Förnamn</p> <input type='text' name='first_name'/><br/>
<p class='formlabel'>Efternamn</p> <input type='text' name='surname'/> <br/>
<p class='formlabel'>E-mail</p> <input type='text' name='email1'/><br/>
<p class='formlabel'>Repeat e-mail</p> <input type='text' name='email2'/> <br/>
<input class='inputsubmit' type='submit' value='Subscribe'/>
</form>
</div>");
Firebug tells me there is no javascript on the page.
I have tried both with and without comments and prefix the closing comment tag.
What I do, which may matter, is loading the below content from a server and than adding to a div-tag. The content is presented, but still the scripts doesnt' work. I have also tried to include the scripts on the main/parent-page (the page loading content and adding it to a div) where I have other scripts that works (triggered by component in the main/parent page though).
Thank you in advance!
It should be
echo("<script language='javascript' type='text/javascript'>
<!--
//your code here, obviously not commented
//-->
</script>
FYI, http://www.w3.org/TR/html4/interact/scripts.html#h-18.3.2
Actually, they are triggered. The following HTML (exactly as outputted by your script) causes the function to trigger in both firefox 5 and chrome. As a sidenote, you probably do not need the html comments (<!-- and -->). That's an practice that is generally no longer necessary since browsers that do not support javascript simply ignore everything within the tags.
That being said if you must have the html comments, comment out the --> to avoid it triggering a JS error (as Kumar explains).
<script language='javascript' type='text/javascript'>
<!--
function isValidEmailAndEqual() {
regExp = /^[^#]+#[^#]+$/;
if((document.subscribe.email1.value.search(regExp) == -1) || !isEqual(document.subscribe.email1.value, document.subscribe.email2.value))
{
//alert(isEqual(document.subscribe.email1.value, document.subscribe.email2.value))
alert('Incorrect entered email addresses. They must be valid e-mail addresses and equal.');
return false;
}
//document.subscribeForm.submit();
return true;
}
-->
</script><div class='subscribe'>
<h4>Subscribe</h4>
<p>Subscribe to iAndApp's newsletter in order to get information about new and updated iPhone games and iPhone applications, that has been released by iAndApp. </p>
<form action='subscription.php' name='subscribe' method='post' onsubmit='return isValidEmailAndEqual()'>
<p class='formlabel'>Förnamn</p> <input type='text' name='first_name'/><br/>
<p class='formlabel'>Efternamn</p> <input type='text' name='surname'/> <br/>
<p class='formlabel'>E-mail</p> <input type='text' name='email1'/><br/>
<p class='formlabel'>Repeat e-mail</p> <input type='text' name='email2'/> <br/>
<input class='inputsubmit' type='submit' value='Subscribe'/>
</form>
</div>
Related
I already posted something similar but I didn't receive good answer mainly for my fault, my way to ask wasn't good.
Now I prepared an example to explain what I'm looking for:
I've got a php file with a form and a control script in it, so I post you the stripped example versions:
<html>
<head>
<title> Inserimento</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<script>
function controllo(){
with(document.insert) {
if(citta.value=="" || citta.value=="undefined") {
alert("Attenzione: tutti i campi con asterisco devono essere compilati!");
citta.focus();
return false;
}
}
//alert("Controllo effettuato con successo. Il modulo sara inviato.");
return true;
}
</script>
</head>
<body>
<!-- <div id="scatola" align="center"> -->
<?php
echo"
<form name =\"insert\" onSubmit=\"return controllo();\" action=\"geocode_prova.php\" enctype=\"multipart/form-data\" method=\"post\">
<div id=\"inserimento\" align=\"center\">
<h1> Compila con i dati dell'Annuncio</h1>
<label for=\"citta\">Citta'* </label><input type=\"text\" name=\"citta\" id=\"citta\"/>
<button onclick=\"submit();\">Inserisci!</button>
<!-- <input type=\"Submit\" id=\"Submit\" name=\"Inserisci\"/> -->
</div>
</form>
";
?>
<!-- </div> -->
</body>
</html>
So there is a simple function that controls the only input field.
The php file called does a bunch of things, I've stripped it down to only this.
<?php
require_once("insert_ok.html");
# header('Location: insert_ok.html');
?>
So it only redirects to another page.
My problem is that if I use "input type=\"Submit\" on the first file it works correctly, and if I enter nothing in the filed it stops me, while if I use button onclick=\"submit();\ even if the input field is empty I get the error from the function but then the script let me proceed to the next page.
can you help me?
change
<button onclick=\"submit();\">Inserisci!</button>
to
<button onclick=\"return controllo(document[insert]);\">Inserisci!</button>
I have written a code and now i want to view the output of user selected radio button in the same php page?
How can i do it? Here is my code
<html>
<div>
<form>
<input type='submit' name='radiotest' value='1crn' /> </div>
<input type='submit' name='radiotest' value='1FFZ' /> </div>
</form>
</div>
<div>
<head>
<script src="jmol/Jmol.js"></script>
</head>
<script>
jmolInitialize("jmol");
</script>
<script>
jmolSetAppletColor("gray");
jmolApplet(450, "load <?php echo "/jmol/".$_REQUEST['radiotest'].".pdb"; ?>; select all; cartoon on; wireframe off; spacefill off; color chain; ");
</script>
</div>
</html>
Any suggestions?
This should not be done using PHP (javascript would be a better candidate), but to answer the question:
Make the form so it has an action and method attributes. Action will be the current page (you don't need to specify this attribute if it's the same page) and method will be GET or POST.
Something like this:
<form action="" method="GET">
Now, when you click the button, the form gets submitted and the page reloads but the URL is different:
http://site.com/page.php?radiotest=1crn
You can now check to see if the $_GET['radiotest'] is set using isset() function. If it is set, do whatever you want it to do.
isset($_GET['radiotest']) - tells you if radiotest=something is in the URL
$_GET['radiotest'] - gives you the value of "something" from radiotest=something in the URL.
Because PHP is a server-side language, all code gets executed on the server. By the time the page gets sent to the browser, it has already executed and no further computations can be made. If you must have a PHP solution, the request must be sent to the server, the page must reload.
This is the one of the way to display the output in the same page...
<html>
<head>
</head>
<body>
<form name='test' method='GET' action="">
<input type='radio' name='radiotest' value='1crn' />1crn
<input type='radio' name='radiotest' value='1FFZ' />1FFz
<input type='submit' value='submit' name='submit' />
</form>
<?php
if(isset($_GET("submit")))
{
echo $_GET["radiotest"];
}
?>
</body>
</html>
I have the following forms that are rendered by some PHP logic. The forms render fine; you can see the text inputs and submit button and all.
In IE the forms work as expected. The first form goes to 'index.php?subscribe=go' and the second to 'index.php?unsub=go', but in FF and Chrome, clicking the submit button reloads the page (does not go to form action). I have not checked other browsers.
I found in Firebug that the <form> tag doesn't even exist on the page in Firefox. This is very strange; check it out:
else
{
echo '<div class="subs_main">';
if (isset($_GET['subscribe']))
{
if ($_GET['subscribe'] != 'go')
{?>
Subscribe to <b>Bella Blog</b> for specials, sales, news and more!
<br />
<form action="index.php?subscribe=go" method="post" name="subscribe_form" onsubmit="return checkForm();">
Name: <input type="text" name="name" size="15" />
<br />
Email: <input type="email" name="email" size="20" />
<br />
<input type="submit" value="subscribe!" name="submit" />
</form>
<p class="unsub">You can unsubscribe at any time</p>
<?php
}
else
{
// subscribe user
}
}
elseif (isset($_GET['unsub']))
{
if ($_GET['unsub'] != 'go')
{?>
Sorry to see you go! You can re-subscribe at any time!
<br />
<form onsubmit="return checkForm2()" name="unsub_form" method="post" action="index.php?unsub=go">
Email: <input type="email" name="email" size="20" />
<br />
<input type="submit" value="unsubscribe" name="submit" />
</form>
<?php
}
else
{
// process unsubscription HERE
}
}
echo '</div>';
}
This is the JS for form validation (negligible I think because it works in IE and I get the same result when commenting this script out):
<script type="text/javascript" language="javascript">
function checkForm()
{
var regex = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
var form = document.forms.subscribe_form;
var name = form.name.value;
var email = form.email.value;
if (name == '' || email == '')
{
alert('You must enter both your name and email address!');
return false;
}
else if (!email.match(regex))
{
alert('You must enter a valid email!');
return false;
}
return true;
}
function checkForm2()
{
var form = document.forms.unsub_form;
var email = form.email.value;
if (email == '')
{
alert('You must enter an email address!');
return false;
}
return true;
}
</script>
If you use POST method into your forms all parameters should be passed through INPUT html elements (i.e. action="index.php?subscribe=go" and action="index.php?unsub=go" are wrong).
The <form> tag doesn't exist? Unless you have code that tailors the output to the USER_AGENT, any browser that passes a given set of GET/POST input to the page should receive identical output. It's possible, of course, that they'll render the page and respond to events in (potentially significantly) different ways, but the source code should be identical.
Post the page source and we can look and see what the issue might be.
This was an outlandish WAMP issue. I had some other PHP code in the file that generated a WAMP error (but no error on the live site) that I've been ignoring because it is meaningless. 'Undefined index' is what it's called and the error appears when you call a PHP variable using $_POST[example] instead of $_POST['example']. Most ridiculous.
So WAMP spit out a bunch of HTML (error <table>s) that got mixed up with the other form on my page. IE can handle the messed up form being there and my form (shown in question) worked normally, while FF/Chrome cannot.
Hope this helps someone.
I am trying to display my login inside an iframe which loads in the middle of the start page with gray backgroud, however i have a problem dealing with the target of the iframe, things should work as follows:
1- if user logged in successfully home page should load in the parent window
2- if error, error message should be displayed in the iframe itself.
my code:
<div id="cover5" onclick="javascript:cover5();">
<iframe name="warning" src="SignIn.php" id="warning" onclick="javascript:cover5();">
</iframe>
</div>
SignIn.php
<html>
<head>
<script type='text/javascript'>
function valid(){
if(document.getElementById('username').value.toString().length>=1 || document.getElementById('password').value.toString().length>=1){
return true;
}
else{
alert("The Combination of username and password are Incorrect !");
return false;
}
}
</script>
<script type='text/javascript'>
function ChangeTarget() {
document.getElementById("login").prop("target", "_parent")
}
</script>
<script type='text/javascript'>
function ChangeText(text) {
document.getElementById("label1").innerHTML= text;
}
</script>
<title></title>
</head>
<body>
<form name="login" id='login' target='_self' method='post' accept-charset='UTF-8'>
<fieldset>
<legend>SignIn</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >Email:</label>
<input type='text' name='email' id='username' maxlength="50" /> <br />
<label for='password' >Password:</label>
<input type='password' name='password' id='password' maxlength="50" /> <br />
<br /> <label id="label1" style="color: red"></label> <br />
<input type='submit' name='Submit' value='Login'/> <br />
<a href='resetPassword1.php'> Forgot/Reset Password? Click Here</a>
</fieldset>
</form>
however, the target is not changed by method ChangeTarget() which is called inisde php code, so the problem now is that everything load inside the iframe or everything inside the parent window. anyone knows how to solve the problem?
server side script:
mysql_select_db("mydb",$check);
$email = $_POST['email']; //username that will be submit from a form
$password = $_POST['password']; //password that will be submit from a form
// if(mysql_num_rows($temp_privileges_id)== 1) //if the id found that means that the user is already assigned to a conference
// {
echo '<script type="text/javascript">',
'ChangeTarget();',
'</script>';
header('Location: main.php'); // transefer to home page with variable username
}
There is no method prop. Either set the value of the target attribute directly
document.getElementById("login").target = "_parent";
or use setAttribute
document.getElementById("login").setAttribute("target", "_parent");
.prop() is a jQuery function. If you're going to do it in jQuery, do this:
$("#login").prop("target", "_parent");
If you're not going to do it in jQuery, do it like this in straight JavaScript:
document.getElementById("login").target = "_parent";
Following on from a previous question, (previous question here), the problem I'm having seems to involve trying to pass/post a value through a form when the form action is '#'. I've tried session data but it always returns the last item from the database. Everthing else returns nothing.
Any help/ideas/advice greatly received, S. (Code below)
This is the code that displays the list of items, each containing an 'email' link/button to one instance of a popup window/form that is located at the bottom of the page.
<?php
$query = mysql_query("select * from istable where categoryID = '1'");
while ($result = mysql_fetch_array($query)) {
echo '<h4>'.$result['title'].'</h4>
<p>'.substr($result['descrip'],0,408).'... <strong>Read more</strong></p>
<form action="#" method="post" rel="#sheet" class="see">
<input type="hidden" name="propTitle" value="'.$propResult['title'].'">
<input type="submit" name="submit" value="Email">
</form>
';
}
?>
This is the code for the popup window/form at the bottom of the same page that is called through jquery.
<div id="sheet" class="rounded">
<!--{{{ pane1 -->
<div class="pane" id="pane1">
<h4>Email Details to a Friend</h4>
<p>You have selected to forward the details of <?php echo $_POST['propTitle']; ?> to a friend.</p>
<p>Please fill out the following form</p>
<form class="rounded" id="email-form" method="post" action="<?php echo $pageLink; ?>">
<!-- form goes in here -->
</form>
</div>
<!--}}}-->
</div>
<script type="text/javascript">
$(".see").overlay({mask: '#999', fixed: false}).bind("onBeforeClose", function(e) {
$(".error").hide();
});
</script>
Why are you using PHP for this? If the popup is called through the same page, use JavaScript to get the DOM element value and if you need to process data use AJAX.