I need to load 2 actions with 1 button. The first action uploads a file to the server and the second action loads some customer data.
HTML
<p class="text-center font-big"><u>Load Photometric Data (.ies File)</u></p>
<form id= "form1" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>" enctype="multipart/form-data">
<input type="file" name="file" id="file">
<input type="hidden" name="upload_file" />
</form>
<form id= "form2" method="post" action="/roadlite_main.php">
<input type="hidden" name="new_data" />
</form>
<input type="button" value="Click Me!" onclick="submitForms()" />
js
<script language="javascript">
submitForms = function()
{
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
</script>
The second form (or maybe the last) always loads OK ... the first form fails to load and does not upload the file.
Any ideas!
Related
I have a file upload form that checks the extension of the uploaded file, it works ok until I add a javascript that shows a "LOADING...." message, which always makes the error of wrong extension comes up, even though it is an allowed one.
form.html
<form id="loader" action="uploadfile.php" method="post" enctype="multipart/form-data" onsubmit="return loading();" />
<label>Upload file:</label>
<input type="file" name="file" id="file" />
<input name="upload" type="submit" />
<input name="action" type="hidden" value="upload" />
</form>
<script>
function loading() {
document.getElementById("loader").innerHTML = "<div style='color: red;'>LOADING....</div>";
}
</script>
uploadfile.php
<?php
$allowedExts = array("txt", "TXT");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if (in_array($extension, $allowedExts))
{
if ($_FILES["file"]["error"] > 0)
{echo $_FILES["file"]["error"]; }
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"upfiles/thefile.txt");
?>
Thanks to #Teemu's answer I could achieve the expected behaviour, I just moved the id from the form element to a div and that did it, here's the new code:
<form action="uploadfile.php" method="post" enctype="multipart/form-data" onsubmit="return loading();" />
<label>Upload file:</label>
<input type="file" name="file" id="file" />
<input name="upload" type="submit" />
<input name="action" type="hidden" value="upload" />
<div id="loader"></div></form>
<script>
function loading() {
document.getElementById("loader").innerHTML = "<div style='color: red;'>LOADING....</div>";
}
</script>
Right now I am using java script to submit two forms with a common function, I want to do it with jQuery. How can I pass data in jQuery as simple as JavaScript. I cannot able to send/retrieve data while event call.
Present Code:
function SaveSample(flag,mode){
//Based on flag and mode i am performing some validations
//save sample
}
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','S')">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" onclick="SaveSample('A','D')">
</form>
Required Code:
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
You can set the data-* attributes on the button and them access them in the click handler using $(this).attr("<attribute name>").
$(document).ready(function() {
$(".sampleSave").on("click", function(e) {
console.log($(this).attr("data-flag"), $(this).attr("data-mode"));
e.preventDefault();
//perform validations
//save sample
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ff1" name="ff1" method="post">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" data-flag="A" data-mode="B" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" data-flag="C" data-mode="D" class="sampleSave">
</form>
Another option is not to put the parameters on the form element, but instead have different callbacks for each form.
$(document).ready(function(){
$("#ff1 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','S');
});
$("#ff2 .sampleSave").on("click",function(e){
e.preventDefault();
SaveSample('A','D');
});
});
You can use this code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sampleSave").on("click",function(e){
var formData = $(this);
$.ajax( {
type: "POST",
url: formData.attr( 'action' ),
data: formData.serialize(),
success: function( response ) {
console.log( response );
}
} );
e.preventDefault();
//perform validations
//save sample
});
});
</head>
<body>
<form id="ff1" name="ff1" method="post" action="yourfile.php">
<input type="text" id="dummy1" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
<form id="ff2" name="ff2" method="post" action="yourfile1.php">
<input type="text" id="dummy2" name="dummy">
<input type="button" value="Save" class="sampleSave">
</form>
</body>
</html>
How to pass variable values into url. Here is my code
<?php
if(isset($_POST['submit'])){
echo $v=$_POST['n'];
} ?>
<form method="post" action="/user/<?php echo $v; ?>">
<input type="text" name="n">
<input type="submit" name="submit" value="Submit">
After giving input value and click on submit shows in url:
if input value is raj after click on submit in url i want to display
/user/raj
The requirement can be achieved by using javascript.
<form id="myForm" method="post" action="" onsubmit="return false">
<input type="text" name="n">
<input type="submit" name="submit" value="Submit">
</form>
using jquery
$("#myForm").on("submit",function(){
var val=$("input[name='n']").val();
$(this).attr("action","<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>/user/"+val);
$(this).submit();
})
Use method="get" in your form tag.
Working on a really simple form for a district site. I have a really simple form in PHP.
<form method="post">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="submit" name="action" value="enter">Enter</button>
</div>
</fieldset>
</form>
What I am trying to do is when the user presses the enter button, I want to alert the user of what they have entered.
This is what I have so far in my HTML.
<body onload="document.forms[0].submit()">
<form action="/index.php" onsubmit="" method="POST">
<script>
alert(document.getElementsByName("age").value);
</script>
</form>
</body>
However, I keep seeing "undefined". I am assuming that is happening because on page load my script is being run instead of when the user presses the submit button. Kind of confused how to just do a simple alert. Appreciate any help.
You must insert your code in a function that you must attach to a event handler like onsubmit, something like this:
HTML:
<form method="post" onsubmit="showData();">
JAVASCRIPT:
function showData() {
alert(document.getElementsByName("age")[0].value);
}
I've inserted [0] in your Javascript code because document.getElementsByName returns you an Array of elements, in your case, this Array, obviously contains only one value that is retrievable on the index 0 (first index of any array).
<form method="post" id="myform">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>" id="age">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="button" name="action" value="enter" onclick="alert(document.getElementById('age').value);document.getElementById('myform').submit()">Enter</button>
</div>
</fieldset>
</form>
Is this what you want?
I am working on an internal webpage to help automate some email tasks. I currently have 1 form that has some generic info that will be the same in all of the following forms, and several other forms that have some customized information. My issue is I cannot get the data from the Info Form to copy to the other forms on the page. My code is below:
<html>
</body>
<script language="JavaScript">
function updateInput(ish){
document.getElementById("emailsubj").value = ish;
}
</script>
<body>
Info Form
<form id="info" name="info">
Email Subjects:<input name="emailsubj" value="Enter Subject Here">
</form>
<br><br>
Form 1
<form id="form1" name="form1">
Email<input name=emadd value="email#address.com">
Subject<input name="subj" onblur="updateInput(this.value)">
</form>
<br><br>
Form 2
<form id="form2" name="form2">
Email<input name=emadd value="email#address.com">
Subject<input name="subj" onblur="updateInput(this.value)">
</form>
</body>
</html>
All of the non-information forms will have a submit button on them to do the appropriate function. I'm not opposed to using onchange rather than onblur, however testing that didn't help me any in my tests. Thanks in advance!
jQuery Answer
http://codepen.io/anon/pen/aKIgc
HTML
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
Info Form
<form id="info" name="info">
Email Subjects:<input name="emailsubj" placeholder="Enter Subject Here">
</form>
Form 1
<form id="form1" name="form1">
Email<input name="emadd" placeholder="email#address.com">
Subject<input name="subj">
</form>
Form 2
<form id="form2" name="form2">
Email<input name="emadd" placeholder="email#address.com">
Subject<input name="subj">
</form>
</body>
</html>
SCRIPT
$('input[name=emailsubj]').on("keyup",function(e){
$('[name=subj]').val($(this).val())
});
No jQuery Answer
http://codepen.io/anon/pen/BzKxG
<html><body>
Info Form
<form id="info" name="info">
Email Subjects:<input name="emailsubj" value="Enter Subject Here" onblur="updateInput(this.value)">
</form>
<br/><br/>
Form 1
<form id="form1" name="form1">
Email<input name="emadd" value="email#address.com">
Subject<input name="subj">
</form>
<br/><br/>
Form 2
<form id="form2" name="form2">
Email<input name="emadd" value="email#address.com">
Subject<input name="subj">
</form>
</body></html>
JS
function updateInput(ish){
var a = document.getElementsByName("subj");
for(var i in a){
a[i].value = ish;
}
}