I need help with submiting data form #send_form to #f_from in another page.
<script type="text/javascript">
function post_form() {
$('#send_form').action = "form01.html";
$('#send_form').submit();
return false;
}
</script>
<form id='send_form' action='form01.html' method='POST' onsubmit="post_form();">
<input type="text" name="f_in01" value="User" />
<input type="text" name="f_in02" value="12345" />
<input type="submit" />
</form>
The form01.html
<script type="text/javascript">
function f_res()
{
var res01=document.f_form.f_in01.value;
var res02=document.f_form.f_in02.value;
var result = res01 + " " + res02;
document.f_form.f_out01.value=result;
}
</script>
<form id="f_form" onSubmit="f_res();return false;">
<input type="text" name="f_in01" /><br>
<input type="text" name="f_in02" /><br>
<br>
<input type="submit" onClick="f_res();" value="Enter w/Sub" /><br>
<input type="text" name="f_out01" />
</form>
Now it doesn't work. The data doesn't post in page01.html
Have you tried
$('#send_form').attr('action', "form01.html");
instead of
$('#send_form').action = "form01.html";
check out this fiddle
Amin is right, but in jQuery, when an event handler returns false, it amounts to the same as e.preventDefault(); e.stopPropagation(). Essentially, you cancel the event. Try returning true, instead of false.
If you don't want the page to change, you'll have to look at AJAX to post the form data.
You want AJAX for this something like:
$('#button').click(function(){
$.ajax({
type:"POST", //php method
url:'process.php',//where to send data...
cache:'false',//IE FIX
data: data, //what will data contain (no SHIT Sherloc...)
//check is data sent successfuly to process.php
//success:function(response){
//alert(response)
//}
success: function(){ //on success do something...
$('.success').delay(2000).fadeIn(1000);
//alert('THX for your mail!');
} //end sucess
}).error(function(){ //if sucess FAILS!!
alert('An error occured!!');
$('.thx').hide();
});
});
Related
Javascript doesn't send any post data to php file
$(document).ready(function(){
function showComment(){
$.ajax({
type:"post",
url:"process.php",
data:"action=showcomment",
success:function(data){
$("#comment").html(data);
}
});
}
showComment();
$("#button").click(function(){
var name = $("#name").val();
var message = $("#message").val();
var dataString = "name="+name+"&message="+message+"&action=addcomment";
$.ajax({
type:"post",
url:"process.php",
data:dataString,
success:function(data){
showComment();
}
});
});
});
form:
<form action="" method="POST" enctype="multipart/form-data">
name : <input type="text" name="name" id="name"/>
</br>
message : <input type="text" name="message" id="message" />
</br>
<input type="submit" value="Post" name="submit" id="button">
<div id="info" />
<ul id="comment"></ul>
</form>
php
$action=$_POST["action"];
if($action=="addcomment"){
echo "Add comment WORKS!";
}
if($action=="showcomment"){
echo "default";
}
Tried to add such lines as if post addcomment than show some words, just for a test since sql request didn't but php doesn't show any response at all, like there was no post action at all.
ps. I'm really new ajax so if possible show me a solution to solve it.
You're using a submit button so it will be making the form submit and reload which will bypass your ajax, you can change your jQuery to listen for the form submit event instead like this:
$("form").on('submit', function(e){
// Stop form from submitting
e.preventDefault();
var name = $("#name").val();
var message = $("#message").val();
var dataString = "name="+name+"&message="+message+"&action=addcomment";
$.ajax({
type:"post",
url:"process.php",
data:dataString,
success:function(data){
showComment();
}
});
});
Or simply change the button from type="submit" to type="button" or replace it with a element.
You are using submit button as Dontfeedthecode mentioned. Your form does not have any action so it is self posting. I have added action and id to the html form and a hidden field to pass the action. Now javascript serialize the form and send it to the process.php.
$(function () {
$("#my-form").on("submit", function (e) {
$("#action").val("addcomment");
$.ajax(
{
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (data) {
showComment();
}
});
return false;
});
});
<form action="process.php" method="POST" id="my-form" enctype="multipart/form-data">
<input type="hidden" id="action" name="action" value="" />
name : <input type="text" name="name" id="name" />
</br>
message : <input type="text" name="message" id="message" />
</br>
<input type="submit" value="Post" name="submit" id="button">
<div id="info" />
<ul id="comment"></ul>
</form>
need some help on this one...
I'm working with a form and a script to show alert...
I'm using this code to achieve this and its working fine:
<input id="autocomplete" class="input_message" type="text" name="message" autocomplete="off" placeholder="...type your message" ><br/>
<input id="input_send" class="input_send" type="submit" name="send" value="SEND">
but if i put some form method, the alert on my script is not working..
<form enctype="multipart/form-data" method="post">
<input id="autocomplete" class="input_message" type="text" name="message" autocomplete="off" placeholder="...type your message" ><br/>
<input id="input_send" class="input_send" type="submit" name="send" value="SEND">
</form>
here is my script:
<div id="alertbox">
<script>
$(document).ready(function(){
$('#input_send').click(function(){
var post = $('#autocomplete').val();
if(post==""){
alert('Enter Message Please');
}else{
$('#loader').fadeIn(400).html('<img src="./loader.gif" align="absmiddle"> <span class="loading">sending</span>');
var datasend = "alert";
$.ajax({
type:'post',
url:'./includes/alerts.php',
data:datasend,
cache:false,
success:function(msg__){
$('#autocomplete').val('');
$('#loader').hide();
$('#alertbox').fadeIn('slow').prepend(msg__);
$('#alerts').delay(5000).fadeOut('slow');
}
});
}
})
});
</script>
</div>
thanks in advance..
the submit button post the form to the server, and the page is reloaded;
you can add return false;,
after the ajax function, then is not sends to the server
need to prevent form submit
$(document).ready(function(){
$('#input_send').click(function(e){
e.preventDefault();//here
var post = $('#autocomplete').val();
if(post==""){
alert('Enter Message Please');
}else{
$('#loader').fadeIn(400).html('<img src="./loader.gif" align="absmiddle"> <span class="loading">sending</span>');
var datasend = "alert";
$.ajax({
type:'post',
url:'./includes/alerts.php',
data:datasend,
cache:false,
success:function(msg__){
$('#autocomplete').val('');
$('#loader').hide();
$('#alertbox').fadeIn('slow').prepend(msg__);
$('#alerts').delay(5000).fadeOut('slow');
}
});
}
})
});
Or change the type of the #input_sendfrom submit to button so that the form submission will not be triggered
<input id="input_send" class="input_send" type="button" name="send" value="SEND">
i have form with one input and one submit button.
<form method='POST' action='' enctype='multipart/form-data' id="form_search">
<input type='hidden' name="action" id="form_1" value='1' />
</span><input id="query" type="text" name="mol" value="">
<input type='submit' value='Search' name="Search" id="Search" />
on form submission form input data goes to php below code
if (isset($_POST['Search'])) {
$_SESSION["query"] = $_POST["mol"];
$_SESSION["action"] = $_POST["action"];
}
i want to avoid page refresh on form submission. i tried e.preventDefault() and return false;
methods in my java script but not working(this methods helping me from page refresh but does not allowing me to send data to php code)
please help me out of this problem, please suggest working ajax code for this problem.
Page refresh will delete you previous data so to reserve it you can use $.post() or $.ajax()
You can prevent page refreshing by adding one of these two things in event handler function
for pure js
return false;
for jquery you can use
e.preventDefault(); // e is passed to handler
Your complete code will be something like
using $.post() in js
function checkfunction(obj){
$.post("your_url.php",$(obj).serialize(),function(data){
alert("success");
});
return false;
}
html
<input type='submit' onclick="return checkfunction(this)" />
or same effect with onsubmit
<form onsubmit="return checkfunction(this)" method="post">
Without ajax you can simply add the checked attribute in PHP. So for example if your radio group has the name radio and one has value a, the other b:
<?php
$a_checked = $_POST['radio'] === 'a';
$b_checked = $_POST['radio'] === 'b';
?>
<input type="radio" name="radio" value="a"<?=($a_checked ? ' checked' : '')?>></input>
<input type="radio" name="radio" value="b"<?=($b_checked ? ' checked' : '')?>></input>
So when a user submits the form and you display it again, it will be like the user submitted it even the page refreshes.
<input type="radio" name="rbutton" id="r1">R1
<input type="radio" name="rbutton" id="r2">R2
<input type="button" id="go" value="SUBMIT" />
<div id="result"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#go').click(function(){
var val1 = $('input:radio[name=rbutton]:checked').val();
var datastring = "partialName="+val1;
$.ajax({
url: "search.php",
type: "POST",
data: datastring,
success: function(data)
{
$("#result").html(data);
}
});
});
});
</script>
I have a form like the code below (called index.php) with multiple submit buttons. I'd like to have different php actions on submit buttons. The 1st button without refreshing the browser's page and of course with passing the variables. The other with normal action which can redirect to a new page (here form_submit.php). I managed to make the 1st button working with the help of this topic but I can't distinguish the 2nd button from the 1st one. Is there any way to switch between functionality of these buttons ?
<? php>
if($_POST['formSubmit'] == "Next") {
$var1 = $_POST['name1'];
$var2 = $_POST['name2'];.
session_start();
$_SESSION['variable1'] = $var1;
$_SESSION['variable2']= $var2;
header("Location: form_submit.php");
exit;
}
?>
<html>
<body>
<form action="index.php" method="post">
<input type="text" name="name1" id="name1" maxlength="50" value="<?=$var1;?>" />
<input type="text" name="name2" id="name2" maxlength="50" value="<?=$var2;?>" />
<input type="submit" name="dataSubmit" value="Insert Data" />
<input type="submit" name="formSubmit" value="Next" />
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'data_submit.php',
data: $('form').serialize(),
});
});
});
</script>
</form>
</body>
</html>
As soon as 1st button doesn't actually need to make submit you can set 'onClick' event handler on it and make it just 'button'. In this case only JS will be triggered when you press the button and browser will not submit the form. Here is what I mean:
<input type="button" id="justButton" name="dataSubmit" value="Insert Data" />
<input type="submit" name="formSubmit" value="Next" />
<script>
$(function () {
$('#justButton').on('click', function (e) {
$.ajax({
type: 'post',
url: 'data_submit.php',
data: $('form').serialize(),
});
});
});
</script>
First, add clicked class to button:
$('.submitButton').click(function(){
$('.submitButton').removeClass('clicked');
$(this).addClass('clicked');
});
Than in submit event check button:
$('form').submit(function(){
var button = $('.submitButton.clicked');
if (button.attr('id') == 'name1') {
...
} else {
...
}
return false;
});
I've posted on here previously, however, the answers received were of no help as they did not work.
I have a form that is using AJAX but the error or success messages don't appear.
Can anyone see what I may have overlooked? Thanks.
HTML
<form id="newsletter" action="http://app.bronto.com/public/webform/process/" method="post">
<input type="hidden" name="fid" value="gmy3v1ej883x2lffibqv869a2e3j9" />
<input type="hidden" name="sid" value="37ea72cebcc05140e157208f6435c81b" />
<input type="hidden" name="delid" value="" />
<input type="hidden" name="subid" value="" />
<script type="text/javascript">
var fieldMaps = {};
</script>
<label for="nameField">Name:</label>
<input id="nameField" type="text" id="field_66663" name="39829[66663]" value="" />
<label for="emailField">Email:</label>
<input id="emailField" type="text" name="39821" value="" />
<input type="submit" value="Submit" />
<div id="newsletter-message" style="display:none;"></div>
</form>
JS
//ajax subscribe
$(document).ready(function(){
$("#newsletter").submit(function(event) {
event.preventDefault();
alert("submitting");
alert(data); //it doesn't alert here??
console.log($("#newsletter").serialize());
$.post($("#newsletter").attr("action"), $("#newsletter").serialize(), function(data){
alert(data); //doesn't alert here either
if(data == 'success'){
$('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
} else {
$('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').css('visibility','visible');
}
});
//Stop the normal POST
return false;
});
});
EDIT
I've now tried this but still no luck..
$("#newsletter").submit(function(event) {
event.preventDefault();
var $form = $( this ),
ufname = $form.find( 'input[name="39829[66663]"]' ).val(),
uemail = $form.find( 'input[name="39821"]' ).val(),
url = $form.attr( 'action' );
var posting = $.post( url, { name: ufname, email: uemail } );
posting.done(function( data ) {
$('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
});
});
The visibility and display are 2 different things in CSS.
You are creating your display div with display:none;, but then you try to make it visible with .css('visibility','visible');, so you just end up with:
<div style="display: none; visibility: visible;" id="newsletter-message">...</div>
Which is still not visible because of the display:none;.
You should replace the actions in your if by:
if(data == 'success'){
$('#newsletter-message').html('You have been signed up.').removeClass('error').show();
} else {
$('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').show();
}
Here is the documentation about the .show() jQuery function: http://api.jquery.com/show/
Small thing i noticed, you are using 2 id attribute for name field which makes your input invalid and may cause the problem.
<input id="nameField" type="text" id="field_66663" name="39829[66663]" value="" />
Also do as #Thierry said and avoid using numbers in name field if possible.