Pass json object to a second PHP page - javascript

I have this javascript function that submits the object to another page:
function submitForm(){
var user = createUser();
$.ajax({url: 'run.php',
type: 'POST',
data: user,
dataType: 'json',
success: function(data){
alert("success");
console.log(data);
},error: function (xhr, ajaxOptions, thrownError) {alert("ERROR:" + xhr.responseText+" - "+thrownError);}
});
}
I also have an "index.php" page, that has a button that calls the "submitForm()" function:
<body>
... a bunch of code
<form>
<input id="submit" type="submit" class="submit" value="submit" onclick="submitForm()">
</form
</body>
So, when I click the "submit" button in the "index.php" page, the user is redirected to another page (run.php) in which the json object is echoed.
<?php
echo json_encode($_POST);
?>
I am going mad trying to solve this. I read a hundred of tutorials and questions here but none solved my problem.

Just add action attribute to the form tag and remove the javascript:
<body>
... a bunch of code
<form action="run.php">
<input id="submit" type="submit" class="submit" value="submit"/>
</form
</body>

Related

Form not submitting on ajax request

So I'm comparing the value of the input field entered by the user to the value of the mysql DB (using an Ajax request to the checkAnswer.php file). The request itself works fine, it displays the correct "OK" or "WRONG" message, but then it does not submit the form if "OK". Should I put the .submit() somewhere else?
HTML code:
<form id="answerInput" action="index" method="post">
<div id="answer-warning"></div>
<div><input id="answer-input" name="answer" type="text"></div>
<input type="hidden" id="id" name="id" value="<?=$id?>">
<div><button type="submit" id="validate">Valider</button></div>
</form>
</div>
JS code
$("#validate").click(function(e){
e.preventDefault();
$.post(
'includes/checkAnswer.php',
{
answer : $('#answer-input').val(),
id : $('#id').val()
},
function(data){
if(data === '1'){
$("#answer-warning").html("OK");
$("#answerInput").submit();
}
else{
$("#answer-warning").html("WRONG");
}
},
'text'
);
});
I think it is because you set your button type as submit. Why?
When you do $("#validate").click(function(e){, you implicitly replace the default submit behavior of the form.
As you want to interfere in the middle of the process for extra stuff, I suggest you change the button type to button or simply remove the type attribute.
Then the $("#validate").click(function(e){ will alter behavior of click, not the submit of form.
<form id="answerInput" action="index" method="post">
<div id="answer-warning"></div>
<input id="answer-input" name="answer" type="text">
<input type="hidden" id="id" name="id" value="<?=$id?>">
<button onlcick="validate()">Valider</button>
</form>
/******** JS ************/
function validate(){
var post = {};
post['answer'] = $('#answer-input').val();
post['id'] = $('#id').val();
$.ajax({
url: 'includes/checkAnswer.php',
type: 'POST',
data: {data: post},
success:function (data) {
console.log('succsess');
},
error:function (jQXHR, textStatus, errorThrown) {
console.log('failure');
}
});
}

Ajax Response as HTML

When the submit button is clicked on page1.php the response is printed as HTML format for a moment but it gets automatically deleted.
I want to display the response of page2.php in page1 in the id="output" element.
What am I doing wrong?
Here is the content of page1.php
<script type="text/javascript">
function func(tosearch) {
alert("search");
$.ajax({
type: 'post',
url: 'page2.php',
data: {
'tosearch' : tosearch
},
success: function(result) {
print(result);
}
});
}
function print(result) {
document.getElementById("output").innerHTML=result;
}
</script>
<form method="post" action="page1.php">
<input type="text" name="search" placeholder="Search.."><br><br>
<input type="submit" name="submit" onclick="func()">
</form>
<p id="output">table here!!</p>
Content of page2.php
<?php echo "<table align='center'>"
."<tr>"
."<td>"."Mr XYZ"."</td>"
."<td>"."MALE"."</td>"
."<td>"."987558745"."</td>"
."<td>"."xyz#gmail.com"."</td>"
."</tr>";
?>
The response isn't being deleted, the page is refreshing. Since you don't want the page to refresh at all, you don't really need that form element. Just remove the form and make the input a plain button to keep the markup simple:
<script>
// your JavaScript
</script>
<input type="text" name="search" placeholder="Search.."><br><br>
<button onclick="func()">
<p id="output">table here!!</p>

How to submit form, programatically with jQuery?

I have form, which when is submitted, is making ajax POST request, posting data fetched from form. Form is quite straight forwards.
<form id="form1">
<input type="text" name="domain" id="field1">
<input type="submit" name="my-submit" id="my-submit" value="Submit Form" class="btn btn-info btn-lg">
<!--<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>-->
</form>
Then #response div where returned content is loaded.
# HTML code ...
<div class="modal-body" id="response">
<p>Some text in the modal.</p>
</div>
# HTML code ...
And finally JavaScript...
$('#form1').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'check.php',
data: $(this).serialize(),
success: function (data) {
//console.log(data);
$('#response').html(data);
$("#myModal").modal();
}
});
});
But then, I want to check in my index.php script, where all these above is, if is $domain variable passed in URL, like yoursite.com?domain=domain.com, and if is, to call submit(); function programatically with this code:
if(isset($_GET['domain'])) {
$domain = $_GET['domain'];
echo $domain;
echo "
<script>
$('#form1').submit();
</script>
";
//exit();
}
Problem is, that nothing happens. How to achieve desired behaviour?
You should not do that. There is no reason to serve a page to the client, fill a form automatically and post back to the server.
Instead you should check if $_GET['domain'] domain is set and if it is, you should include your check.php file directly. And you should adapt check.php to handle both POST and GET parameters.
This would save you a round-trip to the client and does not rely on the client having javascript enabled.
<form id="form1">
<input type="text" name="domain" id="field1">
<input type="submit" onclick="return call();" value="Submit Form">
</form>
<script type='text/javascript'>
function call()
{
//ajax code;
return true;//are your want form submit
return false;// are your want cannot form submit
}
</script>
Don't forget to put return

