This submitenter function is floating around the internet, apparently it is from O'Reilly's. Good job, however, I need it to POST a specific submit value. (Submit button is named submitReport). I have tried
myfield.form.submitReport();
but it doesn't work. I don't really have any ideas about what to do at this point. I am willing to bet that the answer is straightforward but I am stumped, I'd love any suggestions.
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.form.submit();
return false;
}
else
return true;
}
Here is the submit button I am trying to have it enter for me.
The script must produce 'submitReport', there is a PHP function looking for $_POST['submitReport'], this is because there are a few forms on this page.
<form name= "Insert" onsubmit="return validate(this)" method="post" action="">
<textarea name ="link"></textarea>
<textarea name ="country"></textarea>
<textarea name ="province"></textarea>
<input
type ="submit"
style="visibility:hidden"
name ="submitReport"
value =''
>
</form>
Add a hidden field to the form that is named submitReport.
You only have a problem in the first place because you are using textarea elements where it seems input elements would be more appropriate.
If users recognise the textarea as a textarea, they don't expect pressing enter or return to submit the form so you are breaking the usuability of the page. If you are making the textarea elements look like inupts, then use inputs and no javascript is required to submit the form.
Related
I'm trying to submit a form after updating the value of a hidden field from a javascript variable.
This is the code:
<form name=form1 id=form1 method=get action=gestionale.php>
...
...
<input type=hidden name=scrolltop id=scrolltop value=''>
<input type=button name=update value=Update onClick=vai('form1');>
</form>
<script>
function vai(formid) {
document.getElementById('scrolltop').value=document.getElementById('offerte').scrollTop;
document.getElementById(formid).submit();
}
</script>
The form submit works correctly but $_GET[scrolltop] after form submission, is empty even if it was filled with javascript. And testing it with alert before submit shows the correct value.
Anyone knows why?
Thanks a lot.
In your script...
The line document.getElementById('scrolltop').value = document.getElementById('offerte').scrollTop;
What exactly do you intend to do with the last bit (('offerte').scrollTop)?
As far as I understand, you want to return a text value, however setting the value to this will not return anything.
You will need to parse the query string ($_GET variable) and assign that to a variable which you will then pass as the value for the hidden field.
If I'm being completely in the dark here, I'm sorry. You should include a bit more of your code or additional information if my answer seems far fetched.
Anyway, I hope this helps!
I found this:
function submit_form(formid) {
var hidden = document.createElement("input");
hidden.type = "hidden";
hidden.name = "theName";
hidden.value = document.getElementById('offerte').scrollTop;
var f = document.getElementById("form2");
f.appendChild(hidden);
f.submit();
}
I submit the form using a javascript function instead of submit button.
Here I can set a hidden filed to a value I need in my action page.
I have a comment system in which i want to add delete option, for this i have implemented a POST form in each comment which posts comment-id to delete.php, it is working in php, but not in jquery.
i.e in order to delete comment a comment id must be posted to delete.php file which handles deletion of comment from database.
i am trying to fetch that comment-id from input value to post with jquery like this but it gives me the first comment-id value not the selected value.
Jquery
$('form[name=comments]').submit(function(){
var comment_delete = $("input[name=comment-delete]").val();
//$.post('../../delete.php', {value1:comment_delete}, function(data){alert('deleted')});
alert(comment_delete);
return false;
});
repeating form is like this
<form name="comments" action="../../delete.php" method="post">
<input name="comment-delete" type="hidden" value="<?php echo $list['comment-id']; ?>" />
<input value="Delete" type="submit" />
</form>
if i use .each() or .map() it gives me all the comment-id values.
Please see and suggest any possible way to do this.
Thanks.
To find the relevant input, that is the one of the form you submit, you could use this :
$('form[name=comments]').submit(function(){
var comment_delete = $(this).find("input[name=comment-delete]");
BTW, I'm not totally sure of what you do but you might be missing a .val() to get the value of the input.
You have the same name on each hidden input, naturally you get all those inputs as you have not targeted the correct form when doing:
$("input[name=comment-delete]");
"this" whould point to the form inside your submit function. Try this.
$('form[name=comments]').submit(function(){
var comment_delete = $(this).find("input[name=comment-delete]");
//$.post('../../delete.php', {value1:comment_delete}, function(data){alert('deleted')});
alert(comment_delete);
return false;
});
As dystroy said, you are probably missing .val().
var commentId = $(this).find("input[name=comment-delete]").val();
try this
$('form[name=comments]').submit(function(){
var comment_delete = $("input[name=comment-delete]", this);
//$.post('../../delete.php', {value1:comment_delete}, function(data){alert('deleted')});
alert(comment_delete);
return false;
});
this refers to the form being submitted (more generally, to the event source).
$(...) accepts a second parameter, which is then used as a context for the selector. $(selector, context) is equivalent to $(context).find(selector)
This has got to be easier than I'm making it. I ahve a form that has an onclick action, it runs js that submits the form value to another page. How do I allow users to press return to perform the same action? I've tried some onkeypress stuff, but nothing has worked. Below is the form, and the js being run.
Thanks!
**updated code to reflect more of what I am trying to do..
<script type="text/javascript">
function getQueryValue(name) {
var match = (new RegExp('[?&;]' + name + '=([^&;#]*)')).exec(document.URL);
return match ? unescape(match[1]) : null;
}
var ext = "&ext="+getQueryValue('ext');
</script>
<script src="prototype.js"></script>
<script type="text/javascript">
function checkSubmit(e)
{
if(e && e.keyCode == 13) // if key is enter
{
doSubmit(); // call your submit function
}
}
</script>
</head>
<body>
<div id="dialNumber_form">
<form id="dialer" style="margin-bottom:0;">
<input id="numberBox" name="outnumber" onKeyUp="checkSubmit(event)" type="text">
<input id="submitButton" onsubmit="dosubmit()" type="button"/>
</form>
<div class="clear"></div>
</div>
<div id="success">
</div>
<script type="text/javascript">
function dosubmit( ) {
var par = $('dialer').serialize();
var url = par + ext;
new Ajax.Updater('success', 'dial.php', { method: 'post' , parameters: url , evalScripts: true } );
$('dialer').reset();
}
</script>
</body>
dial.php is taking the number you enter in the field, checking that it's valid, and sending it to our PBX to be dialed. This works, assuming you click the submit button. If you press return (even with the updated code, as recommended below), the page refreshes, and the contents of the outnumber box are posted as GET URL variable, rather than being sent to the dosubmit action. When the form works, you see it stay as it was originally built (dialout.htm?ext={extension number})
Thanks for all the responses. Let me try some of your suggestions, and I'll get back to you.
Not sure I'm clear in what I need to accomplish. This entire thing is being run in an iframe that is passed URL variables. I have no control over that piece, so I need to work with what I've got. When a user opens it, the URL would look something like .../dialout.htm?ext=1234. The extension is used, along with the number entered into the outnumber box, to place a call (system dials extension first, then outnumber). They should be passed to dial.php for processing, and if everything is good, a success response is sent back with the results (and the call is made). This works great if the dial button is clicked. The page does not refresh, and after a short delay, the success box pops up and a call is placed. If enter is pressed, the form refreshes, and the URL changes to .../dialout.htm?outnumber=<number>. I want enter to do what clicking the dial button does. Nothing i've tried here really works for that (unless I'm just really slow..). Any ideas?
You should make your submit button <input type="submit" id="submitButton" etc> then attach an onsubmit handler. jQuery:
$("#dialer").submit(function() {
var result = doMyStuff();
if (result > 10) {
return false; // prevent the submit
}
else {
return true; // allow the submit to happen
}
});
See the jQuery .submit() docs.
Returning false prevents the submit from occurring, true allows it. (I normally wouldn't put a "return false else return true" (return (result<=10);) but wanted to make the true/false sumbit control explicit)
When using AJAX to do the submit you'd want to return false so the normal submit is suppressed.
Update:
Returning false to stop default event processing is, these days, mostly deprecated. Using preventDefault() is generally preferred. This would change my example to be:
$("#dialer").submit(function(event) {
var result = doMyStuff();
if (result > 10) {
event.preventDefault(); // prevent the form submit
}
});
The keyDown / keyUp listener should be on the input not the submit button
<input id="numberBox" name="outnumber" onKeyUp="checkSubmit(event)" type="text">
function checkSubmit(e)
{
if(e && e.keyCode == 13) // if key is enter
{
doSubmit(); // call your submit function
}
}
Working example : http://jsfiddle.net/sVnMy/
This will listen to key presses on the input field and when the enter key is pressed it will submit the form
how can I check if the user filled some textboxes upon submit? My textboxes have different id and name.
If the user did not fill the required like password the form is not continued.
Thank you.
You can do this using JavaScript or within the script itself.
If using javascript, you simply check the form fields against your requirements before allowing the form to submit. However, you may still need to implement this in the script in case ofr some reason they have javascript turned off.
Basically, in the script, you check the values of the form when they submit:
if($_GET['field_name']) !== 'the value I expect') {
// show the form again with errors
}
// continue
Hope that helps.
Try the below. Naturally you can tweak the form and id's and such, but the basic principle should work. also shown here: http://jsfiddle.net/j3nSB/2/
<form>
<input type="text" id="username" value=""/>
<input type="password" id="password" value="" />
<input type="submit" id="submitButt" value="Go" />
</form>
document.getElementById("submitButt").onclick = function () {
if(document.getElementById("username").value.length == 0 |document.getElementById("password").value.length == 0) {
return false;
}
}
Assuming you have one form, here is the most simple/generic way I can think of, using plain JavaScript.
<script type="text/javascript">
var arrRequiredFields = [ "txtPassword", "txtEmail" ];
window.onload = function() {
document.forms[0].onsubmit = function() {
for (var i = 0; i < arrRequiredFields.length; i++) {
var field = document.forms[0].elements[arrRequiredFields[i]];
if (field && field.value.length == 0) {
alert("Missing required value");
field.focus();
return false;
}
}
return true;
};
};
</script>
Just put the names (not ID) of the required elements, put the code in your page and you're all set.
Live test case: http://jsfiddle.net/kf7pL/
use this:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Its very easy to use, and you can just add a class of 'required' to each required input field.
its as easy as $('#form').validate();
It also supports things like integer and date. Highly recommend it to anyone
I'm trying to implement a page with a choice of user's preferences in an HTML form where if the checkbox ALL is selected then all sub-checkbox base1, base2 and base3 are checked automatically, and if any of sub-checkboxes is un-selected then the checkbox ALL must be unchecked. I used a javascript function which works but when I submit the form only the last variable in the array of checkboxes is sent.
<SCRIPT LANGUAGE="JavaScript">
function checkChoice(field, i) {
if (i == 0) { // "All" checkbox selected.
if(field[0].checked==true) {
for (i = 1; i < field.length; i++)
field[i].checked = true;
}
}
else {
if (field[i].checked == false) {
field[0].checked = false;
}
}
}
<form name="form" method = "POST" action="preferences.php">
<input type=checkbox name=classes1 value="allbases" onclick="checkChoice(document.form.classes1, 0)">All bases
</td><td>
<input type=checkbox name=classes1 value="base1" onclick="checkChoice(document.form.classes1, 1)">Base1
<br>
<input type=checkbox name=classes1 value="base2" onclick="checkChoice(document.form.classes1, 2)">Base2
<br>
<input type=checkbox name=classes1 value="base3" onclick="checkChoice(document.form.classes1, 3)">Base3
<input type="submit" value="Set preferences" >
If I call the checkboxes'names in "classes1[]" all the values are submited but the javascript function doesn't work anymore. Is there a way of fixing this?
Thanks for any help.
For an alternative of checkChoice: check this SO question and the jsfiddle I presented there.
[edit] concerning your comment: a bit of extra thinking would have brought you to this solution
All of the values actually ARE submitted but PHP will overwrite $_POST['classes1'] each time until you are just left with the last value. If however you add '[]' to your input names then they are added to an array.
Since the latter causes a problem with javascript, can you not just either
a) iterate all of the form elements from the form.elements array,
or b) give each input a unique id and use document.getElementById() to find it?