I have just done the code for submit the form using JavaScript.
It works in all browsers except in Internet Explorer 6.
I have pasted my HTML form and JavaScript code below.
Can you please find what's the problem with it?
JavaScript:
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
}
</script>
HTML Code:
<form name="del_form" id="del_form" method="post">
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
Function Call Code:::
<p class="video">
<a href="javascript:void(0)" onclick="dodelete('<?php echo $row['image_id']?>')">
<img src="<?php echo $cfg->admin_image_path; ?>/delete_icon1.gif" border="0" alt="Delete"/>
</a>
</p>
What is returned by:
document.getElementById('image_id')
It returns one INPUT element of collection of elements?
Try to replace:
document.getElementById('image_id').value=image_id;
with:
document.del_form.image_id.value=image_id;
OnSubmit call for javascript would help.
<form name="del_form" id="del_form" onsubmit="dodelete(value);" >
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
There are two things I'd like to try, I'm not sure why or when this doesn't work it seems random, first try to set a timeout for the submit :
document.doSubmit = function() {
document.del_form.submit();
}
setTimeout("document.doSubmit();", 100);
Sometimes, just return something after the click works :
<input type="hidden" name="image_id" id="image_id" onclick="submitFormFunction(); return false;” />
What happens if you replace:
document.del_form.submit();
with:
document.getElementById('del_form').submit()
Try to move method='POST' to the beginning of form element definition.
I mean -- method attribute should be the first attribute of form element.
If I remember well, this fixed some problems with submitting forms on IE6.
I have edited your code a little bit.
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
return false;
}
</script>
and the HTML with some test Image ID and it works in IE6
<form name="del_form" id="del_form" method="post" onSubmit="return(dodelete('2'));">
<input name="do" id="do" value="delete" />
<input name="image_id" id="image_id" />
<input type="submit" value="Submit">
</form>
Let's try again :).
What happen after replacing:
onclick="dodelete('<?php echo $row['image_id']?>')">
with:
onclick="dodelete('<?php echo $row['image_id']?>'); return false;">
What exactly doesn't work with your code? Throw JS error, there is no server request, values in request are empty?
And (maybe the most important question) -- where is action attribute for your del_form form?
replace
<a href="javascript:void(0)"
with
<a href="#"
IE have problem with that for the dom that fires the JS submit.
Related
The javascript does not submit the form. On clicking the alert is
called, even checked with the object and it is not null. But the
.submit() method does not submit the form. Stuck here for a long time.
<script type="text/javascript">
$(document).ready(function(){
$("label img").click(function(){
alert("11");
$("#" + $(this).parents("label").attr("for")).click();
});
$("input").change(uploadForm);
});
</script>
<script type="text/javascript">
function uploadForm(){
alert("1");
document.getElementById('UploadFileFormId').submit();
}
</script>
<form id="UploadFileFormId" action="UploadFile" method="post"
enctype="multipart/form-data"
style="width: 40px">
<label for="UploadFileId">
<img src="images/button_up_lo.png"
onmouseover="this.src='images/button_up_hi.png'"
onmouseout="this.src='images/button_up_lo.png'" />
</label>
<span id="uploadSpanId" class="hidden">
<input type="file"
name="UploadFileName"
id="UploadFileId"/>
<button type= "submit" id="uploadButtonId" name= "uploadButton" ></button>
</span>
</form>
Try <input type="submit">
Use $('#uploadButtonId').submit(); since you are using jQuery.
Element ID is case sensitive (uploadButtonId vs UploadFileFormId)
The uploadForm function, which will submit the form, will execute only when the value of the control changes. Is that what you are expecting?
Note that, in this scenario, if you select a file, then select the same file again, no onchange event will fire.
I am creating a form such that when the user click the "submit" button, it prevents the default action, serializes a subset of the fields, and then proceeds to submit all of the information via the POST array (PHP).
I am encountering a problem where the form is basically not submitting when I use the .submit() method. When I disable my javascript, the form submits fine (just with the wrong information, as the array is not serialized). But as soon as I re-enable my js, clicking the submit button does nothing except show my test console.log(var) in console. Here is some of my code, hopefully you can see what I am doing wrong. All of the online documentation says to use .submit(), but it doesn't seem to work, no matter what I try.
HTML:
<form id="entryForm" action="add_entry.php" method="post">
<div class="leftDiv">
<input type="text" class="inputFormTitle" name="entryName" placeholder="Name your entry..." />
<span class="regText">
<b>Entry Properties</b>
Specify entry properties, permissions, etc.</span>
<table class="formTable">
<tr>
<th>Parameter</th>
<th>Value</th>
<tr>
<td>Group</td>
<td><select name="group"><option></option><option>Graham Test</option></select>
</tr>
<tr>
<td>Project</td>
<td><select name="project"><option></option><option>Project 1</option><option>Project 2</option></select>
</tr>
<tr>
<td>Protocol</td>
<td>
<select id="protocolloader" name="protocol">
<option></option>
<option>PCR & Gel</option>
<option>Item Storage</option>
<tr>
<td>Permissions</td>
<td><input type="radio" name="permission" value="0">Only I can access this entry</input>
<input type="radio" name="permission" value="1">Only group members can access this entry</input>
<input type="radio" name="permission" value="2">Everyone can access this entry</input>
</select>
</tr>
</table>
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" /
<br/>
</div>
<div class="rightDiv">
<input type="text" class="inputFormTitle" id="ppt" placeholder="Please select a protocol" disabled/>
<div class="formHolder" id="protocolForm">
</div>
</div>
<input type="hidden" id="serialInput" name="protocolValues" value="nuttin" />
</form>
And the accompanying javascript:
var entrySubmit = $('#submitEntry');
entrySubmit.on('click', initEntrySubmission);
function initEntrySubmission(e) {
e.preventDefault();
var serializedProtocol = $("#protocolForm :input").serialize();
console.log(serializedProtocol);
$('#serialInput').val(serializedProtocol);
$('#entryForm').submit();
}
PHP Form (which I don't think is the issue but figured I would include it anyways)
<?php // add_entry.php
session_start();
include_once 'creds.php';
$con=mysqli_connect("$db_hostname","$db_username","$db_password","$db_database");
if (isset($_POST['group'])){
$lab = $_SESSION['labname'];
$author = $_SESSION['username'];
$name = $_POST['entryName'];
$group = $_POST['group'];
$protocol = $_POST['protocol'];
$permission = $_POST['permission'];
$array = $_POST['serialInput'];
$filearray = $_POST['fileArray'];
$project = $_POST['project'];
$query = "INSERT INTO data (protocol, name, lab, author, uniquearray, filearray, group, project, permissionflag)
VALUES ('$protocol', '$name', '$lab', '$author', '$array', '$filearray', '$group', 'project', '$permission')";
mysqli_query($con, $query);
mysqli_close($con);
}
?>
I wouldn't normally include so much HTML but I thought maybe I messed something up in there that may be the issue, and I just don't realize it. I tried to take out most of the break and header tags to clean up the code a bit.
Thanks for any help!
Regards.
The documentation of .submit() states, that
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.
You have an input that has the name submit.
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" />
I tried it with and without that name. It works without!
I found the following to work:
<script>
function initEntrySubmission() {
var serializedProtocol = $("#protocolForm :input").serialize();
alert(serializedProtocol);
$('#serialInput').val(serializedProtocol);
return true;
}
</script>
<form id="entryForm" action="" method="post" onSubmit="return initEntrySubmission();">
...
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" value="Submit Entry"/>
</form>
The main things to do are to add an onSubmit to your form tag. The function must return either true or false. Return true will submit the form.
Also, you do need to clean up your HTML, there are select statements in there, without closing tags and your submit button
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" /
has no ending >, it also has 2 type attributes type="button" and type="submit"(its both a button and a submit?) and has a name=submit, which is also unnecessary .
You don't have to preventDefault(), the Code will still be run before the Form is submitted.
function initEntrySubmission() {
var serializedProtocol = $("#protocolForm :input").serialize();
console.log(serializedProtocol);
$('#serialInput').val(serializedProtocol);
}
You can try something like below
In HTML just add
<form id="entryForm" action="add_entry.php" method="post" onsubmit="return false;">
And in JS function
function initEntrySubmission(e) {
var serializedProtocol = $("#protocolForm :input").serialize();
$('#serialInput').val(serializedProtocol);
$('#entryForm').removeAttr('onsubmit');
$('#entryForm').submit();
}
Just change:
$('#entryForm').submit();
To:
$('#entryForm')[0].submit();
Also rename your submit element as #Matmarbon has so eloquently explained.
Explanation:
$('#entryForm').submit(); simply triggers the submit event and takes you back to square one.
$('#entryForm')[0].submit(); submits the form ... more like the default action, without triggering the submit event.
I am trying to set-up a form that has 2 buttons, accept and deny. It doesn't seem to be working. Any thoughts on what I should fix?
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" action="formapprovedeny" class="iform">
Form content here.
<input type="button" onclick="submitForm('html_form_approve.php')" class="submit_button" value="Approved" name="Approved" />
<input type="button" class="submit_button" onclick="submitForm('html_form_deny.php')" value="Denied" name="Denied" />
</form>
Here is the script part.
<script>
function submitForm(action)
{
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
Your Javscript is trying to submit a form with an id of formapprovedeny but your form does not have an id. Try adding id="formapprovedeny" to your form
It should id="formapprovedeny" not action="formapprovedeny"
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" id="formapprovedeny" class="iform">
You have a problem with your naming.
You try to get the form by it's id, but it is not set. It's name is.
You should use either getElementByName or give your form an id.
The type of button must be 'submit' and the value whatever you want, look this:
<input type="submit" class="submit_button" value="Approved" name="Approved" />
<input type="submit" class="submit_button" value="Denied" name="Denied" />
What do you want to achieve using the 2 buttons? What do you expect?
http://jsfiddle.net/xaW5P/
<script>
function submitForm(action)
{
alert('hello submitForm '+action);
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
if I use your code (added an alert) this seems to work...whatever it should be doing ;)
I have the following code in my HTML file (this is oversimplfied to save space and time):
<form role="form" name="popupForm" id="popupForm">
<input type="hidden" name="season1" id="season1" value="fall" />
<input type="hidden" name="season2" id="season2" value="fall" />
<input type="hidden" name="season3" id="season3" value="fall" />
<input type="hidden" name="ITEMCOUNT" id="ITEMCOUNT" value="3" />
</form>
<button type="button" class="btn btn-primary" id="orderSave">Save Changes</button>
I then have a JQuery routine that IS getting called:
$("#orderSave").click(function () {
$.post("ProductPopupLightboxSave.aspx", $('form#popupForm').serialize(), function (data) {
$("#productModal").modal("hide");
});
});
In the file ProductPopupLightboxSave.aspx I have the following code:
If IsNumeric(Request("ITEMCOUNT")) Then intItemCount = CInt(Request("ITEMCOUNT"))
The value in intItemCount is used in a For...Next loop to interate through the and grab the individual elements "season1", "season2", and "season3" (obviously the numbers vary depending upon the product) and saves the info to the database. The problem is that Request("ITEMCOUNT") is nothing when it gets here. In fact, it doesn't seem to serialize my form data at all.
UPDATE: I have used the name element and that didn't fix anything. What I have noticed is that this is a .NET application and it has a RADSCRIPTMANAGER tag in the master page. It has an open form tag but not a closing one (it was done by another developer so I don't know the reason for that). It appears that this is getting in the way because I just changed the FORM tag to be a DIV tag with the exact same ID and with that change only the form data serializes.
What am I doing wrong? I have even done an alert on the value of the #ITEMCOUNT and it is always correct. Thanks for your help!
I've tested in my computer using your form and it worked, however I had a strange behavior in IE 10. So I changed my code and it worked, find it below, using .ajax not .post
<form role="form" id="popupForm">
<input type="hidden" id="season1" name="season1" value="fall" />
<input type="hidden" id="season2" name="season2" value="fall" />
<input type="hidden" id="season3" name="season3" value="fall" />
<input type="hidden" id="ITEMCOUNT" name="ITEMCOUNT" value="3" />
</form>
Changed the button just in case, it worked with the other button too.
<button type="button" class="btn btn-primary" id="Button1"> More Save</button>
And set an .ajax post
$("#Button1").click(function() {
$.ajax({
url: 'Default.aspx',
type: 'POST',
data: $('form#popupForm').serialize(),
success: function(data) {
alert('success');
},
error: function() {
alert("error");
}
});
});
For testing purposes I've added alerts on success and error, I'm posting to a default.aspx webpage and I get results properly.
I hope it helps.
I'm trying to use javascript (used within another program) to automate the submission of a form with the appropriate textboxes filled in. Using the simple page below, I can successfully fill out the text box using:
javascript:document.getElementsByName('UserIDValue')[0].value = "12345";
but can't seem to get anything to work that will actually submit the form. None of these attempts at solving it work: (By 'work' I mean have the same effect as if I clicked the Log In button.)
document.forms["MFALogInForm"].submit();
document.getElementsByName("LoginButton")[0].submit();
document.getElementById("MFALogInForm").submit();
document.forms[0].submit();
the code for the page I'm working with is below: The link to it is here: https://ppcplus.121fcu.org/Mobile/Features/Auth/MFA/MFALogin.aspx
<html><body>
<form id="MFALogInForm" name="MFALogInForm" method="post" action="MFALogin.aspx?__ufps=981699">
<input type="hidden" name="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" value="">
<script language=javascript><!--
function __doPostBack(target, argument){
var theform = document.MFALogInForm
theform.__EVENTTARGET.value = target
theform.__EVENTARGUMENT.value = argument
theform.submit()
}
// -->
</script>
<img id="RoofImage" src="/Mobile/Images/Current_HandheldDevice/Universal/1Pixel.gif" alt="Private PC" /><br />
<img id="LogoHeader_LogoImage" src="/Mobile/Images/Current_HandheldDevice/Universal/Logo.gif" /><br />
<font size="+1" color="#006D9B"><b>LOGIN</b></font><br>
<font size="-1"><b>USER ID</b></font><br>
<input name="UserIDValue"/><br>
<input name="LoginButton" type="submit" value="Log In"/><input name="ResetButton" type="submit" value="Reset"/><br>
</form></body></html>
document.forms[0].elements["LoginButton"].click();
worked for me.