I am trying to submit a form with jQuery and I must be missing something small, because I can't get this to work, and from everything I see it should work fine.
What's wrong with this?
<table class="newrecord"><form id="editthis" action="page.php" method="post">
<tr><td class="left">Name:</td><td><input type="text" name="name" id="name" /></td></tr>
<tr><td class="left">Company:</td><td><input type="text" name="company" /></td></tr>
<tr><td class="left">Cancel</td><td><input type="button" name="submit" class="subbut" id="subthis" value="Update" /></td></tr>
</form></table>
And the javascript:
$("#subthis").click(function() {
$('#editthis').submit(); // An alert box works, so I know this is triggering
});
As mentioned in the code, an alert box works if I click the submit button, but when I use the jQuery submit function, nothing happens. What am I missing???
You don't need to use jQuery to submit a form. It's default behavior for a submit button to submit the form it belongs to.
Also, don't use a table for layout. The form elements themselves can layout just fine.
<form id="edit_this" action="page.php" method="POST">
<label>Name <input type="text" name="name"></label>
<label>Company <input type="text" name="company"></label>
Cancel
<button type="submit">Update</button>
</form>
Can be easily layout'd and will submit on its own.
If you need something to happen before the submission with jQuery, bind it to the form's onsubmit handler, rather than the actual click of the button.
The actual problem is the collision between the name you've given to the button and the reserved word in JavaScript. Don't use submit as the name.
I see two possible problems.
1) You have form tags inside table tags. While this probably isn't the root cause of your problem, it's not valid HTML.
2) You've used "submit" as the name of your submit button. This should be avoided because your object will collide with JavaScript reserved words. Use something other than "submit" like you've done with the id attribute.
Related
I have a form that is using get as its method. The structure looks something like this:
<form class="form-download" method="get" id="download" action="dest.php">
<h1 class="form-download-heading">Process</h1>
<input type="text" name="destid" id="destid" size="40" placeholder="Input" />
<input class="btn btn-primary" type="submit" name="type" id="type" value="Download" />
</form>
The problem is that I want the contents of the field destid to be processed when I click the submit button but BEFORE anything else, i.e. before it gets into the URL bar.
I have seen many examples that simply do not do that while using the GET method, so I would like to know how can I fix this problem.
You can include an onsubmit event in the form, like this:
<form class="form-download" method="get" id="download" onsubmit="myFunction()" action="dest.php">
The onsubmit event will fire before the action.
That way, when you click the submit button, you can process the contents of the field destid before anything else.
For my php file, I need to grab the unique form name.
The php file is executed when a user clicks the submit button. However, there are multiple submit button each with the same id, but they all have unique names. I need the name when they click on the submit button.
you dont want elements in html with the same id - bad practice in general. Your page will likely load normally but an html validator will notice it as an error.
html validator: http://validator.w3.org/
without seeing your code, its difficult to give you a definitive answer. if you have miltuple forms you can use hidden inputs. e.g.
<input type="hidden" name="form_name" />
Otherwise you can use javascript to put data in the form when the button is clicked. example javascript using jquery
html:
<form id="formid" >
<button type="button" id="someid" onclick="submitForm('btn1')" />
<button type="button" id="someid" onclick="submitForm('btn2')" />
<input type="hidden" id="btnsubmitid" value="" />
</form>
js:
function submitForm(btnID){
$("#btnsubmitid").val(btnID);
$("#formid").submit();
}
1 way is to put a hidden input inside of your form.
<input type="hidden" name="formName" value="[name of form]" />
then in your php, you can get it using
$form-name = $_POST['formName'];
pretty sure there are other ways, but this came to mind first.
I'm a noobie programmer and I wonder how to properly submit a form with javascript.
I made some test code to show you what I mean:
<?php
if (isset($_POST['message']))
{
echo $_POST['message'];
}
?>
<script>
function formsubmit()
{
document.getElementById('form').submit();
}
</script>
<form id="form" name="form" action="" method="post">
<input id="message" name="message" value="hello world">
<input id="submit" name="submit" type="submit">
</form>
Click me<br/>
<input type="submit" onClick="formsubmit()" value="Click me">
When you push the "submit" button inside the tags - the php code will echo "hello world".
When submitting the form with JS the values won't post to the page. What am I doing wrong?
Thanks in advance.
I've searched the whole afternoon for a solution, but cause of my lack of knowledge about programming I failed to find it.
Believe it or not, but the main problem lies here:
<input id="submit" name="submit" type="submit">
If a form contains an input element with name (or id) of submit it will mask the .submit() method of the form element, because .submit will point to the button instead of the method. Just change it to this:
<input name="go" type="submit">
See also: Notes for form.submit()
The smaller problem is here:
Click me<br/>
An empty anchor will just request the same page again before calling formsubmit(). Just add href="#".
The problem here is that the id and name of the input element on your form is called submit.
This will mask the submit function for the form. Change the name and id and you will be able to use javascript to submit the form.
try setting the href of the to '#'. I would guess what is happening is that by clicking on the link, it submits the form and immediately changes the url to the same page you are on cancelling the form submit before it has a chance to go.
I try to create an upload progress bar with PHP and jQuery. However, I have a problem when I bring it to the form data. The code is similar like this:
<form method="post" action="upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">
Suburb:<input type="text" name="txtSuburb" id="txtSuburb">
Picture:
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="button" name="submit" value="Upload!">
<iframe id="upload-frame" name="upload-frame">
</iframe>
<input type="submit" name="DataSubmit" value="Submit Data"/>
</form>
As you can see, I got 2 submit buttons. If I keep the form like this then the form can't submit data to server. It just submits the file to iFrame. If I change the action and target of the form then the upload progress function will not work.
Could anyone please help me to find the solution for this?
I want the user can click on upload button to upload their file. Then they can take the rest to fill the form. When everything is done, they can click on another submit data button to submit their data (included the file) to the server.
Make sure that you have only one input element of type submit within your form.
If you want the first button to trigger some Javascript, use a regular input element or even a styled link and attach a Javascript event to it's onclick event, then prevent it's default behavior, e.g. by returning false.
Like this only the second button will actually submit your form which should do what you're describing.
In general I'd second #Treffynnon's suggestion to use a existing library for this purpose. These hacks have a tendency to get pretty nasty, especially when it comes to crossbrowser compatibility.
Currently, I am using an with ajax to update my mysql. Now, I have to click on the button with the mouse for it to work (I am using onclick), but how can I make it accept the "enter" button? My guess is... Enter isn't working because isn't there. If I leave it there, my ajax just doesn't move.
Use a <input type="submit> instead of a <button> or type="button" and then hook into the forms' onsubmit event.
For example:
<form action="#" onsubmit="alert('Hello world!'); return false">
<input type="text" name="myText" id="myText" />
<input type="submit" value="Submit" />
</form>
The return false ensures that the browser doesn't actually submit a form.
If you're in an HTML form, then enter will submit the data. You only have to write in the onsubmit event handler to do your ajax calls.
If you're not in an HTML form, check for the key press event handler. Maybe it's what you're looking for.