using form input in different pages and handling actions dynamically - javascript

I have four files, they are index.php, commonform.php, image1.php, image2.php
Suppose, in the index.php I have a form with two image input, the form's action change dynamically, method is post. when the first image is clicked is goes to commonform.php and also when the second image is clicked is goes to commonform.php but in commonform I have a form with some button input (its work can be anything and not my concern) and a submit button. My concern is when the first image is clicked, it goes to commonform.php and when the submit button is clicked of commonform.php, it goes to image1.php and same things for when the second image is clicked, it goes to commonform.php and when the submit button is clicked of commonform.php, it goes to image2.php. Can anyone help me?

You may attach a variable to your requests in index.php and then recognize it in commonform.php and decide to jump to the target destination !
For Example :
index.php
<form action="commonform.php" method="POST">
<input type="image" name="image_1" src="image1.gif" alt="Image 1">
<input type="image" name="image_2" src="image2.gif" alt="Image 2">
</form>
commonform.php
<?php
if (isset($_POST['image_1_x'], $_POST['image_1_y'])) {
$action = 'image1.php';
}
if (isset($_POST['image_2_x'], $_POST['image_2_y'])) {
$action = 'image2.php';
}
?>
<form id="commonform" action="<?php echo $action; ?>" method="POST">
<input type="button" value="From HTML">
<input type="button" value="Content">
<input type="button" value="Button style ">
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
when you are processing the INPUT with IMAGE type artibute ; it sends the X , Y artibutes , we just need to check them !

Related

How to submit photo upload when clicking "open" in file browser

Right now I have it as when a user clicks on the image the file browser will open up. But what I want is for after the file browser has opened and a file is chosen, once you click "open" the form will submit and the image will upload.
This is the closest I have gotten using the answer chosen here: Open File Browser on Link Click
code:
<div class="col-sm-6">
<img height="120" width="140" id="profileImage" alt="profile-image" class="userimg" style="margin-bottom: 1rem;" onclick="document.getElementById('imageFile').click();" src="<?php echo $image_src; ?>" />
</div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>?id=<?php echo $childId; ?>" method="post" enctype="multipart/form-data" id="imageForm" name="imageForm" class="text-center">
<!-- <input type="submit" id="btn-imageUpload" value="Submit" name="submit" /> -->
<input type="file" style="display:none;" id="imageFile" name="profile-photo" onchange="this.form.submit() enctype=”multipart/form-data” capture/>
</form>
It almost worked.. When I click "open" in the file browser the page submits and refreshes, but the photo was not uploaded at all.
But it works fine if I submit using the "submit" button on the page instead of the "open" button in the file browser.
Add an event listener to your file input. Once it recognizes a change you can send them to where they need to go. Or make the request via AJAX.
var form = document.querySelector('#profile_image'),
input = document.querySelector('input[name="picture"]');
input.addEventListener('change', e => {
e.preventDefault();
// form.submit(); // Uncomment this line or change it to your preferred AJAX mechanism
document.querySelector('body').innerHTML += 'Event Listener worked!';
});
<form action="/upload/profile/<?=$childId?>" method="POST" id="profile_image">
<input type="file" name="picture" />
</form>
This should easily submit your form.

Disable page background on button submit click

I have a html page where I have placed a paypal check out button and stripe pay now button.
When the paypal check out button is clicked i wanted to disable the page just like clicking a modal popup in bootstrap, until the next paypal page is loaded
clicking a default stripe button I have on my page does this already.
when the paypal button is clicked there is a small delay from clicking the button, until the paypal page loads, so disabling the page after the paypal button click would stop users clicking anything else during the small wait time.
<form action="paypal_checkout.php" method="post" autocomplete="off">
<input type="hidden" name="product" value="<?php echo $singleUserBooking[0]['id']; ?>">
<input type="hidden" name="bookingid" value="<?php echo $singleUserBooking[0]['id']; ?>">
<input type="hidden" name="price" value="<?php echo $singleUserBooking[0]['booking_price']; ?>">
<input type="hidden" name="currency" value="<?php echo strtoupper($singleUserBooking[0]['booking_currency']); ?>">
<input type="image" src="assets/images/payment/gold-rect-paypalcheckout-34px.png" alt="Submit">
</form>
how click I disable the page / background on the button click in the form above
I am using twitter bootstrap in my page theme
what would be the simplest why to achive this, thanks
Just surround your page content in a div, and hide it when you want.
For example:
<form id="Form1" method="post" runat="server">
<div id="mainContent">
some text
<br> some more text
<br> even more text
<br>
<input onclick="JavaScript: hideContent();" type="button" value="Hide Content">
</div>
<input onclick="JavaScript: showContent();" type="button" value="Show Content">
</form>
<script type="text/javascript">
<!--
function hideContent() {
document.getElementById('mainContent').style.display = 'none';
}
function showContent() {
document.getElementById('mainContent').style.display = 'block';
}
// -->
</script>
Edit:
To give it some kind of overlay (blacked out) you could do something like this:
Example.
And you could also disable page contens like so:
document.getElementById("btn1").disabled = true;
You could have an absolute positioned div with initially hidden and on click make it visible set it's style to
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:rgba(100,100,100,0.75);
Optionally you can show a message as well Please wait inside this div
Use this PayPal button, it'll handle that for you: https://developer.paypal.com/demo/checkout/#/pattern/client

Complete an url wtih the data given in boxes and go to that url

