Develop Reference

submit a form without using a submit button

I am trying to submit this for without using a submit button. Here I have used javascript and once the form has submitted user should be directed to the B.php.
html code
<form id="jsform" action="B.php" method="POST" target="_blank">
<input type="hidden" value="test" name="title"/>
</form>
java-script code
<script type="text/javascript">
document.getElementById('jsform').submit();
</script>
These 2 code lines run separately but not running together. Any mistakes have I done.

In javascript you can do this:
window.onload=function() {
document.getElementById("jsform").submit(); // using ID
}
And with jQuery
$(function() {
$("#jsform").submit(); // using ID
});

I write my comment as an actual answer this time.
Drop target="_blank" and it should work just fine. Otherwise your browser might see it as a popup.
Also make sure your JS is run after your form.

Use form name to submit
document.myform.submit();

Change textbox value and button name when the form is submitted

Im trying to create a very simple clock in/clock out system. Try to see the html code below.
<form>
<input type="text" value="work" name="work" />
<input type="submit" value="Clock In" name="submit" />
<?php 'some php code here' ?>
</form>
What I wanted to achieve is that whenever I click the submit button and form submits the data, the value of the textbox and the submit button would change. When you click it for the first time both would change to 'break/Clock Out', then when clicked again it would change to 'work/Clock In'. How is it possible? I believe it would require js but have no idea of the code yet. Tried searching anywhere but no luck. Hoping someone here would be able to help.
Thanks in advance.

I don't know if I've correctly understood.
You don't need to make a post submission with this form?
Just change values?
$("form").submit(function(e){
e.preventDefault();
if($("input[name='work']").val()=='work')
{
$("input[name='work']").val('break');
$("input[name='submit']").val('Clock out');
}
else
{
$("input[name='work']").val('work');
$("input[name='submit']").val('Clock in');
}
});
Jquery needed in this example obviously.

Not able to get serialized Array of Kendo UI Form

I have a simple form, where I have a form element with one input type and button.
When I am click button, I am trying to get form data using
var fData = $("#test").serializeArray();
However for some reason, I am not able to get any values of form.
What could be the reason for this?
JSFiddle Demo

There are several issues. Firstly, the input has no name attribute, so it cannot be serialized. Secondly, you create the variable called fData, but log fdata - JS is case sensitive. Finally the form is being submit in the usual method when the button is clicked which means processing will be prevented after the first alert. To prevent this you can change the button to be a standard type, instead of a submit button:
<form id="test" method="POST">
<p>
<input id="val" name="foo" />
</p>
<button class="k-button" id="rset" type="button">submit</button>
</form>
Example fiddle
Or alternatively you can set the code to run under the submit event of the form, and use preventDefault to stop the standard form submission:
$("#test").submit(function (e) {
e.preventDefault();
alert('ok');
var fData = $(this).serializeArray();
alert('rData ' + fData);
});
Example fiddle

Change the form fields to url

I need to change the form to a single link instead of post as below:
Instead of http://example.hu/search.php?product=shoes
I want the form to lead user only to http://example.hu/products/shoes
I have fixed the rewrite and everything. Only I need the help with the form in the homepage. Thanks for your help.

You need to change the form up a little. Instead of using the action parameter on <form> to send the user along, instead you'll need to drop the form tag and do some javascript trickery to make the url like you want. Here's an example that uses jquery, but it could also easily be done in vanilla JS. http://jsfiddle.net/7czFq/

The answer to my question was this:
Just go to this form action + name using javascript when submit is pressed, like this:
<form>
<div><input type="text" placeholder="Search for a something..." name="q">
<button type="submit" onclick="window.location.href = this.form.action + encodeURIComponent(document.getElementsByName('q')[0].value); return false; ">Search</button></div>
</form>
The form will send user to a URL like http://localhost.hu/search/q/

How to prevent form on submit behavior in jquery?

I need to get an .click() event and prevent form from behaving as it was initially designed and make my own changes and submit. How is it possible?
EDIT: Form input actually has an onclick defined behavior. I need to redefine it somehow.
EDIT: Some code
<form action='link' method='get'>
<input type="image" name="name" id="id" class="class" onclick="this.form.action='some_link'" title="Title" value="" src="image.gif">
</form>

If you don't want it to submit the form, return false at the end of your click function. If you want to submit the form, use the form element and call the submit function on it:
$('#myFormID').submit();

$('#form').submit(function(e) {
// Some code
});
I think it's enough.

You could use something like this (haven't tested it but it should work)
form = $("#yourform");
button = $("#yoursubmit");
button.click(function(){
dosomething();
form.submit();
return false;});