I am learning from already created webpages (php,javascript, and with smarty) and I promise I've been trying hard to understand this code but my mind just can't, I don't how it works, I have read and read, but I still don't understand.
The next code works perfectly, but I don't know how. It's about a contact form.
This is the original php page:
<?php
include("includes/globals.php");
include("includes/smarty/Smarty.class.php");
$vista = new Smarty();
$vista->display('contacto.tpl');
?>
As you can see, it just displays contacto.tpl, which is (I will put just the interesting parts):
<link href="{$smarty.const.__SERVER_URL__}css/estilo.css" rel="stylesheet" type="text/css" />
<link href="../css/estilo.css" rel="stylesheet" type="text/css" />
<link href="../css/coeco.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{$smarty.const.__SERVER_URL__}scripts/jquery.js"></script>
{literal}
<script>
function validar()
{
$('#formContacto').submit();
}
</script>
{/literal}
</head>
<body>
<form id="formContacto" action="/contacto-enviado.html" method="post">
<table class="formulario_contacto" cellspacing="0" cellpadding="0">
<tr>
<td width="228" height="17">NOMBRE</td>
<td width="110" height="17">TELÉFONO</td>
<td height="17">E-MAIL</td>
</tr>
<tr>
<td><input class="campo_texto" name="nombre" id="nombre" type="text" /></td>
<td><input class="campo_texto2" name="telefono" type="text" /></td>
<td><input class="campo_texto" name="email" id="email" type="text" /></td>
</tr>
</table>
<table class="formulario_contacto" cellspacing="0" cellpadding="0">
<tr>
<td height="17">SU MENSAJE</td>
</tr>
<tr>
<td><textarea class="texto_contacto" name="detalles" rows=5></textarea>
<div align="right"><a class="btn_formulario_contacto2" href="#" onclick="validar()">enviar</a></div></td>
</tr>
</table>
</form>
{include file="foot.tpl"} </div>
</body>
</html>
So, well, ok, fine, it gets data from a form and it submits it with the function submit(), but where is function submit() defined? I mean, yes, I've read http://api.jquery.com/submit/ and it's kind of a trigger, but it must be defined somewhere, right? where? how is it possible that this code works?
Thanks!
Sorry, I know I'm so neeeeeeewbie.
The submit() method is defined on the "form" DOM element. jQuery is just calling into that method to submit the form on the page.
The submit function that jQuery is using is inside of the jQuery code itself. You're using the 'smarty' templating engine to include jQuery in your page with this line
<script type="text/javascript" src="{$smarty.const.__SERVER_URL__}scripts/jquery.js"></script>
Once you've done that, you now have access to all of the awesomeness that jQuery provides, such as, the submit() function to submit a form. jQuery's version helps to make your submit work cross browser. If you'd like to see more on the submit function, look here.
it's you in the future, 7 years later.
Nobody answered your question properly. So I'll do my best.
A <form> is an HTML object with some special properties that differentiate it from other HTML elements, the same way a <button> or a link <a> have special properties that differentiate them from others.
In particular, <form> allows to send information to a server. The information is sent through an HTTP request, the method used is defined in the property method (either GET or POST), while as the URL where the request is sent is specified in the property action.
The way <form> works is governed and specified the same way any other HTML objects are, via a standard. The official body in charge of it is W3C, here is the spec for forms:
https://www.w3.org/TR/html52/sec-forms.html
The spec is then freely implemented by browsers, so the specifics of 'where' the behaviour is defined is inside the guts of the browser core. For instance, you might find an implementation if you look deep enough in the Chromium Project, which is the core in which Chrome is based on. However knowing the specs is more than enough to work with it.
Going back to your specific example:
This form will create and send a POST request from the client page where this form appears with the information input in the form to the relative URL /contacto-enviado.html
Further Reading
For a nice explanation of how works in general, check:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data
Like you said submit is a trigger for the onSubmit event. So when its called it just makes the form invokes that event on the form... by default it will do the exact same thing as clicking a submit input within the form.
Related
I have a table that is part of a form. You are supposed to select one of the rows of the table using checkboxs that are in the last table column and then submit them with the submit button at the bottom. The names of the info from your selected column are then supposed to be sent to another file via method="post" . The problem is that $_POST is always empty. I have scoured this site and others for an answer and while I have found lots of posts about empty $_POST none of them have been able to help me. I will share a simplified version of the code I think could be relevant and bellow that I will list some of the things I have tried that have not worked.
<form action="" method="post" id="f1"></form>
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<?php foreach ($positions as $position): ?>
<tr>
<td><?= $position["symbol"] ?></td>
<td><?= $position["______"] ?></td>
<td><?= $position["______"] ?></td>
<td><input type="checkbox" value="<?= $position['symbol'] ?>" form="f1"></td>
</tr>
<?php endforeach?>
</table>
<input type="submit" value="Submit" form="f1">
A few notes on the above code.
Note 1: The information in positions is from a MySQL table and another web site(the info from the other web site is unformatted text).
Note 2: PHP code is used to create the rows of the table and fill the value in the checkbox because how many rows and what information they will contain will vary with the account.
Note 3: The information should be sent to the same controller document that provided the content for this page. I used an if else statement vary its actions when it receives info from the attribute post.
Here is the relevant code from the controller that the information is being sent too.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
if (empty($_POST))
{
apologize("No selection made");
}
else
{
}
}
?>
At first I thought that the problem was using the php code to fill the input elements value so I tried a number of variations of the php code. However none of them worked and I found no mention anywhere that I looked of this code being bad. Also note that if I view the source page source for the table and input they show the correct value being inserted into the input value in the html that is generated for the page.
Now being fairly confident that the PHP was not the problem I began reaserching reasons that $_POST might be empty even though a value was passed to it from submit. Here are some of the reasons I found.
The url in form does not match the destination but travels through some variation of a redirect during which the $_POST is emptied.
The information in $_POST is affected by Jquery somehow and is therefore formatted wrong. I don't know anything about Jquery so this one was kind of confusing to read through and apparently happens quit often.
There is a maximum amount of data that $_POST is allowed to transfer and someone has gone over it.
Someone typed $_post instead of $_POST.
Someone has done a custom configuration of apache or something else and it is somehow causing the problem.
The information is actually coming through but is not being recognized because of formatting.
There are a number of others that I have found thus far none of them seem to apply to my case. If you have any questions or want any more information about my code or what I have tried thus far let me know.
If anyone has a solution, thought, or even an inkling about what is going on and how to fix it let me know all help will be greatly appreciated.
(edit)
This is the HTML that my code generates.
<!DOCTYPE html>
<html>
<head>
<link href="/css/bootstrap.css" rel="stylesheet"/>
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="/css/styles.css" rel="stylesheet"/>
<title>C$50 Finance: Sell</title>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/scripts.js"></script>
</head>
<body>
<div class="container">
<div id="top">
<img alt="C$50 Finance" src="/img/logo.gif"/>
</div>
<div id="middle">
<p id="p1"><b>CASH: $ </b>10,000.00</p>
<form action="sell.php" method="post" id="f1"></form>
<table>
<tr>
<th>symbol</th>
<th>shares</th>
<th>price*</th>
<th>sell</th>
</tr>
<tr>
<td>AAPL</td>
<td>12</td>
<td>106.98</td>
<td><input type="checkbox" value="AAPL" form="f1"></td>
</tr>
<tr>
<td>AMZN</td>
<td>5</td>
<td>299.07</td>
<td><input type="checkbox" value="AMZN" form="f1"></td>
</tr>
</table>
<input type="submit" value="Sell" form="f1">
<div>
Log Out
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer>
Copyright © John Harvard
</footer>
</div>
</body>
</html>
The solution to this problem was to replace value in the checkbox input with name. I am not entirely sure why this works but it does.
I have this field on my screen which is a text input field, but when I try to access the value from JS it returns null
Below I've attached a screen shot where you can see that Chrome has the value stored (see left panel) and that JavaScript could not get the value (bottom panel) and the top half of the bottom panel you can see the html code.
Now I am also not sure if this will help but the fields are created dynamically using PHP, and the script is registered at the top of the html document. And there is only one of the fields with that name on my HTML Page
FULL HTML CODE
<body>
<link href="Objects.css" rel="stylesheet" type="text/css">
<script src="eFarmClicks.js"></script>
<div class="ContentPanel"><label class="HeadingLabel">ADD GROUP</label>
<table>
<tbody>
<tr>
<td><label>GROUP NAME</label></td>
<td><input type="text" name="edtGroupName"></td>
</tr>
<tr>
<td><label>MAX ANIMALS</label></td>
<td><input type="text" name="edtMaxAnimal"></td>
</tr>
<tr>
<td><label>MAX MALE ANIMALS</label></td>
<td><input type="text" name="edtMaxMAnimal"></td>
</tr>
<tr>
<td><label>MAX FEMALE ANIMALS</label></td>
<td><input type="text" name="edtMaxFAnimal"></td>
</tr>
</tbody>
</table>
<input type="submit" name="btnSubmitAddGroup" value="Add Group" onclick="btnSubmitAddGroup_click()" ;="" onmousemove="mousemove(this)" onmouseout="mouseout(this)" style="background-color: green;">
</div>
</body>
Sorry about the way the code pasted. It was copied directly out of chrome.
** edit **
My javascript code :
function btnSubmitAddGroup_click(){
var xmlhttp = new XMLHttpRequest();
var groupname = document.getElementsByName('edtGroupName').item(0).value;
var max1 = document.getElementsByName('edtMaxAnimal').item(0).value;
var max2 = document.getElementsByName('edtMaxMAnimal').item(0).value;
var max3 = document.getElementsByName('edtMaxFAnimal').item(0).value;
alert(max1); // to test the value
};
** mouse move functions **
function mousemove(obj){
if(document.getElementsByName(obj.name).item(0).style.backgroundColor!="blue")
{document.getElementsByName(obj.name).item(0).style.backgroundColor="Green";};
};
function mouseout(obj){
if(document.getElementsByName(obj.name).item(0).style.backgroundColor!="blue"){
document.getElementsByName(obj.name).item(0).style.backgroundColor="transparent";
};
};
****EDIT 4 OF TODAY**
(ALSO IN MY COMMENTS)
Guys, how will this impact my code? I just realized it might be relevant to mention that the edits are in an iframe. I realized this might be relevant when I checked this command document.getElementsByTagName('input')
okay i found the problem, and i would like to thank This link and This Link for helping me get to the answer.
Okay so this was the actual problem:
The iframe is created dynamically
and the inputs were in the iframe (which i at first didnt feel the need to say in the original question)
but after some further research and review i found that this was the cause of the problem
I assume its because the input was in the iframe which is a seperate document (and i still stand under correction). So the actual code to get the value was
document.getElementById('content').contentDocument.getElementsByName('edtGroupName').item(0).value
which could also be solved using the methods mentioned in the links.
for all beginners with js this is what the code does:
//this gets the i frame of the current page
document.getElementById('content')
// this is the document (or if you will, the page loaded in the iframe)
document.getElementById('content').contentDocument
//this gets my edit on my page of the frame
document.getElementById('content').contentDocument.getElementsByName('edtGroupName')
// and this simply gets the input value
document.getElementById('content').contentDocument.getElementsByName('edtGroupName').item(0).value
I got following scenario:
A site is sending a request to a php-file to hand me some data. For this request I am selecting an item - here is the code for that part:
<form action="?modul=transaktionen&subModul=monitor" method="post">
<input type="hidden" name="suchVal" value="1">
<input type="hidden" name="action" value="1">
<!-- A LOT OF STUFF INBETWEEN ... -->
<table>
<tr>
<td>
<input type="radio"
name="hostsARR[host][idGcomp]"
id="nod_331"
value="331">
</td>
<td>Some text which is really not important</td>
</tr>
<tr>
<td>
<input type="radio"
name="hostsARR[host][idGcomp]"
id="nod_332"
value="332">
</td>
<td>more text that is not important</td>
</tr>
</table>
<input type="submit" class="sendButton" name="edit" value="Show details">
</form>
And when I select one of these item and hit the button it should send me the request with these attributes:
action 1
edit Show details
hostsARR[host][idGcomp] 332
It does that normally, but when I add javascript to it it gets totally messed up! It does not send the right request. What happens is that I do not get the hostsARR. Everything else gets through. I added a script by frequency-decoder.com for pagination and for sorting. You can find the script here if you need a look at it: http://www.frequency-decoder.com/2007/10/19/client-side-table-pagination-script.
Basically my question is whether there are known Javascripts or bugs or whatever I don't know or am not capable of giving a name for that mess up POST (or other) requests?
Seriously this is driving me crazy as I really do not see a reason why sorting a table or rather adding javascript should alter a form element to that extent.
Thnx in advance for your help.
EDIT: The request doesn't work anywhere BUT IE ... dunno where IE is maybe more tolerant?
Answering to the information given, I can conclude that the pagination or sorting script has nothing to do with what causes your error.
My guess is that your manual actions have caused this or some other included script.
But unless you provide us these no-one can tell.
If you could provide the full source to recreate the problem we could all be of more help.
I see lots of jquery tutorials from building the submit form from scratch, and that is cool, but I'm wondering if I can convert my existing form.
I'm using a typical form, and already have an email and blank values checking in place. Right now, on submitting the form, the user is taken to the confirmation php page withing form-submit.php.
I'd like to change that to just giving a user a line on the current page "Your form has been submitted"
Here is my form:
<form name="theForm" action="/contact-form2.php" method="post" onsubmit="return formCheck(this);" >
<table class="formTable" cellpadding="3" cellspacing="0">
<tbody><tr>
<td align="left"><b>Name:</b></td>
<td><input name="name" id="name" size="25" value="" type="text" /></td>
</tr>
<tr>
<td align="left"><b>Email:</b></td>
<td><input name="email" id="email" size="25" type="text" /></td>
</tr>
<tr>
<td align="left"><b>Confirm Email:</b></td>
<td><input name="email_confirm" id="email_confirm" size="25" type="text" /></td>
</tr>
<tr>
<td align="left"><b>Subject:</b></td>
<td><input name="Subject" id="subject" size="35" value="" type="text" /></td>
</tr>
<tr>
<td align="left" valign="top"><b>Message:</b></td>
<td><textarea name="Message" id="message" cols="30" rows="6"></textarea></td>
</tr>
<tr align="left"><td> </td><td><input type="submit" value="Submit" onclick=" return checkEmail();" /> <input type="reset" value="Reset" /></td></tr>
</tbody>
</table>
</form>
So is it possible to just change the on submit or onclick to be able to both submit the form through the external php file, and stay on the same page?
You can convert the existing form, but it is not as simple as just changing the onSubmit or onClick events.
When you use jQuery or another Ajax library to do a callback you are loading new content into the existing page. To do that you need a labeled block, usually a div, to contain any data to change. You also need to write the wrapping code for the callback to send it and to update the page's HTML.
The quick and dirty version on your form would be to wrap the table in a div tag and the Ajax call return new HTML for that div. Your new target for onsubmit would be the wrapping code for the callback I described above.
You still need to do all the work to use jQuery and point it to the right places. As I use prototype.js I can't really detail the jQuery process, but all the tutorials you are reading can.
Yes it is. I would suggest introducing some Javascript (the following example uses jQuery):
<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
// bind some code to the form's onsubmit handler
$('form[name=theForm]').submit(function() {
if(formCheck(this)) {
// $.post makes a POST XHR request, the first parameter takes the form's
// specified action
$.post($("form[name=theForm]").attr('action'), function(resp) {
if(resp == '1') {
alert('Your form has been submitted');
} else {
alert('There was a problem submitting your form');
}
});
}
return false;
});
});
</script>
The return false at the end of the above submit handler prevents the browser from loading up the form's action (following the url) in the traditional way. Furthermore, if Javascript is not present, the form will submit the old school way, so essentially you have added a layer of usability above your standard form implementation which degrades gracefully.
I would like to point out that it is always a good idea to provide the user with realistic feedback. That is to say, the ajax posting of the form can capture some indication of this from the server, in the above example I have assumed that a '1' means that the record was successfully saved, and a '0' means it was not saved (the query failed, etc.). The message displayed to the user depends on this outcome.
Yes, you can change the onclick form action to a javascript:myajaxsubmit() function.
I'm trying to understand this bit of code:
in display.php:
<html>
...
<body>
<table>
<tr>
<td>
User info: <iframe id="SpControlFrame1" name="SpControlFrame1" src="javascript:'';"path_src="index.php?cmd=YYY" ></iframe>
</td>
</tr>
</table>
</body>
</html>
in another file, I have a switch statement:
main.php
switch ("cmd") {
case ZZZ:
include("foo.php");
break;
case YYY:
include("blah.php")
break;
}
blah.php:
<?php
//some functions for processing
?>
<html>
<head>
...
</head>
<body>
<input type="text" size="12" name="username">
<input type="button" value="submit">
</body>
</html>
1) So, can some explain what is happening here? The iframe is embedded in the page and doesn't cause a reload or anything like that.
2) I'm trying to duplicate this functionality on another page but the iframe is always empty (I've verified this using the IE developer Toolbar)
Without seeing the code in question, I couldn't really say what's happening. Your example presumes that the code in question is server-side, and when a particular variable/condition is met, then the iframe is created or populated by blah.php.
You would have to ensure that the same code is called when creating this other iframe. Perhaps you could expand on the code in question? Source for the original, and source for the new (not the iframe, but the containing document).
How does this work for you?
User info: <iframe id="SpControlFrame1" name="SpControlFrame1" src="index.php?cmd=YYY" ></iframe>