Post "url-from' in a form - javascript

I want to know from which url a form is send. I've tried this, but the result is 'orgUrl' instead of the url where the form is send from.
Anyone an idea what's wrong with this code?
<input type="hidden" name="url" value=orgUrl>
<script>
$(document).ready(function(){
var orgUrl = window.location.href;
});
</script>

You're trying to mix javascript with normal html which is not possible.
So you need to set the value also by javascript after getting the current url like this
<input type="hidden" id="url" name="url" value>
<script>
$(document).ready(function(){
var orgUrl = window.location.href;
$("#url").val(orgUrl );
});
</script>

Related

Changing URL output of User Input with JavaScript

I'm trying to build something simple here:
a user types into an input field a url eg. http://sharepoint.com/human-resources/usa/Lists/testList/EditForm.aspx?ID=666&Source=http%3A%2F%sharepoint.com
.. hits "submit", when the URL gets spit out as a link, changing into: https://sharepointusa.com/en-us/human-resources/usa/Lists/testList/EditForm.aspx?ID=666&Source=http%3A%2F%sharepoint.com
I've been trying unsuccessfully to just spit out the whole URL, losing parameters, so I need a new approach, what is an easy vanilla javascript to just replace http://sharepoint.com/ with https://sharepointusa.com/en-us/ and leave the rest of the URL?
thanks
EDIT: 2 great answers, thank you, I adapted the first answer to my original code, while I play around with the second answer to see how it compares!:
<br>
<input type="text" id="userInput" value="Enter your text here"><br>
<input type="button" onclick="changeText2()" value="change text">
<script>
function changeText2()
{
var input=document.getElementById('userInput').value;//gets the value entered by user
const updatedUrl = input.replace('http://sharepoint.com/', 'https://sharepointusa.com/en-us/');
document.getElementById("link").href = updatedUrl;
document.getElementById("link").innerHTML = updatedUrl;
}
</script>
if you have a variable containing the full original url
const url = 'http://sharepoint.com/human-resources/usa/Lists/testList/EditForm.aspx?ID=666&Source=http%3A%2F%sharepoint.com';
then you can just do
const updatedUrl = url.replace('http://sharepoint.com/', 'https://sharepointusa.com/en-us/');
and updatedUrl will have what you're asking for.
It1 got it right before me! anyways, this is a more advanced representation of how to change it directly from the input fields.
<!DOCTYPE html>
<html>
<body>
<input id="demo" value="http://sharepoint.com/human-resources/usa/Lists/testList/EditForm.aspx?ID=666&Source=http%3A%2F%sharepoint.com">
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var str = document.getElementById("demo").value;
var changed = str.replace("sharepoint", "sharepointusa");
document.getElementById("demo").value = changed;
}
</script>
</body>
</html>

Missing POST parameters in AJAX call result in undefined index warnings in PHP script

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

Write to a text field and simultaneously copy to another textfield

I have 2 textfield with different ids. what I want to achieve is that when I write to textfield1 that content is immediately copied to the second one and if I edit the second one the first one remains unchanged, but also if I go back to first one and edit it, the content is just appended to the second one.
<input type="text" name="field1" id="f1" />
<input type="text" name="field2" id="f2" />
Code :
<script type="text/javascript">
$(document).ready(function(){
$("#f1").keyup(function(){
$('#f2').val($('#f1').val());
});
});
</script>
Try this,
$(document).ready(function () {
$("#f1").keypress(function (e) {
var val = $('#f2').val();
var code = e.which || e.keyCode;
$('#f2').val(val+(String.fromCharCode(code)));
});
});
Live Demo
you can write like this
<script type="text/javascript">
$(document).ready(function(){
$("#f1").keyup(function(){
var f2Text = $('#f2').val() + $(this).val();
$('#f2').val(f2Text );
});
});
</script>
you can also use the Angular JS which is more efficient and easy to use.
AngularJS
Angular JS will help you to develop SPA(Single Page Application).

How to pass Variable from External JavaScript to HTML Form

I have been trying to pass a value from an external javascript file to an HTML form with no luck. The files are rather large so I am not sure I can explain it all but ill try.
Basically a user clicks a link then a js file is initiated. Immediately after a new HTML page loads.
I need this value passed to the HTML page in a form field.
Javascript:
var divElement = function(){
divCode = document.getElementById(div1).innerHTML;
return divCode; };
document.getElementById('adcode').value = divElement();
Afterwards it should be passed to this Form field
HTML Form Field:
<p>Ad Code:<br>
<input type="text" name="adcode" id="adcode"/>
<br>
</p>
Thanks for any help!
Your HTML file needs to reference the JavaScript js file. Have a function in your JavaScript that returns the value that you need. Use JavaScript (I like jQuery) to set the form field to what you need.
JS file:
<script>
var divElement = function(){
divCode = document.getElementById(div1).innerHTML;
return divCode; };
document.getElementById('adcode').value = divElement();
function GetDivElement() {
return divElement();
}
</script>
HTML file:
<p>Ad Code:
<br />
<input type="text" name="adcode" id="adcode"/>
<br />
</p>
<script src="wherever that js file is" />
<script>
window.onload = function() {
document.getElementById('adcode').value = GetDivElement();
}
</script>
Although, really, this might do what you want (depending on what you are trying to do):
<p>Ad Code:
<br />
<input type="text" name="adcode" id="adcode"/>
<br />
</p>
<script src="wherever that js file is" />
<script>
window.onload = function() {
GetDivElement();
}
</script>
Can it be this?:
function divElement(divCode){
return divCode;
}
divElement(document.getElementById('adcode').value);

javascript/jquery to change location.href

This is my HTML
<form id="procurar-novo">
<input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
<input id="procurar-submit" type="button" value="›">
</form>
And this is my jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#procurar').submit(function(e) {
e.preventDefault();
//edited
window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
return false;
});
});
</script>
The ideai is that by clicking on submit, the javascript/jquery will get the #procurar-submit value and add it on the URL and redirect the user.
The _blank still not works
Thanks in advance.
Use window.open with second parameter _blank
window.open('url', '_blank');
Try this also:
<script type="text/javascript">
$(document).ready(function(){
$('#procurar').submit(function(e) {
e.preventDefault();
//edited
window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
return false;
});
});
</script>
Last edit:
<script>
$(document).ready(function(){
$('form#procurar-novo').submit(function(e) {
//e.preventDefault();
//edited
var url = 'http://www.psicotropicus.org'+'/busca'+ encodeURIComponent('&' + $('input[name=procurar]').val());
window.open(url, '_blank');
return false;
});
});
</script>
<form id="procurar-novo">
<input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
<input id="submitsss" type="submit" value="›">
</form>
Please consider names and ids of the form elements :)
Looks like you don't have an action specified on your form tag. Why not just change the second input element from type=submit to type=button. Then you can bind a click event on that button and have full control of what happens next. You don't have to worry about preventing a default submit action. You could do the following:
$(document).ready(function(){
$(document).on('click', '#procurar-submit', function() {
window.location.href = 'http://www.psicotropicus.org/busca'+$('input[name="procurar"]').val();
});
});
To open a new window like on a '_blank' you could change the code to be:
$(document).ready(function(){
$(document).on('click', '#procurar-submit', function() {
window.open('http://www.psicotropicus.org/busca'+$(input[name="procurar"]).val(), '_blank');
});
});
But be careful with pop-up blockers
EDIT
I changed the selector that gets the value of the text field.
I would maybe add a class or id on that text field so it can be identified apart from others. See this fiddle

Categories

Resources