I have a form that I ad an element to via JavaScript before it is submitted.
parent.document.getElementById('submitcomment' + id).innerHTML = '<img class="image_real" src="/images/site.png" alt="Mostly Dirty," />
<input class="real" name="freshness" type="text" size="5" maxlength="6" />
<a href="#" onClick="submitComment('+[id]+'); return false;">
<img id="submitcommentimg<?php echo $id; ?>" src="images/check.png" alt="Comment!" border="0"></a>
<div class="submitcommentalert" id="comment_alert_<?php echo $id; ?>" style="display:none">Comment Posted!</div>';
When the form is submitted it seems to be missing the 'freshness' <input> element
That is if I try to access $_POST['freshness']; it is empty.
There is no value attribute in the freshness, this might be the issue. Have you checked to see of the $_POST['freshness'] even exists (isset())?
When the above code is executed, does the DOM gets updated with the newly added content? Also check with FireBug what's actually being posted to the server. Also you are using parent.document - could there be some iframe issues?
UPDATE:
Trying to reproduce the problem I've come up with this snippet which works as expected (when you submit the form, the value of the freshness input is correctly passed):
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function addDynamicContent() {
document.getElementById('myForm').innerHTML =
'<input name="freshness" type="text" />' +
'Submit';
}
function submitComment() {
document.getElementById('myForm').submit();
return false;
}
</script>
</head>
<body>
<input type="button" value="Add dynamic content" onclick="addDynamicContent();" />
<form id="myForm"></form>
</body>
</html>
Now you could tweak it to your needs.
Related
I have following codes
<html>
<head>
<title>Javascript function </title>
<style type="text/css">
.box
{
width:400px;
background-color:#F0F8FF;
}
h4
{
color:#09F
}
</style>
<script type="text/javascript">
function hello(){
var xx=eval(form1.text1.value);
var yy=eval(form1.text2.value);
form1.text3.value=xx+yy
}
</script>
</head>
<body onLoad="form1.text1.focus()">
<center>
<div class="box">
<h1 style="color:#2c80d3 ">Javascript Function</h1>
<table border="0" cellspacing="1" cellpadding="1" width="25%">
<form name="form1" action="textboxes.php" method="Post">
<tr><td> First</d><td width="20px"><input type="text" name="text1" value=""></td></tr>
<tr><td> Second</d><td><input type="text" name="text2" value="" onBlur="hello()"></td></tr>
<tr><td> Result</d><td><input type="text" name="text3" value="" disabled=""></td></tr>
</form>
</table>
<h4>Enter any digit in text1 and text2 and see result in text3</h4>
<h4>Is it possible to do above with php without submitting FORM?</h4>
</div>
</center>
</body>
</html>
No problem, It works fine.
I used java script to sum two numbers.
Is it possible to add two numbers with php without using any submit button?
If yes then please guide me.
http://i41.tinypic.com/2rfev7m.jpg
If you want to do it without a submit button and in php, you can use an AJAX request in javascript to the server, which will compute to value and then return it to the client.
here is the working sample.
First of all we need to create a html file named add.html.
here is the code of the add.html file…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Addition</title>
</head>
<body>
<form action="result.php" method="post">
Enter first Integer: <input type="text" name="first" size="5" /><br/>
Enter second Integer: <input type="text" name="sec" size="5" /><br/>
<input type="submit" name="submit" value="Add" />
</form>
</body>
</html>
place it in the pseudo server folder. If your pseudo server is WampServer, then the path of the file will be
C:/wamp/www/add.html
now open your favorite browser and to the address bar type
localhost/add.html
You can see the add.html page. add with number
You can see two text box where you can input the numbers and a submit button. You can input two numbers into the input boxes and press the submit button (The Add button). But nothing will happen. Because the php will do the adding job.
Lets create the php file. You can name it result.php. As I have already declared in the add.html form action is the result.php.
<form action="result.php" method="post">
if you give different name of the php file then please change the form action php name in add.html.
Here is the php code of result.php…
<?php //Starting of php
$first = $_POST['first']; //Getting Value of first integer from add.html
$sec = $_POST['sec']; //Getting Value of Second integer from add.html
$res = $first + $sec; //Adding the two values and placing the added result to 'res' variable
echo 'Added Result:';
echo $first." + ".$sec." = ".$res; //Showing the result to the screen
//Ending of php
?>
save this result.php file in the server path where you have already placed the add.html file.
Now it is the time to test. Open your favorite browser and in the address bar type…
localhost/add.html
enter two numbers and hit the Add button. you will see that the browser will direct you to the result.php page where you can see the added result.
hope this will help you.
Im just learning javascript the last days (started PHP some months ago).
So, my code make this:
e.g
http://controljuridico.com/video01/
I have three files.
An Html file with the form.
A javascript file with the functions after click on "enviar" (send) button.
A php that process the data.
HTML file (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="css/css.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery.js" type="text/javascript" language="JavaScript"></script>
<script src="js/js.js" type="text/javascript" language="JavaScript"></script>
</head>
<body>
<div id="content">
<h1>Test.</h1>
<h1>Step 1) choose city</h1>
<br />
<br />
<label>test(*)</label>
<hr />
<br />
<form name="form_data" id="form_data">
<label>(*) City</label>
<br />
Medellin
<input type="radio" name="ciudad" value="Medellin" />
Manizales
<input type="radio" name="ciudad" value="Manizales"/>
Cali
<input type="radio" name="ciudad" value="Cali"/>
<br />
<label>(*) Especialidad</label>
<br />
<input type="button" value="Enviar" id="btn_enviar" />
<br />
<br />
<label id="mensaje"></label>
</form>
<div id="resultado" ></div>
</div>
</body>
</html>
js.js File
$(document).ready(function(){
$('#btn_enviar').click(function(){
if( validaRadio( 'ciudad','Ciudad' ) == false) return false;
$.ajax({
type:'POST',
url :'upload.php',
data: $('#form_data').serialize(),
beforeSend : function(){
$('#mensaje').html('Enviando datos...');
},
success: function (data){
$('#mensaje').html('Datos enviados correctamente.');
$('#resultado').html(data);
},
complete: function(){
$('#form_data').slideUp();
$('#resultado').slideDown();
}
});
});
});
Php File (upload.php)
<?php
$sergu = $_POST['ciudad'];
if ($_POST['ciudad'] == "Medellin") {
?>
<label>Ciudad Ingresada:</label>
<br />
<label><?php echo $_POST['ciudad'] ?></label>
<hr />
<?php
}else{
echo "it is not medellin....";
}
?>
So, this works very well but. What if I want this:
After click on "enviar" button also show another similar form at the left of this form.
I mean its just like choosing steps if you choose the step one I need another step and so on and I want that this another step just appear to the left of the previus form.
It is possible? how?
Thanks in advance for your help! I really appreciate it.
You could for example just hide the 'second form' when the page first loads via css like this:
<form id="second_form" style="display: none">...
and when your success function fires you remove the css like so:
success: function(){
...
$('#second_form').show();
}
Short answer: yes.
In jquery, there is .insertBefore(). An easy way to implement what you (kind of) want, is to just echo out the new form in the php, and instead of
$('#resultado').html(data);
Do the following:
$(data).insertBefore('#resultado');
This will insert the new form, echoed out by the PHP, under the previous one. Ofcourse you also have to delete the
$('#form_data').slideUp();
Else, the forms will be hidden.
Okay so I'm confused and lost and have no idea of what I am doing, basically here is my code:
HTML/JavaScript:
<img src="Images/Question1.png" usemap="#mainMap" id="main"/>
<map name="mainMap" id="mainMap">
<area shape="rect" coords="82,192,196,242" onclick="incorrectAnswer()" />
</map
function incorrectAnswer() {
document.getElementById("incorrectVid").style.display="block";
document.getElementById("incorrectVid").play();
document.getElementById("answer_id").value=id;
document.forms["answer_send"].submit();
}
<form id="answer_send" name="answer_send" action="answersend.php" method="POST">
<input type="hidden" id="answer_id" name="answer_id" value="10"/>
<input type="submit" value="Submit" />
</form>
PHP:
$id=$_POST['answer_id'];
echo $id
I have no idea why this is not working any ideas/help?
To grab values submitted via GET/POST you need to assign the name property to your input fields. Try the below:
The HTML and JS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function incorrectAnswer() {
document.forms["answer_send"].submit();
}
</script>
</head>
<body>
<img src="none.jpg" alt="placeholder" width="200" height="200" onClick="incorrectAnswer();">
<form id="answer_send" name="answer_send" action="form.php" method="POST">
<input type="hidden" id="answer_id" name="answer_id" value="10"/>
</form>
</body>
</html>
The PHP
<?php
$id=$_POST['answer_id'];
echo $id;
?>
Note: Your AREA element is not going to work unless you assign it to something.
Your JavaScript function must be within tags or you'll receive errors.
The HTML/PHP part of this is working fine... You are experiencing these issues due to the following three lines...
document.getElementById("incorrectVid").style.display="block";
document.getElementById("incorrectVid").play();
document.getElementById("answer_id").value=id;
where is your name attribute ?
Every input must have a name attribute to retrieve it on php
and your html code must look like this:
<form id="answer_send" name="answer_send" action="answersend.php" method="POST">
<input type="hidden" id="answer_id" name="answer_id" value="10"/> </form>
I have an html page which contains a div that displays the html from an external php file.
It works great until I add a DOCTYPE declaration to the html page. The page continues to function, except the external content does not appear in the div.
<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
<head>
<title>Test Page</title>
<!--meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="./inc/jquery.js"></script>
<script type="text/javascript">
function getinfo()
{
$.post('prodinfo.php', { prodcode: prodcodeform.prodcodevar.value},
function(output)
{
$('#prodinfo').html(output).show;
});
}
function hideinfo()
{
$('#prodload').hide();
$('#openprodinfo').show();
}
function showinfo()
{
$('#prodload').show();
$('#openprodinfo').hide();
}
</script>
</head>
<body>
<input style="position:relative;" type="button" class="button" id="openprodinfo" title="Open" value="INFO" onclick="showinfo();">
<DIV id="prodload" style="position:absolute;margin-left:auto;margin-right:auto;display:none;text-align:center;background-color:#000000;z-index:200;border:1px solid #4e443b;">
<div id="prodinfo" style="position:relative;display:block;top:0;width:1000px;height:820px;background-color:#ffffff;margin-left:auto;margin-right:auto;">
</div>
<form name="prodcodeform">
<input type="text" readonly="readonly" id="prodcodevar" name="prodcodevar" value="nil" >
</form>
<div ID="prodinfobutton" style="position:relative;">
<input style="position:relative;" type="button" class="button" id="closeprodinfo" title="Close" value="CLOSE" onclick="document.getElementById('prodcodevar').value='nil'; hideinfo(); ">
</div>
<input type="button" id="button001" value="ONE" onclick="document.getElementById('prodcodevar').value='item1'; getinfo();">
<input type="button" id="button002" value="TWO" onclick="document.getElementById('prodcodevar').value='item2'; getinfo();">
</DIV>
</body>
</html>
You are switching to Standards mode, so your browser is no longer playing the game of being compatible with Internet Explorer 4.
prodcodeform.prodcodevar.value will error because prodcodeform is undefined.
You don't get a global variable for every element with an id or name in a document.
Change:
<form name="prodcodeform">
To
<form id="prodcodeform" method="post" action="prodinfo.php">
… and make it do something sane when a non-Ajax request gets posted (move it so it is around the buttons, make them submit buttons, and cancel the default event if the JS succeeds).
Then add:
var prodcodeform = document.getElementById('prodcodeform');
before you try to use the variable.
You started your body with </body> instead of <body>.
In a form I have an <iframe> that contains a PHP file (editor.php). This PHP file contains an HTML form.
Well, when I do a "submit form", I call the same PHP file, for example main.php.
When I press the submit button, I have "onclick method" that it calls a Javascript function inside editor.php. This function executes the form.
My problem is that main form is executed correctly but the second form is not.
In the second loop of the form of editor.php receives nothing.
**Check this way it will work as you expected**
//main.php
<html>
<head>
<script type="text/javascript">
function validateMain()
{
alert('main');
}
function validateSub()
{
alert('sub');
}
</script>
</head>
<body>
<form id="main" onsubmit="return validateMain();">
<input type="text" name="first" id="first"/>
<input type="submit" value="Submit Main"/>
</form>
<iframe name="ifr-form" id="ifr-form" src="test.html"></iframe>
</body>
</html>
//test.html the second form included through iframe
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<form id="sub" onclick="return window.top.validateSub();">
<input type="text" name="first" id="second"/>
<input type="button" value="Submit Sub" />
</form>
</div>
</body>
</html>
you must check if php and iframe are compatible, as far as i Know I don't think that frames and php gives any output, hope this helps.