I want to take advantage of some jquery functions for sending messages like having a modal dialog but I also want to include users not running javascript.
If I have a jquery function to handle the dialog but the user doesn't have javascript enabled whats the best way to redirect them to my PHP page for composing and sending a message?
I'm assuming the jquery code takes highest priority since it's client side but then do I wrap my php code in tags?
Is there a more elegant solution?
I think what I would do here is take advantage of the onclick event of the button. You can use javascript or jquery to return false. If the browser has javascript turned off, the form will then be submitted.
<input type="button" onclick="return btnClick()" value="submit">
and then in your javascript something like
function btnClick(){
//do ajaxy stuff
return cancelEvent()
}
function cancelEvent()
{
if (window.event) window.event.cancelBubble = true;
return false;
}
What you want to do is make a normal HTML form:
<form action="submit.php" method="POST" id="sendMessage">
<input id="msg" name="message" type="text" />
<button type="submit">Submit</button>
</form>
And then use jQuery to override the submit feature:
$('#sendMessage').submit(function(e){
e.preventDefault(); // Stops the browser from submitting the form normally
// Do stuff...
});
So, if JavaScript is enabled, jQuery will handle form submission. It it's not enabled, the browser will POST the form normally.
Related
I'd like to put a small form on my PHP page with a single input and a submit.
The single input will be for a text date (Apr 4, 2021).
Upon submit, I'd like to just display the timestamp for that input next to the form.
I'm hoping this can be accomplished without having to leave the page as usually I need the timestamp in another form I'm working with at the same time.
I've looked at jquery and ajax, but it's a bit outside my expertise. Can someone point me in the right direction?
What I'm hoping to do:
<form id="show_date" method="post">
Payment Date: <input type="text" name="pay_date">
<input type="submit" value="Calculate">
</form>
<div id="result"></div>
Consider the following jQuery Example.
$(function() {
$("#show_data").submit(function(e) {
e.preventDefault();
$.post("./calcPayDate.php", {
pay_date: $("input[name='pay_date']", this).val()
}, function(results) {
$("#result").html(results);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="show_date" method="post">
Payment Date: <input type="text" name="pay_date">
<input type="submit" value="Calculate">
</form>
<div id="result"></div>
jQuery is a Framework for JavaScript. You need JavaScript to be able to perform something in the "background". That something is referred to AJAX. The idea that your browser can send a bit of data to the server and the server can respond without loading an entire web page.
In HTML the default behavior of the Form will send the data, via GET or POST, to another page (usually a server side script).
With JavaScript, or in this case jQuery, we can collect the Value from the form and send just that to your Script. You will then need to handle the data that is returned by the script.
e.preventDefault is an Event command that prevent s the default event of the Form.
$.post() is a shorthand form of the AJAX POST method in jQuery.
$("input[name='pay_date']", this).val() gets the value from a specific input.
function(results) is a anonymous callback function that takes the data sent back and assigns it to results variable.
$("#result").html(results); puts the data into your container.
That's a super crash course for it.
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
So I have this simple form:
<form action="includes/process.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
<button onclick="dofunction(); return false;">Do it!</button>
<input type="file" id="upload_file" name="filename" style="float:left;width:70%;" size="42"/>
</form>
So what happens really when the button is clicked ?
Is it that the php file is called ? does it not ? the javascript is called before ?
Anyone can shed some light on this ?
Thanks !
Well, when you hit the button the following events occurs:
You send a REQUEST to the server
The php codes evaluates the request and runs some codes
Finally it returns back a RESPONSE which you see as a web page
Javascript is a client-side script which means that whenever you make an action on the page, the code runs. For instance, when you click the button, before sending the request javascript will work. You may, for instance, place a function that will be triggered when you hit the button which checks the form and either approves the form or shows the error messages
EDIT
As far as your comment is concerned:
Yes, javascript runs first when you hit the submit button. Php runs only when you submit the form and make a request to the server.
Consider this example: (I am better at explaining things with examples:)
<form action="somepage.php" onsubmit="return checkMe()" method="POST">
<input name="firstname" id="fn" value="" type="text" />
<input type="submit" value="Submit" />
<script type="text/javascript">
function checkMe(){
var tb = document.getElementById("fn")
if(tb.value == "Alex") return true;
else return false;
}
</script>
</form>
So basically, when you hit the button and try to submit the form, the javascript will first check whether the name provided in the textbox is Alex or not, if it is not then it will not submit the form. If it is Alex then it will submit the form and then the form will redirect the user to somepage.php. Finally, the php codes will work in somepage.php and the page will be rendered again.
What happens is that only doFunction() javascript function is invoked and nothing more.
However, it might be possible that this javascript function invokes "submit" event on the form and the request is sent (what you described as "php file is called").
Your code just trigger javascript event and your function. To submit a form you need an
<input type="submit" value="Submit" />
or a button, which default type is submit (thx davin)
<button value="Submit" />
However as far as you return false in your javascript code your form won't be submitted even with the submit button.
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.