How to submit form without button? - javascript

I am new here. I want my code to submit form without submit button. My code run like this:
Every time when user input data in input text and press enter, the result will be display on the same page just below input text. This code will work perfectly is I use submit button to submit data. Can anyone help me with this ? Thanks in advance.
This is my result.html
$(document).ready(function(){
$("#code").change(function(){
var st = '';
$('#Myform input[type=text]').each(function(){
st = st+ '<td>'+$(this).val()+'</td>';
$(this).val('');
});
$('#result').append('<tr>'+st+'</tr>');
});
});
html
<form id="Myform">
<table>
<tr>
<td>
<p>Code:</p>
</td>
<td><input id="code" type="text" name="code" size="40" autofocus/></td>
</tr>
</table>
</form>
<table id="result"></table>
This is my code.php
<?php if( $_REQUEST["code"] ) {$code = $_REQUEST['code'];}?>

A cursory Google search would have brought up that jQuery provides a means of doing this.
You can trigger form submission via either the submit() or trigger() methods, i.e.
$('#Myform').submit()
or
$('#Myform').trigger('submit')
The former is merely a shortcut method to the latter.

how are you?
If you need to send to another php page, you can to send AJAX, if don't want to send, you can show data directly to your js, without ajax.
https://jsfiddle.net/5L9Leso8/
UPDATE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>teste</title>
</head>
<body>
<div>
<label for="test">
<input type="text" name="test" id="test">
<p id="rest"></p>
</label>
</div>
<script>
$('#test').on('change', function(e) {
e.preventDefault();
var self = $(this);
/** if you don't need to send to your php code
$('#rest').html(self.val());
**/
if (self.val().length > 0) {
$.ajax({
url: 'yourUrlphp',
type: 'post',
data: {
yourText: self.val()
},
success: function(data) {
$('#rest').html(data);
}
});
}
});
</script>
</body>
</html>

Related

Send button value by post request via jquery

