This question already has answers here:
Submit A Form Using Javascript
(2 answers)
Closed 10 years ago.
I am new to JavaScript & php.
How can one submit a form without using submit button?
if possible without using anchor tag.
Please guide me how to achieve this task.
just use following code
<form id="jsform" action="whatever you want">
// input fields
</form>
<script type="text/javascript">
document.getElementById('jsform').submit();
</script>
you can submit it with the use of javascript submit() function
<script type="text/javascript">
function submitform()
{
document.forms["myform"].submit();
alert("Value is sumitted");
}
</script>
<form id="myform" action="submit.php" method="post">
Search: <input type="text" name="query">
Submit
</form>
I think you can make your submit button's visibility 'hidden' and use the following javascript.
<script type="text/javascript">
// Using jQuery.
$(function() {
$('form').each(function() {
$('input').keypress(function(e) {
// Enter pressed?
if(e.which == 10 || e.which == 13) {
this.form.submit();
}
});
$('input[type=submit]').hide();
});
});
</script>
<form name="formName" method="post">
<input name="someName" type="text" /><br />
<input name="somePass" type="password" />
<input type="submit" style="visibility: hidden;" />
</form>
In javascript it must use the form submit() method implemented in a custom button or anchor.
In PHP you can use the curl library (client URL library).
Related
I want to send this query (EA452401760IN) to https://track.aftership.com/india-post/.
After a successful submission by Form the URL will be
https://track.aftership.com/india-post/EA452401760IN
Form
<form method="POST" action="https://track.aftership.com/india-post/" target="_blank"> <input type="text" value="EA452401760IN"></input><button type="submit"> submitc</button></form>
Do I need a PHP file for this?
If yes, how do I write a php file for this problem.
Pure Javascript approach with Jquery
<input type="text" id="trackingNumber" value="EA452401760IN"></input>
<button onclick="go()">Track</button>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$( "button" ).on( "click", function( event ) {
window.location.href = "https://track.aftership.com/india-post/" + $('#trackingNumber').val();
});
</script>
JSBIN: https://jsbin.com/fuqovocoza/edit?html,console,output
<?php if(($_SERVER["REQUEST_METHOD"] == "POST")){
//Check that the form has been posted if it has been then redirect to the correct page
header ('Location: https://track.aftership.com/india-post/' . $_POST['query']);
}
else
{
if the form has not been submitted display the form
<form method="POST" action="https://track.aftership.com/india-post/" target="_blank"> <input type="text" name="query" value="EA452401760IN"></input><button type="submit"> submitc</button></form>
Note that I have changed the name of the input field to query.
<form method="POST">
<div id="showme">Show me <?php echo $_POST['name']?></div>
Send the value<input type="radio" name="name" value="ja"/>
<input type="submit" id="submit" name="submit" value="BEREKENEN! ">
</form>
<script>
$(document).ready(function () {
$('#showme').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#showme').fadeIn(5000);
});
});
</script>
This code won't send the value of the radiobutton to the showme div.
I can't receive the $_POST['name'] when I use hide() and fadeIn() between the <script> tags.
Whenever I don't use jQuery it sends the data - when using it , it won't let me send the value.
How do I fix this problem, this is just an example of 1 radio button. I have a list of 6 radiobuttons that need to be sent to PHP section in the same file, I don't want to make another file for this.
This code will FadeIn the requested div, it shows me Show me but it won't show the value where I ask for with the line <?php echo $_POST['name']?>
PHP is parsed on the server. <?php echo $_POST['name']?> has already been evaluated and echod to the page long before any of the submission stuff happens. What you need is to use AJAX.
You can replace the submit button with just a regular button, remove the <form> element entirely even.
jQuery:
$('#submit').on('click', function(evt) {
var e = evt || window.event;
e.preventDefault();
$.post('page.php', { name: $('input[name="name"]').val() }, function ( data ) {
$('#showme').append(data).fadeIn(5000);
});
return false;
});
(if you do what I did below turning submit into button, you dont need the e.preventDefault())
PHP:
if(isset($_POST['name'])) {
echo $_POST['name'];
return;
}
HTML:
<div id="showme">Show me </div>
<label for="name">Send the value</label><input type="radio" name="name" value="ja"/>
<input type="button" id="submit" name="submit" value="BEREKENEN!">
I'm not so sure you can get a non-BOOLEAN value from a radio button with PHP though. You're probably better off using <input type="hidden" value="ja" /> or maybe type="text".
I am using JQuery and SimpleModal Confirm Modal Dialog to show a confirm box before uploading. The form is submitting fine but as i'm checking isset submit button in PHP therefore it fails. How could i submit post using JQuery with setting submit button.
Here is the code
HTML
<form enctype="multipart/form-data" action="#duc" method="post" id="uploadform" >
<input name="file" type="file" >
<input name="Submit_upload" type="submit" value="Upload" id="Upload" >
</form>
JQuery
jQuery(function ($) {
$('#Upload').click(function (e) {
e.preventDefault();
confirm("Continue to the Upload?", function () {
$('#uploadform').submit();
});
});
})
PHP
if(isset($_POST['Submit_upload']) && $_FILES['file']['name'])
{
// file uploading process.
}
I think as after confirm JQuery submitting the form so the actual submit button is not adding in the post array. any help will be much appreciated.
When you submit the form via .submit, type=submit input values are not sent at the same time. There are a ton of different ways to solve/handle this. One is to do:
<input name="Submit_upload" type="hidden" value="true">
<input type="submit" value="Upload" id="Upload">
The hidden input will be sent.
I have tried your code and it is working fine man
i just use one page to use your code. on top i put your PHP code then jquery code in head after jquery.in and then html part and its working fine why it is not working in your machine might you clean cache or browser;
here is my code
<?php
if(isset($_POST['Submit_upload']) && $_FILES['file']['name'])
{
echo $_POST['Submit_upload'];die;
}
?>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
jQuery(function ($) {
$('#Upload').click(function (e) {
e.preventDefault();
confirm("Continue to the Upload?", function () {
$('#uploadform').submit();
});
});
})
</script>
</head>
<body>
<form enctype="multipart/form-data" action="#duc" method="post" id="uploadform" >
<input name="file" type="file" >
<input name="Submit_upload" type="submit" value="Upload" id="Upload" >
</form>
</body>
</html>
How can I change the code below so instead of a text input type with a submit button I want multiple submit buttons each with their own unique value? Everything I try just ends up with submit's value being undefined. Any help would be great!
Code source: Submit Search query & get Search result without refresh
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
You can add multiple submit buttons and attach to all of them onclick event listener. When button was clicked - get the value and send with a POST request.
<script>
$(function(){
$('input[type=submit]').click(function(){
$.post('db_query.php', {value:$(this).val()}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="">
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
</form>
If you want to use multiple submit buttons, you can catch the click event and determine which button was clicked. then run different Ajax submit. this also works when enter is hit.
//submit buttons
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str" />
<input type="submit" value="v1"/>
<input type="submit" value="v2"/>
//...more submit buttons
</form>
//submit func
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val){
case 'v1':...;
case 'v2':...
}
});
});
Here is my version - which now looks very much like Bingjies because it was written while I was testing out his version
DEMO
<form id="lets_search" action="" >
Search:<input type="text" name="q" id="q">
<input type="submit" value="Google" name="send" id="google">
<input type="submit" value="Bing" name="send" id="bing">
</form>
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val()) {
case "Bing" :
$("#lets_search").attr("action","http://www.bing.com/search");
break;
case "Google":
$("#lets_search").attr("action","https://www.google.com/search");
break;
}
});
});
Here, I would prefer to Vamsi's solution n Why not Sanjeev mk?
Give some extra thought on prefering the solution.
case: If there are mulitple submit buttons
If the user is in the text field and hits enter, the system will assume the first submit button was hit.
So, here, it would be good to go for not having mulitple submit
buttons for end user point of view
You can have multiple submit buttons in the form, no problem. They may have the same name, type etc, but just assign them different values. Like Submit Button 1 can have value="hi" and Button 2 can have value="bye".
Then when the action function is called for the button, all you have to do when entering the function is do a check with: $(this).val
HTML:
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
jQuery:
$(function() {
$("#lets_search").bind('submit',function() {
var value = $(this).val();
if(value == "hi")
do_something;
else
do_something_else;
});
});
I have this code :
<script type="text/javascript">
$(document).ready(function() {
$('a[name=linkArtist]').click(function(e) {
e.preventDefault();
$('#changeArtist').val($(this).attr('title'));
});
});
</script>
<form action="index.php?explore=browse" method="post">
<input type="hidden" id="changeArtist" name="artist" value="<?=$artist?>" />
<a name="linkArtist" title="a" href="#">A</a> -
<a name="linkArtist" title="b" href="#">B</a> -
<a name="linkArtist" title="c" href="#">C</a>
</form>
When I click on the button, I set the link value (as 'title') to the hidden field, and after I'd like to send that form! How can I do it? And what do you think about this code? Can I better it?
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('a[name=linkArtist]').click(function(e) {
e.preventDefault();
$('#changeArtist').val($(this).attr('title'));
$('#myForm').submit();
});
});
</script>
The form:
<form action="index.php?explore=browse" method="post" id="myForm">
Note the form id and the change to the click handler to access it.
I don't think you need to use preventDefault() at all. The form should not submit until the function has returned.