My workmates and I use the link below a couple of times in a day by clicking several pages to finally get this link:
http://eharita.mamak.bel.tr/imararsiv/test.aspx?f_ada=36391&f_parsel=4
What i want to do is, after test.aspx?_ada= you see 36391 this is my first number and &f_parsel= 4 this is the second one.
I want to create an HTML which consist of 2 boxes and a submit, sent button, in the very first box i want to write down a number (in the example it is : 36391) and in the second box another number (in the example it is : 4) and after that i ll click on Submit or Send button and this action will take me to the URL of
http://eharita.mamak.bel.tr/imararsiv/test.aspx?f_ada=36391&f_parsel=4
Maybe its easy or not but as a civil engineer i don't know how to make an HTML page like that.
It is quite easy, you just need a basic form.
<form action="http://eharita.mamak.bel.tr/imararsiv/test.aspx" method="GET">
<input type="text" name="f_ada" > <br>
<input type="text" name="f_parsel"> <br>
<button type="submit"> Submit</button>
</form>
You can try it out here http://jsfiddle.net/ea6heach/
<form action="http://eharita.mamak.bel.tr/imararsiv/test.aspx">
<input type="text" name="f_ada"/><br>
<input type="text" name="f_parcel"/><br>
<input type="submit" name="submit"/>
</form>
The demo doesn't work because Stackoverflow doesn't allow HTML redirecting but this is the idea of a simple form.
Following form write in particular html file.
<form action="action_page.php">
First number<br>
<input type="text" name="first_val" >
<br>
Second number<br>
<input type="text" name="second_val">
<br><br>
<input type="submit" value="Submit">
</form>
//following code write in the 'action_page.php' file.
<?php
//in the action_page.php file write following code
if(isset($_GET['first_val']) && isset($_GET['second_val'])
{
?f_ada=36391&f_parsel=4
$url = 'http://eharita.mamak.bel.tr/imararsiv/test.aspx/';
$url .= '?f_ada='.$_GET['first_val']&f_parsel['second_val'];
header('Location: $url);
}
?>

how to open same page onsubmit? [duplicate]

This question already has answers here:
POST form and prevent response
(2 answers)
Closed 9 years ago.
I have html form whose action is a php script. php code basically replaces the file.
HTML code:
<form name="input" action="//copy.php" method="POST" onsubmit="return alertbox();">
<input type="hidden" name="path1" value=path to image 1/>
<input type="hidden" name="path2" value='path to image 2' />
<input type="submit" name="submit" value="Copy image"/>
</form>
Php code:
if isset($_POST['submit']))
{
$image1 = $_POST['path1'];
$image2 = $_POST['path2'];
copy($image1, $image2);
}
?>
Now when I click submit, a alert box opens that "file is updated successfully" and when I click ok on it, a blank page load. How can I avoid loading the blank page? I want to stay on the same page after clicking submit with pop up msg.
SOLUTION
As I don't see "Answer your own question" option, I am posting solution here.
This link POST form and prevent response, gives you textual answer to the question. While I providing the answer by code.
So basically, it very simpl. Just put
header("HTTP/1.0 204 No Response");
in the php file and it will work successfully on all browser, without opening new page. This will avoid use of jquery.
Leave action empty.
<form method="post" action="">
Then check if posted using isset function
if(isset($_POST)){
...
}
This will keep you on the same page after submit button..
<form name="input" action="" method="POST" onsubmit="return alertbox();">
<input type="hidden" name="path1" value=path to image 1/>
<input type="hidden" name="path2" value='path to image 2' />
<input type="submit" name="submit" value="Copy image"/>
</form>
But now, your image(s) may not be loaded. Maybe it will work, maybe not. If not, you will need to resolve functions which may reside in copy.php file. Since we dont know whats in that file, its hard to answer your question correctly, but.. you may try this "blind" shot..
if(isset($_POST['submit']))
{
//include "//copy.php"; // this file probably contains functions, so lets load functions first IF needed..
$image1 = $_POST['path1'];
$image2 = $_POST['path2'];
copy($image1, $image2);
}
Have you tried changing the type on the input:
<input type="submit" name="submit" value="Copy image"/>
to
<input type="button" name="submit" id="submit" value="Copy image"/>
<input type="button" /> won't submit a form by default (check all browsers to be sure).
<input type="submit"> by default, the tag in which the submit input is, is submitted. If you still want to use this, you will have to override the input submit/button's functionality with an event.preventDefault(). In that case, you need:
$('#submit').click(function (event) {
event.preventDefault();
//Do whatever you need to
//Submit if needed: document.forms[0].submit();
});
For further details refer this link
action="<?php echo $_SERVER['PHP_SELF']; ?>

Maintain button submit value when using link to submit a form

i am trying to create a link that submits a form. I use this and works fine :
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
However, i have a problem. My previous submit button was :
<input type="submit" name="submit" value="Send Message" />
When this was clicked, i was getting a $_POST['submit'] value that i was checking with isset in my php script, to see whether the form is submitted or not. However, this does not work with my submit link. Does anybody know how i can do that ?
EDIT:
I tried that, as suggested :
<form action="." name="theForm" class="contactForm" method="post">
<input type="hidden" name="submit" value="Send Message" />
</form>
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
But still does not work.
You can create input type of hidden and check for its existence:
if (isset($_POST['hiddenName'])) {....}
You can use a hidden field instead. So when the form is submitted, you can check if the hidden element exists.
Like this:
<input type="hidden" name="submit" value="Send Message" />
This way, you can check for $_POST['submit'] when you submit the form. Just make sure the hidden <input> is inside the <form> element, so it will POST with the rest of the form.
add a hidden input.
<input type="hidden" name="submit" value="Send Message" />
it will not be visible to the user, but it will be send with the form contents.
You can always hide the submit button (with css display: none) and click it with JavaScript:
document.forms.theForm.elements.submit.click();

Categories