Develop Reference

How to make page not reload and not open php page after click on input with type submit?

I have page in HTML CSS JS: https://handmade.company/seo/index.html
on this page i have form
<form class="webform" action="send.php" method="post">
<input class="webinput" type="text" name="imja" placeholder="Ваше имя">
<input class="webinput" type="text" name="phone" placeholder="Ваш телефон">
<input class="webinput" type="text" name="sajt" placeholder="Ваш сайт">
<input class="webinput_btn" type="submit" value="Отправить запрос">
</form>
with php file SEND.PHP
<?php
$imja = $_POST['imja'];
$phone = $_POST['phone'];
$sajt = $_POST['sajt'];
$wrong = 'при отправке сообщения возникли ошибки';
$good = 'сообщение успешно отправлено';
if (mail("office#handmade.company", "Заказ с сайта", "Ваше имя: ".$imja. " Ваш телефон: ".$phone. "
Ваш сайт: ".$sajt ,"From: office#handmade.company \r\n"))
{ echo "<script>alert('$good');window.location.href='index.html'</script>;";
} else {
echo "<script>alert('$wrong');window.location.href='index.html'</script>";
}?>
The problem is: when i click input with type="submit" button browser go to page https://handmade.company/seo/send.php and alert and after it it go back to index.html
I want: the page not reload and browser not redirect me to send.php page. I just want alert and nothing should change anymore
i tried to add function with preventDefault onclick on submit input BUT my php stopped working

Remove send.php page
Change method = "post" to method = "get"
Do document.getElementsByClassName("webform")[0].onsubmit = function( e ) { e.preventDefault(); }
Use JavaScript to get URL parameters which will be the values of the from
Then alert

you can do this with Javascript or Jquery and Ajax. But if you want a simple way. You can try to add to your php file.
header('Location: https://handmade.company/seo/index.html');
exit;
replace https://handmade.company/seo/index.html for the url you want

PHP 2 actions from a single Button

I am wondering how to get 2 actions in PHP from a single Button.
Attached here is an screenshot of the page:
I have the following code:
For the Submit button
<form method='POST'>
<div class="form-group">
<input type="text" name="s_amount" style='width:20%;' required>
<input type="submit" class="btn btn-primary" name="submit" value="Submit" />
</div>
</form>
<?php
$s_amount = $_POST['s_amount'];
echo $s_amount;
?>
AND for the Submit Code button
<button id="submitcode"type="button" class="btn btn-default">Submit Code</button>
<pre><code id="output">.../...</code></pre>
When the Submit code is pressed, this executes the following script
<script>
$(document).ready(function(){
$("#submitcode").on("click", function(){
ocpu.seturl("https://public.opencpu.org/ocpu/library/base/R")
//arguments
var mysnippet = new ocpu.Snippet("V_CT="+$('[name="CT"]:radio:checked').val()+"\r V_TP="+$('[name="LENGTH"]:radio:checked').val()+$('#input2').val());
//perform the request
var req = ocpu.call("identity", {
"x" : mysnippet
}, function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
});
});
})
});
</script>
What I would like to have is a single button, which not only gets the value next to the first submit button (here 12, see attached pciture) but also executes the script.
Many thanks !

try giving id to form tag and on click on submitcode button call the form using its id.
for ex.
<form method='POST'>
function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
// using form id call the form
$("#formdata").submit(); // it will simply submit the form.
});
});
<form method="post" id="formdata"> <!--assign id to form tag-->
</form>

Could finally do it very easily using js.
<input type="text" id="VTP" value="0">
and get the value in the javascript form
document.getElementById("VTP").value
# nikhil borikar: Thanks but it did not work

Could not show the modal after if condition

I have a problem regarding bootstrap modal: I have an input box and a button, in the input box, the user should type their code, then click the check button:
<form class="form-inline" action="" method="post">
<div class="form-group">
<input type="text" class="form-control input-sm input-inverse" name="appcode" required="" data-form-field="appcode" placeholder="Insert Your Code"></div>
<div class="buttons-wrap">
<button name="Xcheck" class="btn btn-secondary display-4 " type="submit" role="button" data-toggle="modal" data-target="#modalID">Check</button>
</div>
</form>
When the button is clicked, it will run a PHP code in the same page, also check either the inserted code exists in the database or not.
Here is the php code:
<?php
$con= mysqli_connect("localhost", "root", "");
mysqli_select_db($con, "cobathesis");
if (isset($_POST['Xcheck'])){
$appcode= $_POST['appcode'];
$check=mysqli_query($con,"select * from applicantdata where appcode='$appcode'");
$checkrows=mysqli_num_rows($check);
if($checkrows>0) {
// the modal should be loaded here
}else{
echo "<script>alert('You Inserted either the wrong Code or the Code is unregistered'); location.href='';</script>";
}
}
?>
Is it possible to use the same button (check button) to post the value and load the modal at the same time?
Thank you for your response.

