I have 2 pages, one called details.page and the other, maps.page
In the first page, I have a declared a search input like so :
<form method="get" id="form-search" data-ajax="true" action="maps.page">
<input type="search" name="search" id="search" value=""/>
</form>
And in my second page, maps.page, I have one declared like so :
<form action="maps.page">
<input type="search" name="search" id="search-field" value=""/>
</form>
Now, I was assuming that when I type something in the search bar from my first page and hit enter, the search bar on maps.page would be populated with the value previously entered.
I am correctly redirected, but the search bar is empty.
What am I doing wrong ?
Thanks in advance for your help.
EDIT : Also, I see in the URL that it seems to be working, because I can see what I searched in the URL like this : /maps.page?search=something
You have a few option in how to do this without using a back end script.
1) You can set the form method to GET so that the variables are passed in the address bar, then grab them on the other side using a script like the one below (this actually reads the address and then parses it for variables). After that, you can put that value in your input field.
var getVars = new Array();
var locvartemp = ( window.location.href.indexOf( "?" ) + 1 ) ? window.location.href.substr( window.location.href.indexOf( "?" ) + 1 ) : "";
locvartemp = locvartemp.split( "&" );
for( var x = 0; x < locvartemp.length; x++ ) {
var lvTempVar = locvartemp[x].split( "=" );
getVars[ unescape( lvTempVar[0] ) ] = unescape( lvTempVar[1] );
}
2) You can use the jQuery cookie plugin to set the value as a cookie prior to submitting the form and then read it on the other side and set it to your input field.
jQuery.cookie("myCookie", document.formName.myFieldName.value);
Let me know if you need more details.
The value is not automatically filled. You need to print it from the server side.
<form action="maps.page">
<input type="search" name="search" id="search-field" value="<insert value>"/>
</form>
I was assuming that when I type something in the search bar from my first page and hit enter, the search bar on maps.page would be populated with the value previously entered.
That is what you are doing wrong.
The field will only be populated if you set the value attribute (or set the DOM value property after the element has been added to the DOM).
This is generally done using a server side process. The specifics depend on the language you are using to create that process, but do watch out for XSS as including unfiltered, unescaped user input will create a security hole.
Related
I set value of my input type hidden in ajax response and then I wanna display my page with set content.
Ajax :
var JSONObject = JSON.parse(data);
$("#hiddenSearchedTextValue").val(JSONObject[1]);
window.location = JSONObject[0]; // redirect on my page
on My page, where I wanna display my set value:
<script>
var value = "";
window.onload = function () {
$ = jQuery;
value = $("#hiddenSearchedTextValue").val();
}
</script>
<div class="container">
<h1> Searched for: <script>document.write(value)</script></h1>
</div>
<input type="hidden" id="hiddenSearchedTextValue" value="">
Now it returns nothing. Anyone have some advice for me, please? I tried to read something about global scope, but nothing helped. Thank you
Unless I'm misunderstanding from your code snippets you are getting a response from Ajax and then redirecting the page? If this is the case then you loose your value when the page is re-loaded i.e. once you have your response.
I think you need to pass the value as a parameter in your url, then set it on page load
I think you want to just update the value and then reset the input, something like (in PHP):
value = $("#hiddenSearchedTextValue").val();
.....
....
<input type="hidden" id="hiddenSearchedTextValue" value="' . $_GET['searchString'] . '">
(with some appropriate security checking etc). Although you might as well just do this in the h1 tag. Maybe seeing some more of your code and your Ajax would make it easier to understand how you think it should work
Example is here.
I'm moving countries from one select box to another, when I submit the form I want the values in the right text box to be used by php. When I give the right box a name for a php array, like ToLB[] the Javascript fails. How can I handle this so that the submitted values will be used by php processes?
in forms it's a typical process to use an action and a method. This is declared within the form tag. For example
<form name='phpSend' method='post' action='myActions.php'>
Now when your form is submitted it is instantly 'posted' to the url myActions.php and is automatically declared as a $_POST array.
The names of the inputs become the array keys and the value becomes the value.
A basic method is to do a procedural action. Meaning if you leave the action attribute blank, the action will submit the form to the page you're already on and use if statements to check if the form has been submitted.
if(isset($_POST)&&isset($_POST['someName'])){
//form submitted!
}
Now, I've never used a multiple select before so you may want to var_dumb() or print_r() your output to double check but my guess is it'll be an Array within the $_POST array.
Submitting with javascript
if(document.getElementByName('phpSend').submit){//or however your checking
var selected=[];
for(var e=0;e<document.getElementByTagName('select').options.length;e++){
if(document.getElementByTagName('select').options[e].selected==true)selected[e]=document.getElementByTagName('select').options[e].value;
}
//then add the selected array to your preferred method of sending your data to your php document
}
I often encounter a situation like this and I usually submit the select options as a string.
Add an hidden field to your form:
<input type="hidden" name="valuesToSubmit">
<script type="text/javascript">
var selectobject=document.getElementById("myselect");
var myValues = "";
for (var i=0; i<selectobject.length; i++){
myValues = myValues + selectobject.options[i].value + ",";
}
document.form.valuesToSubmit.value=myValues;
</script>
In the PHP scripts that receive the posting data you can use the explode function to turn your sting into an array and then iterate on it ... depends what you need to do. Remember to remove the last unwanted ","
I have taken a look at your code.
There are some missing parts and amendments to do to make it works.
I didn't test the amendments but I think they should work.
1)you have to add the hidden field inside the form.
<form name="combo_box" action="test.php">
<input type="hidden" name="valuesToSubmit" value="">
2)Then you have to give the id to the select box because you use the id to reference the object like this var selectobject=document.getElementById("ToLB");
<select multiple size="10" name="ToLB" id="ToLB" style="width:150">
3)Change th submit button with a normal button so you can force the submit only when the loop is ended and the values have been passed into the hidden field.
<input type="button" name="submit" id="submit" value="Submit" onClick="updateValues()">
4)Force the submit at the end of the javascript
function updateValues(){
var selectobject=document.getElementById("ToLB");
var myValues = "";
for (var i=0; i<selectobject.length; i++){
myValues = myValues + selectobject.options[i].value + ",";
}
document.form.valuesToSubmit.value=myValues;
document.combo_box.submit();
}
I have a drop down list in my php page that is hyperlinked to different pages contained on different servers; html, asp.net pages etc.
The URL of these pages do not contain the same domain name as the drop down list. Therefore, in order to prevent the user from directly entering the URL in the address bar, I would like to post a variable when the user clicks an item in the list.
This variable will be sent along the hyperlinked URL. The asp.net page will check whether the variable is received along with the request, if yes the page will load otherwise the asp.net page will redirect the user to my home page.
My question: What is the process of posting a variable? Where in the hyperlink does this variable need to be included. I am totally lost.
EDIT: I tried to post through form.submit
<li><form id="sampleForm" name="sampleForm" method="post">
<input type="hidden" name="total" id="total" value="">
<a onclick="setValue();">ELMSTest</a>
</form></li>
<script type="text/javascript">
function setValue(){
document.sampleForm.total.value = 100;
document.forms["sampleForm"].submit();
}
</script>
I dont know how to proceed from here.
Try this as you are using the POST action. Which you are by virtue of having `method="post" on your tag.
`<form id="sampleForm" name="sampleForm" method="post">`
Because you have no action="script.php" it will send your inputs to the script that generated this page and run it again. So assuming this is called script.php...
In the PHP code of script.php the data will be delivered to you in the $_POST array.
<?php
if ( isset($_POST['total'] && $_POST['total'] == 1 ) {
// I have a foo variable with the value of one. So do something with it.
}
If you want to use the get action or add variables to a hyperlink as:
www.domain.net/script.php?foo=1&bar=2
The ? starts the list of variables, the querystring and each variable is seperated by an & if you want to pass more than one.
And of course the variables are passed in the $_GET array to your PHP code.
<?php
if ( isset($_GET['foo'] && $_GET['foo'] == 1 ) {
// I have a foo variable with the value of one. So do something with it.
}
if ( isset($_GET['bar'] && $_GET['bar'] == 2 ) {
// I have a bar variable with the value of two. So do something with it.
}
I want to copy the content of a sharepoint form field to a variable using Javascript.
Eg. I have a field named "Language" in my sharepoint edit form. Now I just want to get the value of that field to a varaible x.
Please help.
BR
It depends on the type (e.g. user, lookup, multilookup, text, note, etc.) of field. I am using jQuery in my custom list forms and the name of the field for any given content type will be added to the id of the corresponding html control with the text 'Field' appended to it. However, like any typical asp.net control, the id of the html form control rendered to the client will reflect its control hierarchy so you have to account for that when searching for a field. anyhow, the following works for me if i need to reference fields in my custom forms. ** notice the +Field which implies that the name of the field is concatenated with 'Field'
var $titleField = $('input[id*=TitleField]');
var $lookupField = $('select[id*=Name_Of_Field+Field]')
var $multiLookUpCandidate = $('select[id*=Name_Of_Field+Field][id*=SelectCandidate]')
var $multiLookUpResult = $('select[id*=Name_Of_Field+Field][id*=SelectResult]')
var $note = $('textarea[id*=Name_Of_Field+Field]');
You can pick up on the trend by viewing source and seaching for your contenttype/sitecolumn field name. You will find it in an html form control id. use that information to learn how to reference other field types.
Without posting your code its very difficult to understand what you want to do.... to get a value from a form you can do the following :
HTML
<form id="myform">
<input id="myinput" type="text" value="something" />
</form>
JavaScript:
var myinputval = document.getElementById("myinput").value;
myinputval would be "something" in this example
Demo : http://jsfiddle.net/Qk6FZ/
This might help:
http://depressedpress.com/2012/09/24/obtaining-a-javascript-reference-to-a-sharepoint-field/
Using that function you'd get the reference using something like:
var LanguageFld = getFieldRef("Language");
Once you have the refernece it's easy to get the value:
var CurValue = LanguageFld.value;
Hope this helps!
I need to clear the default values from input fields using js, but all of my attempts so far have failed to target and clear the fields. I was hoping to use onSubmit to excute a function to clear all default values (if the user has not changed them) before the form is submitted.
<form method='get' class='custom_search widget custom_search_custom_fields__search' onSubmit='clearDefaults' action='http://www.example.com' >
<input name='cs-Price-2' id='cs-Price-2' class='short_form' value='Min. Price' />
<input name='cs-Price-3' id='cs-Price-3' class='short_form' value='Max Price' />
<input type='submit' name='search' class='formbutton' value=''/>
</form>
How would you accomplish this?
Read the ids+values of all your fields when the page first loads (using something like jquery to get all "textarea", "input" and "select" tags for example)
On submit, compare the now contained values to what you stored on loading the page
Replace the ones that have not changed with empty values
If it's still unclear, describe where you're getting stuck and I'll describe more in depth.
Edit: Adding some code, using jQuery. It's only for the textarea-tag and it doesn't respond to the actual events, but hopefully it explains the idea further:
// Keep default values here
var defaults = {};
// Run something like this on load
$('textarea').each(function(i, e) {
defaults[$(e).attr('id')] = $(e).text();
});
// Run something like this before submit
$('textarea').each(function(i, e){
if (defaults[$(e).attr('id')] === $(e).text())
$(e).text('');
})
Edit: Adding some more code for more detailed help. This should be somewhat complete code (with a quality disclaimer since I'm by no means a jQuery expert) and just requires to be included on your page. Nothing else has to be done, except giving all your input tags unique ids and type="text" (but they should have that anyway):
$(document).ready(function(){
// Default values will live here
var defaults = {};
// This reads and stores all text input defaults for later use
$('input[type=text]').each(function(){
defaults[$(this).attr('id')] = $(this).text();
});
// For each of your submit buttons,
// add an event handler for the submit event
// that finds all text inputs and clears the ones not changed
$('input[type=submit]').each(function(){
$(this).submit(function(){
$('input[type=text]').each(function(){
if (defaults[$(this).attr('id')] === $(this).text())
$(this).text('');
});
});
});
});
If this still doesn't make any sense, you should read some tutorials about jQuery and/or javascript.
Note: This is currently only supported in Google Chrome and Safari. I do not expect this to be a satisfactory answer to your problem, but I think it should be noted how this problem can be tackled in HTML 5.
HTML 5 introduced the placeholder attribute, which does not get submitted unless it was replaced:
<form>
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">
</form>
Further reading:
DiveintoHTML5.ep.io: Live Example... And checking if the placeholder tag is supported
DiveintoHTML5.ep.io: Placeholder text
1) Instead of checking for changes on the client side you can check for the changes on the client side.
In the Page_Init function you will have values stored in the viewstate & the values in the text fields or whichever controls you are using.
You can compare the values and if they are not equal then set the Text to blank.
2) May I ask, what functionality are you trying to achieve ?
U can achieve it by using this in your submit function
function clearDefaults()
{
if(document.getElementById('cs-Price-2').value=="Min. Price")
{
document.getElementById('cs-Price-2').value='';
}
}