Form submitting on return false

I have the following form:
<form id="sizeForm" style="float:right;">
<input value="test" name="comments" type="text">
<input class="btn-sm btn-main" value="Save" type="submit">
</form>
Which I'm trying to submit using ajax but the form is posting, here's the JQuery:
$("#sizeForm").submit(function () {
$.ajax({
type: "POST",
url: "/ajax/actions/editSize.php",
data: $(this).serialize(),
success: function (dataBack) {
$('#size2'+dataBack).fadeOut().promise().done(
function(){
$('#size1'+dataBack).fadeIn();
}
);
}
});
return false;
});
Any ideas where I'm going wrong?
The issue may be with your PHP script (which you haven't provided), but here are some ideas.
HTML:
<form id="sizeForm" style="float:right;">
<input value="test" name="comments" type="text">
<input class="btn-sm btn-main" value="Save" type="submit">
</form>
javascript:
$("#sizeForm").on('submit', function () {
$.ajax({
type: "POST",
url: "/ajax/actions/editSize.php",
data: $(this).serialize(),
success: function (dataBack) {
$('#size2'+dataBack).fadeOut().promise().done(
function(){
$('#size1'+dataBack).fadeIn();
}
);
}
});
return false;
});
In your PHP script add something like this so you know the value is received. This will show in the network tab in the browser developer tools.
if (!empty($_POST['comments'])) {
echo "form submitted!";
exit;
}
In the network tab, you should see an entry like POST editSize.php. If you don't see it, the form was not sent. If you do see it, open it up and look at the "post" tab. This will show you what was sent. Then, your "response" tab will show you the output from your PHP script.

Some PHP process should be done while Jquery toggle button is clicked without redirecting the page

i have a toggle button on Jquery which has to show some extra info. it works good and i wanna to do some process on PHP in order to do in back end without redirecting the toggle page (which shows some extra info). i am breaking my head too long . kindly help me out please... here is my Jquery code
<div class="hidetext"></div>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".hidetext").click(function () {
$(".text").toggle("slow",function(){
});
});
});
$('#hidetext').change(function() {
this.form.submit();
});
</script>
<form action="http://localhost/test/test/index.php" method="post" id="doSite">
<input type="hidden" name="credits" value="<?php echo $email;?>">
<input type="hidden" name="credits" value="<?php echo 2;?>">
<button class="hidetext">Click More Info</button>
</form>
You can use ajax for this.
$.ajax({
dataType: "json",
data: {"x": $x},
url: 'php/x.php',
type: 'post',
beforeSend: function(){
//What is done before to send
},
success: function(respuesta){
//what is done after send
$("x").html(respuesta.html);
},
error: function(xhr,err){
alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status+"\n \n responseText: "+xhr.responseText);
}
});

Categories

Resources