My code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<button id="test" value="123" name="test" >ok</button>
</form>
<script>
$(document).ready(function () {
$("#test").click(function() {
var combinedData = $("#test").serialize();
$.post(
"element_submit.php",
combinedData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>
<div id="result" ></div>
The element_submit.php file
<?php
//just to test it should output in the #result div
echo $_POST['test'];
?>
What I am trying to do is submit the with the value="attribute" so the data is serialized and send the post request, it's not like a submit when user insert a value and submit,What I need is to get the value attribute and submit to the php, this code is only for To simplify and illustrate what I am trying to do, because in this page I have the following buttons with ids #follow #unfollow so I need a way to get the button value to make the user follow and unfollow.
you need to serialize the form - not the elements within it .You can also have the triggering button outside the form which will prevent hte form from submitting on the button click.
<form id="testForm">
<input type="hidden" name="testInput" value="123"/>
</form>
<button name="test" id="testButton">submit</button>
...
<script>
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();...
$(document).ready(function () {
$("#testButton").click(function() {
var combinedData = $("#testForm").serialize();
console.log(combinedData);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="hidden" value="123" name="testinput"/>
</form>
<button id="testButton">Click</button>
Straight JS might help you out. Include a function that sends the id and get the value of that id. Then just send a regular post of the value without serialize... easier.
<script>
function fetchButtonValue(theId){
var p = document.getElementById(theId).value;
alert (p);
}
</script>
<button id="myFormBtn" value ="woo"
onclick="fetchButtonValue(this.id)">My Button</button>
this works...
You could also put a class on the button let's say class="followBTN" then on a click you could just snag the value by $(this).val() I'd use this method if I had more than one button per page.

javascript not working for URL re-direct

Can anyone help me with this script I'm trying to get working? I need a text box with a submit button, when a certain id is entered I need them to be re-directed to a certain site (below examples in the script are are yahoo, bing, etc).
This below is what I have so far, but the submit button doesn't show up and when the submit button is hit it doesn't seem to execute the script.
I just get a #? added to the url... I'm working in opencart so I think part of the problem might be with opencart.
<html>
<head>
<script>
document.getElementById("gobutton").addEventListener("click", function(event){
event.preventDefault()
var idmap={
REDDIT:"http://reddit.com",
YAHOO:"http://yahoo.com",
BING:"http://bing.com"
};
id=document.getElementById("siteid").value;
if (id in idmap) {
alert("going to "+idmap[id]);
window.location.href=idmap[id];
} else {
alert("invalid code ["+id+"]")
}
event.preventDefault()
});
</Script>
</Head>
<Body>
<form id="urllauncher" action='#'>
<label for="siteid">Site id</label>
<input type="text" id="siteid">
<button type="submit" id="gobutton">Go</button>
</form>
</Body>
</Html>
Thanks for any help on this!
You should add your script at the end of the body.
You are calling document.getElementById("gobutton").addEventListener too early, at this point the button is not yet present in the page DOM, so no event is attached to it.
Working code :
<html>
<body>
<form id="urllauncher" action='#'>
<label for="siteid">Site id</label>
<input type="text" id="siteid">
<button type="submit" id="gobutton">Go</button>
</form>
<script>
document.getElementById("gobutton").addEventListener("click", function(event){
event.preventDefault()
var idmap = {
REDDIT:"http://reddit.com",
YAHOO:"http://yahoo.com",
BING:"http://bing.com"
};
var id = document.getElementById("siteid").value;
if(id in idmap) {
alert("going to "+idmap[id]);
window.location.href=idmap[id];
} else {
alert("invalid code ["+id+"]")
}
});
</script>
</body>
</html>
PS : try to indent your code prior to posting it !
I think if you remove that form tag ,it will solve all your problems.
I think there's no need for it be of submit type and have a form at all
Just remove those and the event.preventDefault()

AJAX via jQuery updates the page

I have a PHP script, which connects to the DB, does a simple select and returns a single number back. The script works fine, I can test it by adding
action="search_ODtime.php" method="POST"
to my form. But the whole thing does not work. The whole page is getting refreshed and I am getting nothing back. I killed the whole day trying to figure out what is wrong here. Does anyone have any idea?
My html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#time_search').bind('submit', function() {
var origin = $('#origin').val();
var destination = $('#destination').val();
alert(origin);
$.ajax({
type: "POST",
url: "search_ODtime.php",
data: 'origin=' + origin + '&destination=' + destination,
success: function(data) {
$('#search_results').html(data);
}
});
});
});
</script>
</head>
<fieldset style="font-size:11pt; opacity: 1; color: white;">
<form id="time_search">
Orinig:
<input name="origin" id="origin" type="number" value="1" min="1" max="97">
<br>
Destination:
<input name="destination" id="destination" type="number" value="1" min="1" max="97">
<br>
<input type="submit" value="Get travel time" name="submit" id="submit" style="border-radius: 5px; display: block; margin: 10px auto 10px 0;">
</form>
Travel time:
<div id="search_results">
</div>
</fieldset>
</body>
</html>
What's happening is your form is getting submitted. You can either: a) remove the form entirely and change the submit button to a regular button, then bind your event to the button instead of the form, or b) prevent the form from submitting.
jQuery passes the event object to every event handler. The event object has a method called preventDefault() which prevents, well, the default action, whether it's submitting a form or linking to a page or whatever.
You need to pass the event into the function by adding a variable for it, and then call it's preventDefault() method to prevent the form from submitting and your page being refreshed.
$('#time_search').bind('submit',function(event) {
event.preventDefault();
var origin = $('#origin').val();
var destination = $('#destination').val();
alert (origin);
$.ajax({
type:"POST",
url:"search_ODtime.php",
data: 'origin='+origin+'&destination='+destination,
success: function(data){ $('#search_results').html(data); }
});
});
Some things to mention:
First:
When submitting a form via AJAX you need to prevent the browser from its default submitting behaviour and thus from refreshing the page.
('#time_search').bind('submit',function(e) {
e.preventDefault();
Second:
Try sending your data in the JSON format eg. {"origin": origin, "destination": destination}

jQuery ajax post data with javascript submit form

This is my code:
<html>
<body>
<?php
include('header.php');
?>
<div class="page_rank">
<form name="search" id="searchForm" method="post">
<span class="my_up_text">ENTER THE WEBSITE TO CHECK GOOGLE PAGE RANK:</span>
<br /><br />
<input type="text" name="my_site"/></form></div>
<div class="p_ity">
PAGE RANK</div>
<div id="my_pass"></div>
<script>
function sub_form()
{
document.forms["search"].submit();
}
$(function () {
$('form#searchForm').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'check-google-page-rank.php',
data: $('form').serialize(),
success: function (data) {
$('#my_pass').html(data);
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
The problem is the ajax post works perfect if I use a submit button in the form.It doesn't work if I use a sub_form() method to submit the form after on click event.My doubt is will the java script sub_form() method trigger the jquery ajax function or not?
Note:
The data returned by the post url is
echo "<img width=\"165\" height=\"55\" src=\"./images/page-rank/pr".$rank.".gif\" />"
document.forms[].property
This returns an array of all the forms in the current document.
Since it is a array, you should pass the index value as integer.
document.forms[0].submit();
this will submit the form, if you have this form as your first form in the html page from top.

Multi form submit in the page with ajaxform()

how to get the parent div id of current submit form with the ajaxform plugin
I am not having any problems with the success state
Thank you.
below is my code.
<script type="text/javascript" charset="utf-8">
$('.formsubmit').ajaxForm( {
beforeSubmit: function() {
// here want form parent div display loading..
var id = $(this).parent().id; // my problem here how to get current action form parent div id
$('div#'+id).html("Loading...");
},
url: '/post.php',
success: Response,
datatype: ($.browser.msie) ? "text" : "xml"
});
function Response(xml) {
// let say XML return is equal 1
var id = xml;
$('div#'+id).html("Success");
}
</script>
<html>
<body>
<div id="1">
<form class='formsubmit' action='/post.php' method='post'>
<input name='url' value='stackoverflow.com'>
</form>
</div>
<div id="2">
<form class='formsubmit' action='/post.php' method='post'>
<input name='url' value='jquery.com'>
</form>
</div>
<div id="3">
<form class='formsubmit' action='/post.php' method='post'>
<input name='url' value='google.com'>
</form>
</div>
</body>
</html>
From what I can see in the docs, beforeSubmit method is invoked with three params:
the form data in array format
the jQuery object for the form
the Options Object passed into ajaxForm/ajaxSubmit
Given that if you change your before submit to
beforeSubmit: function(formData, formObj, options) {
var id = formObj.parent().attr('id');
$('div#'+id).html("Loading...");
}
This should work although I haven't tested it.

Categories