Sending data with form and reading it from Request.Form - javascript

I have form like below in mvc view:
<form name="aspnetForm">
<input type="hidden" id="ORDER_ID" name="ORDER_ID">
<input type="hidden" id="STATUS" name="STATUS" value="SHOW">
</form>
I want to send it from js with below:
function send(orderKeyId, sUrl) {
document.aspnetForm.ORDER_ID.value = encodeURIComponent(orderKeyId);
document.aspnetForm.action = sUrl;
document.aspnetForm.submit();
}
Everything works, but I have to read it in aspx.cs from Request.QueryString, but I need to use Request.Form because of I need clear url without any queryString inside. I mean, it automatically add ORDER_ID to queryString instead of sending it in form.

You're missing a closing quote in Request.Form["ORDER_ID]

Related

"Converting" javascript variable (String) value into PHP variable

I am using window.open() method to open a new window and passing a Javascript variable (String) using localStorage.setItem() method.
In the new window that's opened, I retrive the passed variable using localStorage.getItem() method.
Now I need this variable for an SQL query using PHP,
something like "SELECT rowname from tablename WHERE id = TheJSVariable"
But I couldn't find any where a solution for it.
Any suggestions?
Thanks
When opening with window.open you can add your parameter as common get parameter. i.e.:
window.open ("mysite.com/page.php?param=123");
And then at page.php you can read param value with:
$param = $_GET['param'];
update:
If you want to make post request you could add (hidden) form with form fields holding the values you want to pass and submit that form from code. Something like:
<form id="TheForm" method="post" action="test.asp" target="TheWindow">
<input type="hidden" name="something" value="something" />
<input type="hidden" name="more" value="something" />
<input type="hidden" name="other" value="something" />
</form>
<script type="text/javascript">
window.open('', 'TheWindow');
document.getElementById('TheForm').submit();
</script>
Window.open and pass parameters by post method

Sending file and text through one form

I'm trying to send file and text at the same time, but I end up sending only file. For some reason form ommits the text. Here's my code
<form action="test.html" method="get" enctype="multipart/form-data" id="form">
Choose file
<input type="file" name="fileToUpload" id="check">
<input type="text" id="variable">
<input id="but" type="button" value="Send" onclick="send()">
</form>
And here's my Javascript code
function send() {
document.getElementById("variable").value = 1;
var val = document.getElementById('check').value;
if (val != "") {
document.getElementById('form').submit();
} else {
alert("Choose file!");
}
}
Note - it's important to me that the "variable" value will be added via JS. I checked it and it definetly changes to 1 before sending form, however after submitting form I'm getting only
test.html?fileToUpload=somefile
Without the "variable". Yes I know I should use POST and redirect form to some PHP file but I changed it to GET and html to check what is received in URL.
Any other ways to add "variable" to the form string without adding extra input are welcome.

How to access form data from javascript

I am a javascript newb so any help on this matter would be appreciated!
I am trying to get the user submitted data back after submission.
I have a javascript function that replaces one form with another. A kind stackoverflow user helped me create this function.
function Vanish(event) {
event.preventDefault();
// Specify the id of the form.
var IDofForm = "quest";
// Specify the id of the div containing the form.
var IDofDivWithForm = "question";
// Specify the id of the div with the content to replace the form with.
var IDforReplacement = "entryform";
if(document.getElementById(IDofDivWithForm).innerHTML = document.getElementById(IDforReplacement).innerHTML){
return true;
}
else{
return false;
}
}
Then I have my forms :
<div id="question">
<form action="" method="POST" name="quest" id="quest" onsubmit="Vanish(event)">
<textarea name="question" class="question-field" placeholder="Ask your question..."></textarea><br><br>
<input type="submit" name="qsubmit" onclick=" Change();">
<!-- Change() only swaps images on the screen-->
</form>
</div>
<!-- Vanishing Form -->
<div id="entryform" style="display:none;">
<form action="" method="POST" id="email">
<input type="text" name="fName" placeholder="First Name" class="forms" value="<?echo $_POST['question'];?>">
</br>
<input type="text" name="sName" placeholder="Second Name" class="forms">
</br>
<input type="text" name="email" placeholder="Email" class="forms">
</br>
<input type="image" src="images/submit.png" name="esubmit" onclick="submitForm()">
</br>
</div>
As you can see from above I have two forms. the entry form replaces the question form after it has been submitted.
My question today is how do I get the entered data?
I prefer php as I understand it more so if there was a php method to this that would be great however all solutions will be helpful!.
For PHP I have tried using the $_REQUEST and $_POST methods to try and get back the data but it does not work.
My forms all submit to the page they are on.
First of all JavaScript is client side programming language so to get data to server you need to make a http/https request to server and send/receive data
Good read What is the difference between client-side and server-side programming?
and to do that you can either use html Form or ajax
Form
In form you simply send data to url in action ( if no url specified it will make request to current page else specified action url)
Ajax
you can send data using ajax for that you just need to make ajax request like below (i highly recommended to use JavaScript ( but if you are good at JavaScript that you can use Jquery framework too )
var yourFormId = document.getElementById("email");
email.onsumbit = function(e){
e.preventDefault();
var formData = new FormData(yourFormId );
var request = new XMLHttpRequest();
request.open("POST", "your-url");
request.send(formData);
}
// here by formData object you can get all data in single code of line
and to do with jquery see this post it has very simple example jQuery Ajax POST example with PHP
Now couple of good Reads
FormData Objects
Ajax : MDN its really good source

How do I insert a cookie data value into a hidden form field?

I would like to be able to take data stored in a cookie and insert it into a hidden form value.
I am storing the data in a cookie using the following:
<script type="text/javascript">
$(function () {
$("#btnCookie").bind("click", function () {
$.cookie("name", $("#txtName").val());
I am able to retrieve the value as plain text on the next page using:
$.cookie("name")
I have a form on the 2nd page that I want this value to be a part of. How can I insert it into the following:
<input type="hidden" name="cookie" />
I have tried this but it doesn't work:
<input type="hidden" name="cookie" value="$.cookie("name")" />
You can do it like this,
var cookie_val = $.cookie("name");
$('input[name=cookie]').val(cookie_val);
<input type="hidden" name="cookie" value="$.cookie('name')" />
The double quotes are causing an error in the HTML.
Try this jquery cookie u can use in php.
value="<?php echo $_COOKIE['name']; ?>"
or use jquery
$('input[name=cookie]').val($.cookie("name"));

javascript set location sending JSON data

What I'm trying to do is the functional equivalent of setting the "location" property in javascript, but I want to send along JSON encoded data to the server. I don't want to use AJAX, I want to completely replace my page contents with whatever the server sends back.
I think I might be able to do what I want by using form.submit by setting the form enctype attribute to application/json, but I don't know how to get my JSON into the form data set. Is it possible to do this?
You could send the JSON as the query component of the URL:
document.location.href = server_url + "?" + encodeURIComponent(json_string);
One way of doing it is with a form like this (not as clean as you would like it to be, but if you do not want to use AJAX your choices are quite limited):
<form action="json.php" method="post">
<input type="hidden" name="json" value="{'x':1}" />
</form>
you could set an input value to stringified JSON when submitting the form:
<form method="post" action="myscript.php" onsubmit="DoSubmit();">
<input type="hidden" id="myjsoninput" name="json" value="{'x':1}" />
<input type="submit" name="submit" />
</form>
function DoSubmit(){
document.getElementById("myjsoninput").value = JSON.stringify({a:'b'});
return true;
}

Categories

Resources