Develop Reference

Remove query string "?" in HTML form method GET

I have a simple search form of Google Images that open in a new window. When I want to change the form parameters to Unsplash (that don't use query strings on their URL search) the form continue sending query string ;(
HTML
<input type="radio" id="google" name="image" onclick="googleImages();" checked/>
<label for="google">Google Images</label>
<input type="radio" id="unsplash" name="image" onclick="unsplash();"/>
<label for="unsplash">Unsplash</label>
<form id="form" method="GET" action="https://www.google.com/search?q=">
<input id="input" type="text" name="q" value="" required>
<input type="submit" value="Search" onclick="this.form.target='_blank';">
<input id="helper" type="hidden" name="tbm" value="isch">
</form>
JS
var
form = document.getElementById("form"),
input = document.getElementById("input"),
helper = document.getElementById("helper");
function googleImages() {
form.action="https://www.google.com/search?q=";
input.name="q";
helper.name="tbm";
helper.value="isch";
}
function unsplash() {
form.action="https://unsplash.com/search/photos/";
input.name="";
helper.name="";
helper.value="";
}
How create a function that remove query string from output URL? (and set again parameters when a radio option need them)
See code working here: http://jsbin.com/qitadepoxu/1/edit?html,js,output

So if you are not sending any parameters to unsplash.com don't use form submit. Instead use javascript redirect inside unsplash() function.
window.location.href = "https://unsplash.com/search/photos/";

You've clarified in a comment that when calling Unsplash, you need to pass the search string as part of the URL rather than as a query string parameter, like this: https://unsplash.com/search/photos/lion
To do that with your current setup, you'll need to do two things:
Add the string to the URL, and
Disable the form fields. Disabled form fields aren't sent with the form at all; link to spec. (Alternately, of course, you could remove them, but if you change your form at some point so that it has target="_blank" or similar, removing them would complicate allowing an Unsplash search followed by a Google Images search.)
So something like this:
function unsplash() {
// #1
form.action="https://unsplash.com/search/photos/" + encodeURIComponent(input.value);
// #2
input.disabled = true;
helper.disabled = true;
helper.disabled = true;
}
Note the use of encodeURIComponent.
And of course, if you did update the page so that it opened a new window instead of replacing the current window, you'd update your googleImages function to set disabled to false on those inputs (since it will be left true by the unsplash function). You don't have to do that if you're replacing the page, though.

Adding variables to a form post url with javascript

On my website there is a form a new user will have to fill out and then after a text message will be sent to the user. This is how the form action looks
http://example.com/app_api.php?view=send_sms&&user=username&&pass=password&&message=hello+there+welcome+to+our+group&&sender_id=example&&to=00000000&&key=4
But since every user's phone number is different, i want to replace the to variable in the form action with the one the user will input in the textfield phone
can anyone help me through
<form id="new_member_sms" name="new_member_sms" method="post" action="http://example.com/app_api.php?view=send_sms&&user=username&&pass=password&&message=hello+there+welcome+to+our+group&&sender_id=example&&to=00000000&&key=4">
<label for="phone"></label>
<blockquote>
<p>
<input name="phone" type="text" id="phone" />
</p>
</blockquote>
</form>

Pretty trippy form with sends via POST and also includes GET variables via the action's query string, but here's a quick jquery solution for replacing the phone number in the query string:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$('#new_member_sms').submit(function(){
var formAction = $(this).attr('action');
var newAction = formAction.replace('00000000', $('#phone').val());
$(this).attr('action', newAction);
});
</script>

How to pass form input and music from one page to another using JavaScript?

So I've been stuck on this for a while now. I have the first page which includes this form:
<form id="user" name="user" method="GET" action="the-tell-tale-heart.html">
Name: <input type="text" name="name">
<br/>
<input type="radio" name="soundtrack" id="st1" value="oldMansion">Soundtrack 1
<br/>
<input type="radio" name="soundtrack" id="st2" value="champion">Soundtrack 2
<br/>
<input type="submit" value="Submit">
</form>
I want the user to have entered the name and chosen a soundtrack. The submit button would redirect them to a second page (the-tell-tale-heart.html) where their name would appear at the top saying "Hello, " and the soundtrack they chose would play.
I've been told to use parse URL to get this info on the second page. I only want to use javascript, no php or perl. This is what I have so far:
<script>
var name="";
var url=document.URL;
function findName(){
var re=/(name)\=(.*)?&/;
name=url.match(re);
name=name.substring(5);
alert(name);
}
findName();
var oldMansion = new Audio('music/stories-of-the-old-mansion.mp3');
var champion = new Audio('music/champion.mp3');
// play one or the other depending on which the user chooses IF STATEMENTS :D
if {
oldMansion.play();
}
else {
champion.play();
}
</script>
I'm not sure what the conditions for the music would be.
EDIT:
So the findName() function actually gets this part of the URL:
?name=izzy&soundtrack=champion
and cuts it down to this on the second page:
izzy&,name,izzy
I would just like to get "izzy" and put that on the top of the page.

Try this:
// ... your code
if(url.indexOf('soundtrack=oldMansion') != -1) oldMansion.play();
else champion.play();

If you're using javascript, you really should just initiate the music on the page you're already on. There's no point in submitting a form to another page - that's the whole point of javascript - making a more user-friendly, interactive design without breaking up the experience with new page loads.
Also, look into jQuery.

Variable Transfer: Web Form that connects with PHP to Database

Hello and thank you for viewing my question. I am a complete beginner and am looking for simple ways to do the following...
What I have in seperate linked documents:
HTML, CSS, Javascript, PHP
What I am having trouble with:
I need to use something like JSON (although I would also accept XML requests or Ajax at this point if they work) to transfer variables from Javascript to PHP. I need the variables to search in a database, so they need to be literally available within PHP (not only seen on a pop-up message or something).
I have seen a LOT of different ways to do this, I have even watched tutorials on YouTube, but nothing has worked for me yet. The things I am having the biggest problem with is that when I add a submit button to my form it doesn't submit my form and I don't know why.
Form code snippet:
<form id="form" name="input" method="post" action="javascript:proofLength();">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit" onsubmit="post();">
</form>
The second to last line there doesn't work. Do I need javascript to submit the form? Because I really thought that in this case it was part of the functionality of the form just like method="post"...
The other thing is that for JSON, I have no idea what to do because my variables are determined by user input. Therefore, I cannot define them myself. They are only defined by document.getElement... and that doesn't fit the syntax of JSON.
Those are really my main problems at the moment. So if anyone could show me a simple way to get this variable transfer done, that would be amazing.
After this I will need to search/compare in my database with some php/sql (it's already connecting fine), and I need to be able to return information back to a in HTML based on what I find to be true. I saw one example, but I am not sure that was very applicable to what I am doing, so if you are able to explain how to do that, that would be great also.
Thank you very, very much.
April

You don't need ajax to submit this form. You don't even need javscript. Just do this:
<form id="form" name="input" method="post" action="mytarget.php">
<input id="userinput" name="userinput" type="text" autofocus />
<input id="submit" type="submit" value="submit" />
</form>
This will send the form data to mytarget.php (can be changed of course)
See that i have added the name attribute to your text-field in the form and i changed the type of the button to submit.
Now you can work the Data in mytarget.php like this:
<?
$username = $_POST['userinput'];
echo "Your name is: ".$username;
?>
You wanted to have a check for length in the submit. There are two ways to this:
Before the input is send (the server is not bothered)
Let the server Check the input
for 1 you will have to append a event listener, like this:
var form = document.getElementById("form");
form.addEventListener("submit", function(event){
console.log("test");
var name = form.elements['userinput'].value;
if(name.length < 3){
alert("boy your name is short!");
event.preventDefault();
}
});
Enter a name with less then 3 characters and the form will not be submitted. test here: http://jsfiddle.net/NicoO/c47cr/
Test it Serverside
In your mytarget.php:
<?
$username = $_POST['userinput'];
if(strlen($username) > 3)
echo "Your name is: ".$username;
else
echo "your name was too short!";
?>
You may also do all this with ajax. You will find a lot of good content here. But I'd recommend a framework like jQuery to do so.

The problem is in this line
<form id="form" name="input" method="post" action="javascript:proofLength();">
The action should be a PHP page (or any other type of server script) that will process the form.
Or the proofLength function must call submit() on the form
In the php page you can obtain variable values using $_GET["name"] or $_POST["name"]
To summarize; your code should look like this
<form id="form" name="input" method="post" action="yourpage.php">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit">
</form>
and for your php page:
<?php
$userinput = $_POST["userinput"];
//Do what ever you need here
?>
If you want to do something in your javascript before submitting the form, refer to this answer

how do I add to the URL in an HTML submit button click?

I have a web service I'm trying to hit, URL looks like this:
http://servername/webapp/ws/invoices/{invoiceid}
I'm trying to hit the URL with GET like so:
<form method="GET" action="/ws/invoices">
Invoice Id: <input type="text" name="invoiceid"/>
<br />
Action: <input type="text" name="action"/>
<br />
<input type="submit" name="Submit"/>
</form>
How do I dynamically append the invoice id to the URL on button click?
Example usage: The user enters the invoice id (ex. "555") and the action text (ex. "delete"), and what I want is to hit this URL ...
http://servername/webapp/ws/invoices/555
... with a form parameter action="delete".
Any help is greatly appreciated! Thanks,
Rob

You could write some Javascript to do this. Add an onsubmit attribute to the form tag. It's easiest if you add an id attribute to the invoice field, say id="invoiceid". Then write something like:
function buildUrl(form)
{
var invnum=document.getElementById("invoiceid").value;
form.action="/ws/invoice/"+invnum;
return true;
}
Disclaimer: Just wrote this code off the top of my head. If it doesn't work, let me know and I'll actually test something.