You could use something like
$('#myForm').on('submit', function(e){
$('#myModal').modal('show');
e.preventDefault();
});
CodePen by Hana Piers

Register which image has been clicked in form

I have multiple images in a HTML document and I want them to render unique values when they are clicked (in some retrievable way). I have tried having them as form elements, like so:
<form id="myform" method="post" action="">
<input type="hidden" name="action" value="submit" />
<div class="flex-item"><input type="image" name="submit" value="alt1" alt="alt1" src="images/<?php echo $data[$counter] ?>"></div>
<div class="flex-item"><input type="image" name="submit" value="alt2" alt="alt2" src="images/<?php echo $data[$counter+1] ?>"></div>
</form>
In this case I would like to access the POST data with PHP, something like:
if (isset($_POST['action'])) {
echo '<br />The ' . $_POST['submit'] . ' button was pressed';
}
But this doesn't work, as it's the image input type, which doesn't seem to be able to send data. I have tried using a button with the image as background, but this way I would have to adapt the size of each image to make it fit in the button (which I want to avoid, as I have many images).
I know I could use an image as a submit button with Javascript, but as I said, information about which image has been clicked also needs to be available somehow. Any ideas about the best solution?

HTML / CSS - Only way.
Set up the CSS to hide the radio buttons:
.hidden {
display: none !important;
}
In your form, use radio buttons to track which image is selected. Put the image inside of a label that is "for" the relevant radio button . Be sure to put whatever info you want in PHP inside the value attribute of the radio buttons:
<form method="post" name="myForm">
<div>
<input type="radio" name="image" value="image1" id="image1" class="hidden">
<label for="image1"><img src="path-to-your-image.jpg"></label>
</div>
<div>
<input type="radio" name="image" value="image2" id="image2" class="hidden">
<label for="image2"><img src="path-to-your-other-image.jpg"></label>
</div>
<div>
<input type="submit" name="save" value="Save Image Selection">
</div>
</form>
If you need the form to submit when they click an image, then add this bit of javascript:
<script>
// No-conflict-mode-safe document ready function (waits until page is loaded to run, which ensures radio buttons are available to bind to)
jQuery(function($) {
// Hide / suppress the submit button
$('input[type="submit"]').closest('div').hide();
// Bind to change event for all radio buttons
$('input[type="radio"]').on('change', function() {
// Submit the form ("this" refers to the radio button)
$(this).closest('form').submit();
});
});
</script>
Then, when you submit this form, in your PHP you'd be able to do this:
$image = $_POST[ 'image' ]; // 'image' is the name of the radio buttons
var_dump( $image );
// Will result in "image1" or "image2", etc - whatever "value" you assigned to the radio buttons

When you use your code, you get the submit param (because of the button's attribute name) in your $_POST object. The value will be the value attribute.
So you can check this like this:
<form id="myform" method="post" action="">
<input type="hidden" name="action" value="submit" />
<div class="flex-item"><input type="image" name="submit" value="alt1" alt="alt1" src="images/img1"></div>
<div class="flex-item"><input type="image" name="submit" value="alt2" alt="alt2" src="images/img2"></div>
</form>
<?php
if (isset($_POST['submit'])) {
if ($_POST['submit'] == 'alt1') {
echo 'alt1 clicked';
// First button clicked
}
else {
echo 'alt2 clicked';
// second button clicked
}
}
?>

Press form submit button if upload format is valid

I need to press the button "submit" if the upload file format is valid. I have managed to check the format using the JavaScript below. My aim is between // and // ...
<script>
function Checkfiles(f){
f = f.elements;
if(/.*\.(gif)|(jpeg)|(jpg)|(doc)$/.test(f['filename'].value.toLowerCase()))
return true; + // and press the button submit //
alert('Please Upload Gif or Jpg Images, or Doc Files Only.');
f['filename'].focus();
return false;
};
</script>
And here's the HTML form:
<form action="something.php" method="post" name="myForm" onsubmit="return Checkfiles(this);">
<input type="file" name="filename" accept="/image*/">
<input type="submit" name="submit">
</form>
Thanks.

Do something like:
document.querySelector('form[name="myForm"] input[type="submit"]').click();