Passing java-script variable to same form action php file argument - javascript

Having a html form with buttons, I wanted to pass the clicked button value (which is obtained as javascript variable 'tree') to the same form action as an argument to php script. My javascript for getting the button value is like,
<script>
function getVal(value)
{
var tree =value;
}
</script>
On form,
<button type="" name="btn" value="a" onclick="getVal(this.value)">a</button>
<button type="" name="btn" value="b" onclick="getVal(this.value)">b</button>
<button type="" name="btn" value="c" onclick="getVal(this.value)">c</button>
<input type="submit" value="Submit">
Basically, I would like to do something like,
<form action="backend.php" **js variable as argument** method="POST">

You have two options. The first would be to add a hidden field to the form to send as POST data, and the second would be to add it to the action, which will make it a GET variable.
Option 1:
<script>
function getVal(value)
{
document.getElementById('buttonValue').value = value;
}
</script>
<input type="hidden" name="btnValue" id="buttonValue" value=""/>
Option 2:
<script>
function getVal(value)
{
document.getElementById('myForm').action = "backend.php?btnValue="+value;
}
</script>
<form action="backend.php" id="myForm" method="POST">
With the first option you can get the value in PHP using $_POST['btnValue'] and in the second case you can use $_GET['btnValue']

Related

How do I remove the input typed in by user in an input tag after form submission through vanilla javascript?

<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
How do I make it so that the input typed in by the user in the input field is cleared when a submit button is pressed (the one which does not refreshes the page)
you can add this to the onclick function of your button and replace the myForm with the id of your form element
document.getElementById("myForm").reset();
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input
field</button>
<input type="text" value="Blabla" id="myInput">
</body>
</html>
You can also write the javaScript in-between the script tag in a Function or any other way that you want.
You can create a function and add it into the onSubmit event of your form (assuming that you have a form) and then inside of that function you only need to clear the value using something like this:
document.getElementById('day-set').value = ''
Example:
<form onsubmit="myFunction()">
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
<input type="submit">
</form>
<script>
function myFunction(){
document.getElementById('day-set').value = ''
}
</script>

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

Javascript innerHTML Not Posting

I am trying to get a function to print out whatever the user inputs into the text-box. I am using onClick as an attribute on my submit button. I know I set it up properly because it flickers the answer, but only for a split second. How can I get the input to stay on the page? Here's the code: HTML: Type what you want to post to the website!
HTML:
<div id="main_div">
<section id="leftbox">
<form name="mybox">
Type what you want to post to the website!:
<br />
<input type="textbox" size="15" maxlength="15" name="text" id="text">
<br />
<input type="submit" value="Submit!" onClick="doFirst()">
</form>
</section>
</div>
<div id="insert"></div>
Javascript:
function doFirst(){
text = document.getElementById('text');
insert = document.getElementById('insert');
if(text.value == "")
{
insert.innerHTML = "Please input something!";
return false;
}
else
{
insert.innerHTML = text.value;
}
}
try this:
Using type=button
<input type="button" value="Submit!" onClick="doFirst()">
OR using type=submit
<form name="mybox" onsubmit="doFirst(); return false;">
<input type="submit" value="Submit!">
</form>
Explain:
The action for onclick in submit button DO executed. You keep see the page does not have any changes, because of there are a FORM. And the key point: the form handle the submit action after the JS function doFirst() immediately. Adding the onsubmit in the form with return false to stop default action, means:
<form name="mybox" onsubmit="return false;">
<input type="button" value="Submit!" onClick="doFirst()">
</form>
To simplify the changes, use button instead of submit type, or using onsubmit instead of onclick in form trigger.
onClick="doFirst()"
gets converted into an anonymous function:
function(){ doFirst() }
and whatever that function returns determines if the submit should be completed or aborted, so you should use:
onClick="return doFirst();"
In other words, it's not enough that doFirst return something, whatever doFirst returns should be returned again inside the onClick.

Hide submit type input value from url

I have a form with GET method with some inputs like this:
<input type="text" name="something">
<input type="submit" name="submit" value="Click here to submit form">
I don't want the url to become
mypage.php?something=value&submit=Click+here+to+submit+form
I want to suppress the submit parameter in the url (should be like this: mypage.php?something=value).
I need only GET method please don't mention POST method.
Also you may mention to remove name="submit" but i need it also to identify this submit.
Also if there is a input from which is empty i don't want to show
<input type="text" name="input1">
<input type="text" name="input2">
<input type="submit" name="submit" value="Click here to submit form">
input1 gets value but if input2 doesn't have value the i want url like
mypage.php?input1=value
Thanks
If you don't want the submit parameter to show up in your GET request URL, don't give it a name, and instead use id or class to identify it uniquely:
<input type="submit" id="submit" value="Click here to submit form">
I would remove form submit the and just turn it into a button. Then I would use jquery to submit the form and do any logic processing.
<input type="test" id="favoriteCheese" value="nacho" />
<button id="submit" value="Click here to submit form">Click here to submit form</button>
$("#submit").on('click', function () {
var data = {};
var favCheese = $("#favCheese").val();
if(favCheese.length > 0) {
data.favCheese = favCheese
}
$.ajax({
url : ".../mypage.php",
data : data,
type : 'GET',
...
})
})

I have 1 form with 2 submit buttons

I am trying to set-up a form that has 2 buttons, accept and deny. It doesn't seem to be working. Any thoughts on what I should fix?
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" action="formapprovedeny" class="iform">
Form content here.
<input type="button" onclick="submitForm('html_form_approve.php')" class="submit_button" value="Approved" name="Approved" />
<input type="button" class="submit_button" onclick="submitForm('html_form_deny.php')" value="Denied" name="Denied" />
</form>
Here is the script part.
<script>
function submitForm(action)
{
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
Your Javscript is trying to submit a form with an id of formapprovedeny but your form does not have an id. Try adding id="formapprovedeny" to your form
It should id="formapprovedeny" not action="formapprovedeny"
<form name="iform" method="post" onsubmit="" onreset="" enctype="multipart/form-data" id="formapprovedeny" class="iform">
You have a problem with your naming.
You try to get the form by it's id, but it is not set. It's name is.
You should use either getElementByName or give your form an id.
The type of button must be 'submit' and the value whatever you want, look this:
<input type="submit" class="submit_button" value="Approved" name="Approved" />
<input type="submit" class="submit_button" value="Denied" name="Denied" />
What do you want to achieve using the 2 buttons? What do you expect?
http://jsfiddle.net/xaW5P/
<script>
function submitForm(action)
{
alert('hello submitForm '+action);
document.getElementById('formapprovedeny').action = action;
document.getElementById('formapprovedeny').submit();
}
</script>
if I use your code (added an alert) this seems to work...whatever it should be doing ;)

Categories

Resources