Spacing in HTML textbox - javascript

How do I remove this spacing from the textbox. PS: I've checked and confident that my variable does not contain any spacing to begin with.
At firstpage.php, I changed the php variable '$pcodevar' to javascript variable 'pcode' and pass it to upload.php.
function upload() {
var pcode=" <?php echo $pcodevar;?>";
var uploadwindow = window.open("upload.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
uploadwindow.pcode= pcode;}
At upload.php, i wrote a script to receive the variable and identify it as fid_17.
<script language="javascript" type="text/javascript">
function initInput()
{
document.forms[0].fid_17.value = pcode;
}
</script>
Next still at upload.php,
<body onLoad="initInput()">
<form name="form1" method="post" action="upload.php" enctype="multipart/form-data"/>
Project ID:
<input name="fid_17" id="fid_17" value=""/><br><br>
Upload File:
<input type="text" name="t" placeholder="File name" />
<input class="button blue" type="submit" name="upload" value="Upload/View!"/><br>
<input type="file" name="f" /><br>
</form>
Thank you for helping!

I think you should just trim the 'pcode' value before setting value.
Try to use trim function in php and js.
Also remove the leading space when setting $pcodevar(see below)
var pcode = "<?php echo trim($pcodevar);?>";
pcode = pcode.trim();

I would suggest using .trim() on the "pcode". Please see, http://www.w3schools.com/jsref/jsref_trim_string.asp
If you don't need to support older browsers (i.e. IE8), please avoid using regular expression way

You should use trim in PHP and JavaScript sides.
function upload() {
var pcode="<?php echo trim($pcodevar);?>";
pcode = pcode.trim();
var uploadwindow = window.open("upload.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
uploadwindow.pcode= pcode;}

trim out the value you assigned to fid_17:-
document.getElementById('fid_17').value= pcode.trim()
also console out the value of pcode. hope this will help

Related

php cannot get value from html

I have questions that why my html file cannot connect with php file.
But I am sure that after I click the submit button, value of <input type="hidden" id="t1_response" name="t1_response" value=""> can be given.
However, url doesn't change to php form(like tocsv.php?t1_response=...).
And php gives me an notice :
Notice: Undefined index: t1_response in C:\xampp\htdocs\colors\tocsv.php on line 2
How can I fix it?
<script>
...
function pressSubmit() {
$('#startTrial').hide();
for (var i = 1; i <=3; i++) {
rt = rt + parseFloat(document.getElementById("t"+i+"_rt").value);
};
if (document.getElementById("t1_response").value === "diff") {acc=acc+1};
if (document.getElementById("t2_response").value === "diff") {acc=acc+1};
if (document.getElementById("t3_response").value === "same") {acc=acc+1};
document.write("<div>The average react time: " + rt/3 +" ms</div>");
document.write("<div>Acc Rate:" + acc/3*100+"%</div>");
}
</script>
<style>
...
</style>
<!DOCTYPE html>
<html>
<body>
<h3>Remember the colors</h3>
Press 's' if the two displays are the same. Press 'd' if a color changed (different).<br>
<form action="tocsv.php" method="get">
<input type="hidden" id="t1_response" name="t1_response" value="">
<input type="hidden" id="t1_rt" name="t1_rt" value="">
<input type="submit" id="submitButton" name="submitButton" onclick="javascript:pressSubmit()">
</form>
</body>
</html>
pressSubmit() contains calculating average number and document.write() to display the value to user.
tocsv.php
<?php
echo $_GET["t1_response"];
?>
Error code is clear: you have to define the var t1_response in your php file.
I bet you write:
t1_response = $_POST['t1_response ']
but you need:
$t1_response = $_POST['t1_response ']
The html file you post here is ok.
I have solved the problems.
Thanks everyone's help.
Here, in pressSubmit(), I wrote doucument.write(...), which make the page to be overwritten. Thus, it came out to be unable to get the value and I have no idea why so.
Thus, I use alert to avoid to overwrite the page. And everything works.
Thanks everyone's help again!
.

Using result of javascript query as input for HTML form

Is it possible to directly use the result of a Javascript function as an input value for an HTML form?
<form class="my-form" action="fileUpload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="User_id" value="getValue();">
<input type="submit" value="Submit"/>
</form>
This is clearly not correct, but I hope it communicates what I am trying to do. I would like the returned result of JS function getValue(); to act as the input value.
In that implementation, no it is not possible to equate the value attribute inside the input tag to a JavaScript function.
According to w3.org, the value attribute can only equal
String without line breaks
Any string that contains no line feed
(U+000A, “LF”) or carriage return (U+000D, “CR”) characters.
I am not sure what is inside the getValue() function, but you can call a click event handler when the submit button is clicked and run that getValue() function.
Ex.
<form class="my-form" action="fileUpload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="User_id">
<input type="submit" value="Submit" onclick="getValue();"/>
</form>
I hope it guides you well.
While it is technically possible to do something like this:
<script>
function getValue(){ return "foo"; }
document.write("<input type='hidden' name='User_id' value='" + getValue() + "' />");
</script>
That is typically frowned upon as there are scoping issues and page rendering implications. The more accepted way would be to do something more like this..
function getValue(){ return "bar"; }
window.addEventListener("load", function(event){
document.querySelector("input[name='User_id']").value = getValue();
});
or potentially at form submit or submit button click with something like:
function getValue(){ return "bar"; }
document.querySelector("input[type='submit']").addEventListener("click", function(){
document.querySelector("input[name='User_id']").value = getValue();
});
Though I am not keen on it myself, it would be possible to do the same as above with:
<input type="submit" value="Submit" onclick="setUserId();"/>
Then later in say a end of body script block do:
function getValue(){ return "bar"; }
function setUserId(){
document.querySelector("input[name='User_id']").value = getValue();
}

How to copy and output text from another textbox with Javascript?

<input type="hidden" id="prevTicketNo" value="6"/>
<script>
var ticketNo = document.getElementById(prevTicketNo).value +1;
document.getElementById('currentTicketNo').value = ticketNo;
</script>
<input id="currentTicketNo" value=""/>
What I am trying to do:
The prevTicketNo is a value captured from somewhere else. I need that to load as a hidden field so I used type="hidden". Once the value in this textbox is loaded, I need to +1 so that the number increases for my current ticket.
Is the right approach?
You must change the value of the first input to integer.
var ticketNo =parseInt((document.getElementById('prevTicketNo').value),10)+1;
document.getElementById('currentTicketNo').value = ticketNo;
JSBin
Javascript:
var hiddenVal = document.getElementById("prevTicketNo");
var newTicketNo = Number(hiddenVal.value) + 1;
alert(newTicketNo);
HTML:
<input type="hidden" id="prevTicketNo" value="6"/>
If you can get the previous ticket number and output it into a hidden field (obviously via some kind of server side script), why can't you just output it directly into your text input?
eg. In PHP write this:
<input id="currentTicketNo" value="<?php echo $prevTicketNo + 1; ?>" />

Pass variable to HTML form Javascript

Please excuse my inexperience as I am not a programmer just someone who dabbles at trying to make something work. I'm not sure of the correct terminology and complicated explanations will go straight over my head!
In essence I am trying to get part of the URL of a web page passed to a simple Form that is linked to a shopping cart. i.e. how do I get the filename into the form where I have xxxxxxx. Is it possible in Javascript?
<script type="text/javascript">
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
document.write (filename);
</script>
<form action="http://www.mywebspace.com/cf/add.cfm" method="post">
<input type="hidden" name="userid" value="12345678">
<input type="hidden" name="product" value="xxxxxxx">
<input type="hidden" name="price" value="5.00">
<input type="Submit" value="Buy now!">
</form>
I've provided a snippet code that will work with your current HTML structure. Though I do suggest you give the product field an id to prevent the necessity to loop and search elements:
var url = window.location.pathname,
filename = url.substring(url.lastIndexOf('/')+1);
fields = document.getElementsByTagName('input');
for(var i = 0; i < fields.length; i++){
if(fields[i].name == 'product') {
fields[i].value = filename;
break;
}
}
If the form only exists once on a given page, this is an easy solution:
Change it to be:
<input type="hidden" id="productField" name="product" value="xxxxxxx">
In your javascript,
document.getElementById('productField').value = filename;
Yes this is possible.
Instead of doing document.write you need to update the form. Assuming your filename value is currently correct:
//js
document.getElementById( "name-of-file").value = filename;
<!- html -->
...
...

javascript getting the value of a text box

I have this text box here...
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
and I also have this submit
<input type="submit" name="btnSearch" value="Search" onclick="location.href='http://www.website.com/search/';" id="btnSearch" class="buttonSearch" />
what I am trying to do is add whatever is in the text box in my
onclick="location.href='http://www.website.com/search/';"
so it would look like this..
onclick="location.href='http://www.website.com/search/what ever the user searches';"
how would I go about doing this, I have been googling my little heart out.
Please avoid mixing JavaScript and HTML. You can remove onclick attribute and replace it with this in plain JavaScript somewhere after the DOM has loaded:
document.getElementById('btnSearch').onclick = function() {
var search = document.getElementById('search').value;
var searchEncoded = encodeURIComponent(search);
window.location.url = "http://www.website.com/search/" + searchEncoded;
}
Also remember about escaping the search box, e.g. using encodeURIComponent(). Here is a working jsfiddle example.
This should work:
onclick="location.href='http://www.website.com/search/'+document.getElementById('search').value;"
But I wouldn't ever write that in one of my project as writing script directly on tags is a bad practice.
Here is a working jsfiddle
I moved the event handler out of the button as it is more maintainable. Also I encode the search query so that it gets to the server properly.
var search = document.getElementById('search');
var submit = document.getElementById('btnSearch');
submit.addEventListener('click', function(e) {
var searchValue = encodeURIComponent(search.value); // encode the search query
window.location.href = 'http://www.website.com/search/' + searchValue ;
});
You can add it to the onclick event like so
document.getEelementById("btnSearch").onclick = function(){
location.href='http://www.website.com/search/' + document.getEelementById("search").value;
}
edit: aaaaand too slow... oh well. At least this is not inline.
You would be better off using the < script> tag for this task. Example:
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
...
<input type="submit" name="btnSearch" value="Search" id="btnSearch" class="buttonSearch" />
<script type="text/javascript">
var button= document.getElementById('btnSearch');
button.onclick= function(){
var text= document.getElementById('search').value;
location.href='http://www.website.com/search/'+text;
}
</script>
However, you should try to 'clean' a little the text from the textbox so when you append it to the url you get a valid url. You should trim the text, then search for special characters and escape them, etc.

Categories

Resources