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
Related
I just started learning ajax and its really great and time saving i agree.
But i got stuck at this point sending form data without page reload.
Below is my html code.
<form id="form4" method="post">
<input type="checkbox" name="test" id="agreed" value="check">
<br>
<br>
<input type="submit" id="form-submit" name="submit" value="Send">
<p class="form-message"></p>
</form>
Below is my Ajax script
<script>
$(document).ready(function() {
$("#form4").submit(function(event) {
event.preventDefault();
var action = 'another_test';
var agreed = $("#agreed").val();
var submit = $("#form-submit").val();
$(".form-message").load("test3.php", {
test: agreed,
submit: submit,
action: action
});
});
});
</script>
Below is my php code
<?php
if (isset($_POST['action'])) {
if ($_POST['action'] == 'another_test') {
$test = $_POST["test"];
$errorEmpty = false;
if (!empty($test)) {
echo "<p>Click the checkbox pls</p>";
$errorEmpty = true;
}
else {
echo "<p>Checkbox clicked</p>";
}
} else {
echo "Error.. cant submit";
}
}
?>
<script>
var errorEmpty = "<?php echo $errorEmpty ?>";
</script>
The php file is on another page called test3.php
This particular code works if it was an input text but doesn't work for a checkbox.
Please help me so i can learn well.
Thanks in advance.
.load() (as per the documentation) performs a GET request, not a POST, but your PHP is (as shown by the $_POST references) expecting a POST request - and it usually makes sense to submit form data using POST.
So you'd be better to use $.post() - this will send a POST request. Then you can handle the response and load it into your "form-message" element in the "done" callback triggered by that request.
N.B. You could also make the code shorter by putting the "action" variable as a hidden field in the form, and then simply serialize the form in one command instead of pulling each value out separately.
Example:
HTML:
<form id="form4" method="post">
<input type="checkbox" name="test" id="agreed" value="check">
<br>
<br>
<input type="submit" id="form-submit" name="submit" value="Send">
<input type="hidden" action="another_test"/>
<p class="form-message"></p>
</form>
JavaScript
$(document).ready(function() {
$("#form4").submit(function(event) {
event.preventDefault();
$.post(
"test3.php",
$(this).serialize()
).done(function(data) {
$(".form-message").html(data);
});
});
});
Documentation:
jQuery Load
jQuery Post
jQuery Serialize
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>
I 2 files: grampermol.php and kemi.html. In kemi.html, I call a javascript function that runs the grampermol.php file when a button is pressed. The issue I'm having is, that I cannot obtain values from the input field in php that is located in the html file.
kemi.html button function:
<input type="text" name="molar_mass" id="molar_mass" placeholder="Fx CH4" size="20">
<br>
<button style="margin-bottom: 1em; margin-top: 1em;" name="BUTTON_1" onclick="gramsPerMole()" type="submit" class="btn btn-success">Beregn</input>
grampermol.php:
<?php
function calculate() {
$formula = $_POST['molar_mass'];
}
calculate();
?>
I'm getting an error saying that molar_mass doesn't exist.
To do this you want an ajax Jquery call.You must understand first that php is a server side language and the javascript/jquery a client side.At the codes below you will see the kemi.html code first.As you see when you set an input value and then click the button then the Jquery code takes tha input value via ajax post method and send it to grampermol.php page.At the grampermol.php page when you have a valid post superglobal variable-value you get it and then echo it via json_encode() function.The echoed variable send back to the .done ajax method and alert() it.
kemi.html code:
$(document).ready(function (){
$('#grams').on('click',function (){
var a=$('#molar_mass').val();
$.ajax({
url: "grampermol.php",
method:'POST',
dataType: 'JSON',
data:{data:a}})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="molar_mass" id="molar_mass" placeholder="Fx CH4" size="20">
<br>
<button style="margin-bottom: 1em; margin-top: 1em;" name="BUTTON_1" id="grams" type="submit" class="btn btn-success">CLICK</button>
grampermole.php code:
<?php
if(isset($_POST['data'])){
$formula = $_POST['data'];
echo json_encode($formula);
}
?>
<!-- html form file -->
<!-- i dont know how your gramsPerMole() is so this is what i can help you with tell me if it works-->
<form action="grampermol.php" method="post">
<input type="text" name="molar_mass" id="molar_mass" placeholder="Fx CH4" size="20"><br>
<button type="submit" style="margin-bottom: 1em; margin-top: 1em;" name="BUTTON_1" onclick="gramsPerMole()" class="btn btn-success"> Beregn </button>
<!--grampermole.php file -->
<?php
function calculate() {
$formula = $_POST['molar_mass'];
return;`enter code here`
}
calculate();
?>
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>
I have some experience in JAVA GUI programming and I want to achieve the same in a PHP form.
Situation: I want to have a php form with a submit button. When the button is pressed an ActionEvent should be called to update another part of the form.
How to implement such a feature with HTML,PHP,JAVASCRIPT ?
Load latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
HTML code:
<form>
<button type="button" class="formLoader">Click button</button>
<div id="formContentToLoad"></div>
</form>
jQuery code:
<script type="text/javascript">
$(function(){
$(".formLoader").click(function(){
$("#formContentToLoad").load("scriptToRun.php");
});
});
</script>
Whatever markup you need to update in the form, can be put into scriptToRun.php
Use jQuery
Javascript
$(document).ready(function() {
$(".myForm").submit(function() {
$.ajax({
type: "POST",
url: "myForm.php",
data: $(this).serialize(),
success: function(response) {
// todo...
alert(response);
}
})
})
});
Html
<form method="POST" class="myForm">
<input type="text" id="a_field" name="a_field" placeholder="a field" />
<input type="submit" value="Submit" />
</form>
PHP
<?php
if(isset($_POST)) {
$a_field = $_POST["a_field"];
// todo..
}
If you want to use PHP and HTML to submit a form try this:
HTML Form
<form action="" method="post">
<input type="text" placeholder="Enter Name" name="name" />
<input type="submit" name="sendFormBtn" />
</form>
PHP
<?php
if(isset($_POST["sendFormBtn"]{
$name = isset($_POST["name"]) ? $_POST["name"] : "Error Response Here";
//More Validation Here
}