I'm very confused. Can anyone help me?
Here is the code:
index.php =>
<html>
<head>
<script src="jquery-1.2.6.min.js"></script>
<script>
function chk(){
var name = $('#name').val();
$.ajax({
type:"post",
url:"test.php",
data:{name:name},
cache:false,
success:function(html){
$('#msg').html(html);
}
});
return false;
}
setInterval (function chk() , 1000);
</script>
</head>
<body>
<form>
<input type="text" id="name">
<input type="submit" value="submit" onclick="return chk();return false;">
</form>
<p id="msg">Loading</p>
</body>
</html>
and test.php =>
<?php
$name = $_POST['name'];// $name is constant for each request that submited from ajax($name is a parameter)
$api -> new server_data();
$results = $api ->show($name);
print_r($result);//This data updates from server in every second
=======================================================================
I'm trying to connect to an API, but in that API, data changes every second and I have to see these changes. On the other hand, I have to set default values with the form.
But the problem is here that each time the form submits, the posted value in test.php will be null, and the ajax request will not work.
Can anyone help me?
Try adding a name attribute to your name input box element.
<input type="text" id="name" name="name">
Your PHP $_POST['name'] variable is looking for an input element with the html attribute name="name", whereas you only had an html attribute id="name".
Source: PHP: Dealing with Forms
Related
Situation:
The input value is empty and the type is hidden.
I type ?hiddenname=007 at url
I click the button"submit" and cause function call()..
Expect:
The system fills in the value into the input according to ?hiddenname=007 at url using function call()
after that, the system send the form with value 007 to the server.
Current result:
the system still send the form with empty value.
url
localhost/index.html?hiddenname=007
index.html
<!DOCTYPE html>
<html>
<head>
<script>
function call(){
document.forms["form1"].hiddenname.value=hiddenname;
console.log("function run");
}
</script>
</head>
<body>
<form name="form1" action="end.php">
<input type="hidden" id="hiddenid" name="hiddenname" value="" />
<input type="submit" id="send" onclick="call()"/>
</form>
</body>
end.php
<?php
echo $_GET['hiddenname'];
?>
This will obtain on window load the value of hiddenname from the URL query string, then set the value of the hiddenid input:
window.onload = function () {
// get the search params from the window's URL
const urlParams = new URLSearchParams(window.location.search);
// get the value of 'hiddenname'
const myParam = urlParams.get('hiddenname');
// store this value in the input with id="hiddenid"
document.getElementById('hiddenid').value = myParam;
};
Add return true; to the call() function.
Add onsubmit="return call();" to the form attributes.
And remove onclick function from the submit button.
I'm new with Google-Sheet and I didn't use Javascript for a few years.
I'm trying to create a form that can write some data in a sheet. My form looks OK. But when I click the submit button, the form disappear and nothing happens on my sheet. My browser display just an blank tab.
For now, I tried to make work a form with a single input but nothing works. I don't see any error msg in my browser...
I have ( my .gs) :
function doGet(request) {
return HtmlService.createHtmlOutputFromFile('HTMLForm');
}
function processForm(form) {
var url = "https://docs.google.com/spreadsheets/d/1dEJEuWmG-4Z2geqz9LroTsIbq6LwMSZgVft5uo5vQxw/edit#gid=0";
var sheet = SpreadsheetApp.openByUrl(url);
var x = sheet.getSheetByName("DATA");
x.appendRow([form.Thing_ID]);
}
And my form :
<!DOCTYPE html>
<html>
<script>
function mySubmit(form) {
google.script.run.processForm(form);
document.getElementById("myForm").reset();
}
</script>
<head>
<base target="_top">
</head>
<body>
<form id="myForm" onsubmit="mySubmit(this)">
<label>Thing's ID</label>
<input type="text" id="Thing_ID" placeholder="ID" required/>
<button type="submit"id="submit">Submit</button>
</form>
</body>
</html>
I need that the value I type in the input is written in my spreadsheet (sheet "DATA"). If you could tell me what function I missed/missused.
Thanks
I am using AJAX for the first time so I write a code and I followed a tutorial, but when I try to send my post with ajax I am getting undefined index and I really don´t know why, I tried to search answer hear but since I am using AJAX and javascript for the first time, the code there didn´t tell me anything.
Here is my code, I would be really greatful for any help, thank you.
js method
function post() {
var name = $('meno').val();
var priez = $('priezvisko').val();
$.post( "aktualizuj.php", {
'meno': name,
'priezvisko': priez
},
function (data) {
$('#result').html(data);
}
);
}
html form...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="prihlasenie.js"></script>
</head>
<body>
<form>
<label for="meno" >Meno:</label><input type ="text" name="meno" id="meno" value ="meno" ><br>
<label for="priezvisko" >Priezvisko:</label><input type ="text" id="priezvisko" name="priezvisko" value ="priezvisko" ><br>
<input type="button" value="ulozZmeny" onclick="post()" >
</form>
<div id="result"></div>
</body>
</html>
this where I should get from ajax/javascript
session_start();
require "pripojenie.php";
$meno = $_POST['meno'];
$priezvisko = $_POST["priezvisko"];
$login = $_SESSION['login'];
jquery doesn't serialize key:value pairs where value is undefined, i.e.
$.post(url, { foo:undefined });
results in jquery not sending any POST parameter.
The problem is because of the following lines,
var name = $('meno').val();
var priez = $('priezvisko').val();
This would look for an element meno and an element priezvisko (and then their values) as if you had a document like
<p>
<meno>...</meno>
<priezvisko>...</priezvisko>
</p>
But you're looking for elements that have meno/priezvisko as value of their id attribute(s):
var name = $('#meno').val();
var priez = $('#priezvisko').val();
You should nevertheless check the existince of the parameters in your php script. Nothing prevents another script/bot/user to invoke your script with different parameters or no parameters at all.
see also:
http://docs.php.net/isset
http://docs.php.net/filter
Because of a Flex bug uploading files in a secure environment, I'm attempting to hack together a workaround for this in javascript.
To do so, I'm attempting to create a hidden form in javascript, to which I'll attach a file and some xml meta data, then send it to the server in a multipart form post. My first thought is to get this to work in HTML and then port this javascript code into my Flex project.
My first problem is attaching the file to the hidden form in javascript. I'm doing something wrong here. I'm pretty inexperienced with javascript so if there's a better way to do this, I'm eager to learn.
Here's the code I'm current playing with.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hidden form post demo</title>
</head>
<body>
<script>
//helper function to create the form
function getNewSubmitForm(){
var submitForm = document.createElement("FORM");
document.body.appendChild(submitForm);
submitForm.method = "POST";
submitForm.enctype = "multipart/form-data";
return submitForm;
}
//helper function to add elements to the form
function createNewFormElement(inputForm, inputType, elementName, elementValue) {
var inputElement = document.createElement("INPUT");
inputElement.name = elementName;
inputElement.type = inputType;
try {
inputElement.value = elementValue;
} catch(err) {
alert(err.description);
}
inputForm.appendChild(inputElement);
return inputElement;
}
//function that creates the form, adds some elements
//and then submits it
function createFormAndSubmit(){
var submitForm = getNewSubmitForm();
var selectedFileElement = document.getElementById("selectedFile");
var selectedFile = selectedFileElement.files[0];
createNewFormElement(submitForm, "HIDDEN", "xml", "my xml");
createNewFormElement(submitForm, "FILE", "selectedFile", selectedFile);
submitForm.action= "my url";
submitForm.submit();
}
</script>
<div id="docList">
<h2>Documentation List</h2>
<ul id="docs"></ul>
</div>
<input type="file" value="Click to create select file" id="selectedFile"/>
<input type="button" value="Click to create form and submit" onclick="createFormAndSubmit()"/>
</body>
</html>
You can see, I have a try/catch block in createNewFormElement. An exception is being thrown there, but the message says "undefined".
In FireBug, I can see that the elementValue is set to a File object, so I'm not really sure what's going on.
For security reasons, you cannot set the value attribute of an input[type=file]. Your current code doesn't need JavaScript, and can be written using pure HTML:
<form method="post" enctype="multipart/form-data" action="myurl">
<input type="file" value="Click to create select file" name="selectedFile" />
<input type="hidden" name="xml" value="my xml" />
<input type="submit" value="Click to create form and submit" />
</form>
If you want to, it's possible to dynamically add additional non-file form elements, by binding an event to the onsubmit handler.
<form ... onsubmit="addMoreinputs();" id="aForm">
...
<script>
function addMoreInputs(){
var form = document.getElementById("aForm");
// ...create and append extra elements.
// once the function has finished, the form will be submitted, because
// the input[type=submit] element has been clicked.
}
add
var dom=document.getElementById("formdiv");
dom.appendChild(submitForm);
in your createFormAndSubmit function.
and add <div id="formdiv" /> on your page.
Suppose I have the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#form1').submit(function(){
// Let's see the values
alert($(this).serialize());
$.post($(this).attr('action'), $(this).serialize(), function(data){
// Do something on callback
});
return false;
})
});
</script>
</head>
<body>
<form action="http://example.com/bla" method="POST" id="form1">
<input type="hidden" name="ipt1" value="1"/>
<input type="submit" name="sbt" value="2"/>
</form>
</body>
</html>
When I serialize the form's values the value of the input type submit clicked is not there. How do I handle this kind of situation when ajaxifying my forms?
In non-ajax forms the value of the submit button is only sent with the form, if it is clicked. So if you want to mimic this behaviour with ajax you have to do it something like this:
$("#submit_button").click(function() {
var data = $("#my_form").serialize();
data += data.length ? "&" : ""; // check if empty
data += escape($(this).attr("name"))+"="+escape($(this).val());
// ...
return false;
});
This appends the serialized data of the submit button to the serialized form data.
This is by design. the .serialize() method does not serialize inputs of type submit.
Unfortunately the way you have it you would not be able to access the source of the event. Your best bet is to wire all the submits, and then append the source data like this:
$('input:submit').bind('click', function(){
var data = $("#form1").serialize();
data += "&"+escape($(this).attr("name"))+"="+escape($(this).val());
alert(data);
$.post($('#form1').attr('action'), data, function(data) {
//do something
});
return false;
});
I am using the following solution:
<input type="radio" name="action" value="action_1" style="display:none"></input>
<button type="submit" onclick="this.previousElementSibling.checked=true" >Do Action 1</button>
You repeat this for any number of choices (name, value), and the form is submitted as soon as you choose one.
Make sure the page is reloaded after use.