I am using an image instead of a submit button for search option and use onclick events to load the results using ajax in php.Now I need to load results by hit enter also.Is their any ways to update my application without changing the image.
Thanks
Sure, add <input type="submit" style="display:none;" /> to the end of your form, should trick the browsers into allowing the Enter key to submit your form.
As far as getting the same functionality as your AJAX onclick event: You should be tying your ajax function to the <form>'s submit event instead of the <input>'s click event.
jsfiddle demonstration (uses jQuery for ajax ease, but your event doesn't have to)
I don't know what javascript library you're using, but I'll use jQuery in my example.
<script>
$(document).ready(function() {
$("form#interesting").bind("submit",function() {
$.get("target_page.php".function() {
// Callback functionality goes here.
});
});
});
</script>
<form id="interesting">
Enter your input: <input type="text" name="interesting_input" />
<!-- input type="image" is a way of using an image as a submit button -->
<input type="image" src="submit_button_image.gif" />
</form>
Hmm, There are several things I can think about.
fitst one - someone mentioned that you can style submit button as an image. Good idea and it's easy. this tutorial was posted as an answer some time ago http://www.ampsoft.net/webdesign-l/image-button.html .
Another problem is, you bind your submit event to onclick, but the natural submit for form is onsubmit. So if you hit enter on form input the form receives onsubmit event. You have to bind your JS to it.
It works genrally as in answer from #phleet when you use jquery, when you don't use any library, you can do something like
<form onsubmit="YOUR_JS_HERE">.....</form>
like in onclick. I also recommend using jQuery, though.
Related
I have an input like this:
<input value="<?php echo $formdata['title'] ?>" type="text" name="title" id="Editbox2">
This is an edit page, I load database data into fields with echo, replace them, and hit submit to update them.
But when I hit submit it refreshes the old data onto browser's fields, how can I prevent this?
Submit your form using ajax request with jquery submit.
Use action="javascript:;" for the form tag
You need to handle the script with javascript, then prevent the default behaviour, which is refreshing the page. Here is an example:
*I haven't tested this, but from what I recall this is what I used to do. Let me know if it doesn't work, I'll give other suggestions.
<form>
<!-- elements inside -->
<input type="submit" id="submit-btn" value="Submit"/>
</form>
and in your javascript have the following:
<script>
$("#submit-btn").click(function(e){
e.preventDefault();
// handle form here with your JS
});
</script>
i am very beginner to php,html and web development.Now iam learning php.
And i have a doubt which is exactly same as how to check if input type button is pressed in php?
but i couldn't find any appropriate answers there.Please see the above link...
Actually form submission is done by using Java script, that's why he have something like this in button's onclick="send(this.form)" ...And this button type is not 'submit'but it is 'button' itself and i tried one of the answer that i found there
Using print_r($_POST) to print all Submitted values..But i couldn't find my button there..
My html code
<Form action="user_register.php" method="post">
<input type="text" id="txtEmail" name="textEmail"/>
<input type="button onclick=runjava() Name="Button"/>
</Form>
My Javascript
function runjava()
{
---
----Codes for validation and some animation
document.forms.item(0).submit();
}
please help me regarding this
Yes, you can use jQuery/javascript to do this.
Generally, you should assign either an ID or a class to your input element to easily identify exactly which control fired the event.
Suppose you have this input button:
<input type="button" id="mybutt" value="Click Me">
To alert when button is clicked:
$(document).ready(function() {
$('#mybutt').click(function() {
alert('it was pressed');
});
});
The $(document).ready(function() { bit makes sure that the page (DOM) has loaded all elements first, before it allows the code to bind events to them, etc. This is important.
NOTE THAT before you use jQuery commands, you must first ensure the jQuery library has been referenced/loaded on your page. Most times we do this in the <head> tags, like so:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
but it can be loaded any time before the jQuery code.
When i Pressed Enter/Return in Keyboard it submits the form without going through my javascript function in the Submit button of the Form.
I'm thinking of manipulating the keyboard command when pressed but i think that would take time.
so, is there any short way of doing so? like an event in the form/button?
Any Answer will help.
Thank you.
PS: sorry for bad explanation.
Assuming "your JavaScript function" is assigned to the submit button's click handler, it's obvious why it didn't work: you didn't click the submit button. The code to handle a form submission should go onto the form's submit handler. It will trigger from both submit buttons and Enter key.
One more critical piece of info: your handler has to return false, or call preventDefault on the event; if you don't, the form will still submit after your code exits.
Take a look at the documentation:
http://api.jquery.com/submit/
You can do something like this:
HTML
<form id="form" action="process.htm">
<input id="name" type="text" value="Joe" />
<input type="submit" value="Say hi" />
</form>
JavaScript
$('#form').submit(function() {
alert('Hi there, ' + $('#name').val());
// If you uncomment the below, it will submit
return false; // Prevent submit
});
The return false will prevent it from submitting after your JavaScript submit function finishes, if desired.
Live example:
http://jsfiddle.net/58hfn/
Hope this helps.
Assign a handler to the form onsubmit-
<form name="forma" onsubmit="validate()"
It could be that your javascript function contains some errors. To see if there are some javascript errors view the Chrome Console Ctrl+Shift+i
Given this simple javascript function:
function update_cart() {
alert("--update--");
document.form1.command.value="update";
document.form1.submit();
}
and this button at the bottom of my form:
<input type="submit" value="Update" onclick="update_cart()" />
The data in the form is 'submitted' to the new URL. but the update_cart function is never called. I know because I never get an alert box, and the URL reads...?c=Albania&m=....
Also, the form element
<input type="hidden" name="command"/>
does not get posted to the URL, either. URL reads ?command=&c=Albania...
I have tried the following: changed onclick to onsubmit, checking $_REQUEST variables, cutting and pasting the code from known working pages.
I'm at my wit's end, and would be grateful for any help!
Oh, yes: same behaviour in firefox 6, Opera 11.5, & IE7. I'm running WinXP SP3.
Thanking you,
Sadhu!
Once try
<input type="button" value="Update" onclick="update_cart()" />
instead
<input type="submit" value="Update" onclick="update_cart()" />
if you want that for 'submit' type then go with 'Allen Liu' answer
enter code hereif you wane to change sth when onsubmit, you need to do these changes before form's submitting. so you need to add these opeartion to the "onsubmit" event of the form, rather than the "onclick" event of the submit button.
like this:
<form name="toSubmit" onsubmit="update_cart();"><input type="submit" name="btn" value="hello"/></form>
If you want the script to run on submit of form, use:
<input type="submit" value="Update" onsubmit="update_cart()" />
The onsubmit event is usually used to run some validation script. If the validation returns true, the form will submit. If it returns false, the form does not submit. In your case, the script is coded to submit the form so no return boolean value is necessary.
Otherwise, I would not give your button the submit type if it really doesn't submit the form. You can simply use button tags with the onclick and that should work:
<button onclick="update_cart()">Update</button>
First of all there is no need to change your html; see my demo.
On every click on a submit button, first the click-handler (if exists) will be started, then the submit-handler (if exists) (which should be in the form tag) and then the action of the form will be executed. This procedure will be only stoped, if a handler returns false.
But why will your javascript function update_cart not be called?
I think it could not be found, but I don't why. Can you bind the function to the window dom element only for testing (like in my demo)?
P.s.: you don't need to submit the form in your click-handler (if you don't return false). You can remove the line: document.form1.submit();.
P.s.: it will be better not to use a click-handler on the submit-button, instead use a submit-handler in the form tag (see my demo2).
I am new to php.I want to perform form cascading.
i will be having form like registration form,where if i enter any data in text-fields it should be automatically displayed in another form before the submit button is clicked.
Please if anybody knows help me,
I am in need.
A little Javascript will do the trick. It will be easy if you use something like jQuery to help you out. Just bind each field in your form to the change event using the change() method, and then update the "cascaded" field to the value passed to the change() method.
For example, consider the HTML:
<form>
<input type="text" id="field1" />
<input type="submit" />
</form>
And supposed you want to update the following div dynamically as the above form is edited:
<div id="field1_val"></div>
Add the following script to the head of your HTML:
//This will just make sure you're using the awesomeness of jQuery...
<script src="http://code.jquery.com/jquery-latest.js"></script>
//This will bind your field to the change event using jQuery
<script type="text/javascript">
$("#field1").change( function() {
$("#field1_val").text($(this).val());
});
</script>
Hope that points you in the right direction.