on my html page I do form action after a button has been pressed:
<form action="/example.php" method="POST">
how do I append that url so I can use input from a textbox as well?
what I want to do is redirect user to a specific url
/example.php?id=inputfromtextbox
With php you can directly interpret the value from the textbox that you have just by accessing it with post:
$textVal = $_POST["someInput"];
And even redirect to another page with a constructed url:
header("Location:example2.php?id=$textVal");
But it's not a very good idea, because if you already have the value just use it.
With Javascript you can directly navigate to the url you want when the user submits the form. First you must handle the form submission with the onsubmit event:
<form id="form1" action="/example.php" method="POST" onsubmit="return submitFunc()">
Then in the function you would do:
function submitFunc(){
var textVal = document.getElementById("someInput").value;
var formAction = document.getElementById("form1").getAttribute("action");
window.location.href= formAction + "?id=" + textVal;
return false;
}
The simplest of all would actually be to change the method type to GET which would already encode the form values in the url itself.
Related
Newbie question no.2, sorry in advance!
I have somehow managed to create a form with various selection boxes, one of which is the email that the form should send the email to (using mailto:). I've managed to get the value of the email field stored as a variable ("emailtouse"), and now I am trying to use the variable in the "mailto:" code but it's not having it, I either get blank or the variable name itself when I attempt the process.
Thanks
Ian
***variable setting within script in header***
var emailtouse = "mailto:"+emailgoto[value]
***form action***
<form action='+emailtouse+'?
cc=u16#myleague.co.uk&subject=Match%20Postponement/%20Cancellation%20Request" method="post"
enctype="text/plain">
Even if your variable is updated, the "action" is not updated after the variable changes, so it contains the original value, calculated upon rendering the page.
Please see the following CodePen example on how to update the form action before submit:
<form
id="form1"
onsubmit="return updateAction(this)"
action="javascript:;"
method="post">
<button type="submit">Do it!</button>
</form>
... and the JS to update the form action, and to test that it really worked:
let emailtouse = "testemail#somewhere.com";
function updateAction(element) {
element.action =
emailtouse +
"&cc=u16#myleague.co.uk&subject=Match%20Postponement/%20Cancellation%20Request";
checkIfItReallyWorks();
return false; // change to true to submit!!!
}
function checkIfItReallyWorks() {
let form = document.getElementById("form1");
alert(form.action);
}
The above code on CodePen: https://codepen.io/cjkpl/pen/vYxPJQd
I would like to click a button and have it go to a link that concatenates mypage.html with the value entered in the search box, but it doesn't seem to recognize it as a variable. What can I do to get the value of the text box?
<html>
<form role="search" action="mypage.html/'#searchterm'">
<input type="text" placeholder="Search" id="searchterm">
<button type="submit">Search</button>
</form>
</html>
Change the form element to this:
<form role="search" id="myForm" action="mypage.html">
The javascript (this is jQuery) would be something like this:
$( "#myForm" ).submit(function( event ) {
// Get the search term
var searchTerm = $('#searchterm').val();
// Append the search term to the root URL
var url = "mypage.html/" + searchTerm;
// Redirect the page to the new URL
window.location.href = url;
// Prevents the default behavior of the form
event.preventDefault();
});
It depends on how you would like to achieve this, you can send it directly using PHP, or you can send it using javascript and AJAX to a PHP page. As you can see in this small tutorial you can send the value of the entered input. AJAX will avoid the page from being refreshed while you search the data, so it will look better. It all depends on what you would like to achieve.
Please take into account that the value of the input cannot be sent on the ¨action¨ property of the form.
Thanks to everyone who submitted answers, I actually figured this one out.
<html>
<input type="text" id="myInput">
<button onclick="go()">Click me</button>
<script>
function go(value)
{
window.open("mypage.html/" + document.getElementById('myInput').value)
}
</script>
</html>
I've the problem that I want to use a payment system for my website for which I need to setup a system by which users get redirected to a url. This url needs to contain their own username on the location of the text [USER_ID]. The problem is that the url is built up like: &uid=[USER_ID]&widget=m2_1 How can it get the [USER_ID] to change to exactly the same thing the user entered in a form before:
<form>
User: <input type="text" name="url1" id="url1" value=""><br>
<input type="submit" name="submit" value="Goto URL" onclick="redirect()">
</form>
And use the text the user submitted in the form box to get it on the place of [USER_ID]?
This approach uses jquery's val() to retrieve the value from the form input, then it concatenates it to the url. I hope you are doing some sort of user validation...
function redirect()
{
...
var userId = $("#url1").val();
var url = "redirect" + "&uid=" + userId + "&widget=" + widget;
...
}
In the redirect function that you are using, you can extract the data of the input box and redirect the user as
window.location = yoursite.com/yourpage.php?user_id=getElementById('url1').value;
If you attach an action attribute to the form tag say : action='submit.php', and also attach form tag method='post'. Also, add a then in the file 'submit.php' you would use the following code (indexed by the name attribute of the input tag). The last line is how to do a redirect in php.
<?php
//submit.php
$root = 'www.foo.bar/';
$user = $_POST['user'];
$url= $root.'&uid=[$user]&widget=m2_1';
header('Location: $url');
?>
checkout:
http://myphpform.com/php-form-tutorial.php
also, if you prefer to use javascript or jQuery you can use ajax to post to the server and get the response.
Stage
Suppose an HTML page in some URL (i.e. http://mysite.com/registry.html) and this HTML file contains a HTML form, like this:
<form action="/">
<input name="firstname">
<input name="lastname">
<textarea name="message"></textarea>
</form>
If I want to prefill this form how can I do this?
Maybe I thought that I can prefill this form on URL request. But I do not know if it is possible.
Restriction
I do not have access to mysite.com server nor registry.html.
Maybe with some JavaScript sorcery, load the page (http://example.com/registry.html) via AJAX:
function loadPage()
{
jQuery.ajax({
type: "GET",
url: "http://example.com/registry.html",
success: successFn
});
}
function successFn(data)
{
var result=jQuery(data).find("#idOfTheInput").html()
//modify the default value
//re attach the input into the html
//render the html
}
The rest is up to you; dig into the dom and put the values you want.
You can try to pass parameters by the url.
Something like this:
http://test.com?param1
This url is passing a parameter (param1), so you can set up the members of this form to be able to receive these parameters.
Regards,
Otacon.
I try to create a tab Zimlet that contains a HTML form. I just want to now how I can handle submit button in my form or how can I submit a form with ajax toolkit.
Let me have a general suggestion...
Try to do everything base on zimbra standards
You can check and download examples to be familiar with the default way to do the different jobs...
Back to your question, how is your form made? is it a normal html form or created dynamically by javascript?
If html, just set the onclick of your submit form to the zimlet's function and define whatever you wanna do inside that function
<input onClick="yourzimlet.prototype.OkFunction();" type="button" >
yourzimlet.prototype.OkFunction= function(){
//do somthing...
}
if in javascript, you have (at-least) two ways
1-using normal onclick
var formTag = document.createElement("form");
//add form elements to formTag...
var inputTag = document.createElement("input");
inputTag.type= 'button';
inputTag.setAttribute("value", "submit ... ");
inputTag.onclick = function() { yourzimlet.prototype.OkFunction();}
formTag.appendChild(inputTag);
yourzimlet.prototype.OkFunction= function(){
//do somthing...
}
2-using zimbra javascript API
Instead of having a form with normal onclick, better (depends on your situation) to create a form dynamically using javascript and add a dwtButton as submit button
http://files.zimbra.com/docs/zimlet/zcs/7.2.0/jsdocs/symbols/DwtButton.html
You can define a listener for the form's submit button and then do whatever you want to do in your listener function
In all conditions you can have access to the form's elements and their values by their id