I've trying to design a workout website which returns exercises from a database depending on a user selection. I'm writing some test code that will change the URL in the address bar when a button is clicked if an 'Arms' checkbox is checked. However, it doesn't seem to be working so any help you can offer would be appreciated:
JAVASCRIPT
<script>
function getSelection(){
if(document.getElementById('armsCheck').is(':checked')){
window.location.search = "";
window.location.href = window.location.href + "?bodypart=Arms";
}else{
return;
}
}
</script>
HTML
<form>
<input type="checkbox" id="armsCheck" />Arms<br />
<input type="button" value="Submit" onClick="getSelection()" />
</form>
You are trying to call the jQuery is() method on a DOM object, which doesn't have one. This would be obvious if you looked at your browser's JavaScript console.
Check the checked property instead.
if(document.getElementById('armsCheck').checked){
Also replace these lines:
window.location.search = "";
window.location.href = window.location.href + "?bodypart=Arms";
with:
window.location.search = "?bodypart=Arms";
As the first line would trigger a page reload before reaching the second line.
There's no need to involve JavaScript at all though. You can get the same effect with plain HTML.
<form>
<label><input type="checkbox" name="bodypart" value="Arms"> Arms</label>
<input type="submit" value="Submit">
</form>
Solved it. 'getSelection()' wasn't a valid function name - thanks for your help!
Related
I am trying to run a simple code for something at work -- me and my co-workers are going to make a list of songs. So using what seems to be a pretty simple coding in HTML I managed to achieve the following:
<!DOCTYPE html>
<html>
<body>
<form action="list">
Band Name:<br>
<input type="text" name="BandName">
<br>
Song Name:<br>
<input type="text" name="SongName">
<br><br>
<input type="submit">
</form>
</body>
</html>
This runs fine to create the buttons and boxes for user input. But I still do not know how to process this information. The ideal result would be a way to append the names, as the users placed their inputs, in a list at the action page. Would that be possible? I'm trying to achieve this in the HTML box of google sites, by the way.
Edit:
With some help, I was able to run the following code on http://jsfiddle.net/:
////HTML///
<form>
Band/Artist:<br>
<input type='text' id='idea' />
<br>
Music:<br>
<input type='text' id='idea2' />
<br><br>
<input type='button' value='Adicione' id='add' />
<ul id='list'></ul>
<script type="text/javascript">
////JAVASCRIPT//////
//Defining a listener for our button, specifically, an onclick handler
document.getElementById("add").onclick = function() {
//First things first, we need our text:
var text = document.getElementById("idea").value; //.value gets input value
var text2 = document.getElementById("idea2").value; //.value gets input value
//Now construct a quick list element
var node = document.createElement("li");
var textnode = document.createTextNode(text+" - "+text2);
node.appendChild(textnode);
//Now use appendChild and add it to the list!
document.getElementById("list").appendChild(node);
(the code came partially from TymeVM's answer in adding user input to a list of text items on a html page, but something seemed to be wrong with it)
It works fine. But I was not able to run it on page of Google Sites. Is it possible? If not, do you guys know a better option?
As my edition seems to answer my question, I'll post it also as an answer. Please feel free to add any suggestions to it.
The following code, with the addition of Javascript, produces the needed answer for the first question above, according to http://jsfiddle.net/.
////HTML///
<form>
Band/Artist:<br>
<input type='text' id='idea' />
<br>
Music:<br>
<input type='text' id='idea2' />
<br><br>
<input type='button' value='Adicione' id='add' />
<ul id='list'></ul>
<script type="text/javascript">
////JAVASCRIPT//////
//Defining a listener for our button, specifically, an onclick handler
document.getElementById("add").onclick = function() {
//First things first, we need our text:
var text = document.getElementById("idea").value; //.value gets input value
var text2 = document.getElementById("idea2").value; //.value gets input value
//Now construct a quick list element
var node = document.createElement("li");
var textnode = document.createTextNode(text+" - "+text2);
node.appendChild(textnode);
//Now use appendChild and add it to the list!
document.getElementById("list").appendChild(node);
(As it was pointed in the edition of the question above, the code came partially from TymeVM's answer in adding user input to a list of text items on a html page. But it did not work on http://jsfiddle.net/)
But still does not run on Google Sites, it seems. I do not know if I should create another question for this problem.
I'm looking for a boilerplate smart way to take the input value, append it to a fixed url like /search/inputboxvalue and send the user there. Is there anyway smart robust way to do it? I could use an onlick handler and a form but I wondered if there is a more elegant way to do it, pref just using javascript.
My code:
<input name="search" id="search" value="" type="text" width="650px"></input>
Try this:
var my_value = document.getElementById('search').value;
window.location.href = window.location.href + my_value
Use following statment to get value from text box and append to current url.After append it will redirect user to that url.
input_box_value = jQuery('#search').attr('value');
window.location.href = window.location.href + input_box_value
Above 2 statement can be insert on particular event.like click
This is not really correct way to form requests. This symbol "/" should tell us, that we go to subdirectory, or its analog. So, to form this type of url, you will need to use javascript.
But, there is more easy way to create this type of request. Native:
<form id="search" method="get" action="search">
<input type="text" name="q" value="" />
<button type="submit">Search</button>
</form>
This small HTML snippet will allow you to visit an url: site.com/search?q=inputboxvalue without any JS. You may even hide submit button and just use Enter to search.
I have this text field and button here
<input name="txtSearch" type="text" id="txtSearch" class="field" />
<input type="submit" name="btnSearch" value="" id="btnSearch" class="btn" onclick="javascript:SubmitFrm()" />
and when the user clicks on the submit button this function is suppose to run
<script type="text/javascript">
function SubmitFrm(){
var Searchtxt = document.getElementById("txtSearch").value();
window.location = "http://www.example.com/search/?Query=" + Searchtxt;
}
</script>
But nothing happens, what I expecting to happen is when the user clicks on the submit button, take the value from the search text box and redirect the user to the url + the value of the search text box...
What am I doing wrong?
There are several issues in your code :
You are handling the click event of a submit button, whose default behavior is to post a request to the server and reload the page. You have to inhibit this behavior by returning false from your handler:
onclick="SubmitFrm(); return false;"
value cannot be called because it is a property, not a method:
var Searchtxt = document.getElementById("txtSearch").value;
The search query you are sending in the query string has to be encoded:
window.location = "http://www.mysite.com/search/?Query="
+ encodeURIComponent(Searchtxt);
Change the onclick from
onclick="javascript:SubmitFrm()"
to
onclick="SubmitFrm()"
Just do
onclick="SubmitFrm"
The javascript: prefix is only required for link URLs.
Doing this fixed my issue
<script type="text/javascript">
function SubmitFrm(){
var Searchtxt = document.getElementById("txtSearch").value;
window.location = "http://www.mysite.com/search/?Query=" + Searchtxt;
}
</script>
I changed .value(); to .value; taking out the ()
I did not change anything in my text field or submit button
<input name="txtSearch" type="text" id="txtSearch" class="field" />
<input type="submit" name="btnSearch" value="" id="btnSearch" class="btn" onclick="javascript:SubmitFrm()" />
Works like a charm.
Remove 'javascript:' from your code and it should work.
Do you happen to use FireFox? I have learned from someone else that FireFox no longer accepts the 'javascript:' string. However, for the life of me, I cannot find the original source (though I believe it was somewhere in FF update notes).
I have a submit button with a onClick:
<div id="messageDiv">
<form>
<textarea name="message" rows="10" cols="20"></textarea></textarea>
<br /><br />
<input type="submit" value="Send" onClick="sendmail()">
<input type="reset" value="Reset" name='reset'>
</form>
</div>
then I have my sendmail:
function sendmail()
{
window.location.href = "http://www.rainbowcode.net/index.php/profiles/mail?="+mailid;
window.location('http://www.rainbowcode.net/index.php/profiles/mail?='+mailid);
//return true;
}
mailid is a global variable that gets set in another JS function and it does contain the correct value. How come window.location is not opening my page?
If I manually open it with a mailid it works fine..
Setting the location works just fine, but then the form is submitted, which will reload the current page instead.
Return false from the method:
function sendmail() {
window.location.href = "http://www.rainbowcode.net/index.php/profiles/mail?="+mailid;
return false;
}
and return that status in the event to stop the submit:
<input type="submit" value="Send" onclick="return sendmail()">
I spent 2 days trying every solution shown here and elsewhere, to no avail. Then I removed the form tags, which served no purpose since there was no submit button, and the problem went away using:
window.location = 'mypage.php', true;
If you need to open a new window, you should use the window.open() method. window.location refers to the current windows address, and will only - when using window.location.reload() - reload the CURRENT window.
Try using replace function instead
window.location.replace('http://www.rainbowcode.net/index.php/profiles/mail?='+mailid)
Solid answers already but why fight the system? Particularly if you've called with jquery or onClick - there might not be an inline return is my point - so instead you could just change the action on the submit:
document.form.action = 'http://www.rainbowcode.net/index.php'
then you can pick any of the form variables if you need them or ignore if not.
I'm working on a script where all I want it to do (right now) is redirect the user based on which button they press. Eventually it will take form input and incorporate that into the redirect, but right now I'm just trying to get the buttons to send the user off to the appropriate site. However, My redirects aren't working.
<html>
<head>
<title>
Home
</title>
</head>
<body>
<script type="text/javascript">
<!--
var textstring;
var btnWhichButton;
//Gets the text from the form
function getQ() {
textstring = document.forms['Search'].elements[0].value;
}
//Does a Google Search
function googleSearch() {
window.location ="http://www.google.com";
}
//Does a YouTube Search
function youtubeSearch() {
window.location = "http://youtube.com";
}
//Figure out which button was pressed
function whichButton() {
if (btnWhichButton.value == 'Google Search' ) {
googleSearch();
} else if (btnWhichButton.value == 'YouTube Search' ){
youtubeSearch();
}
}
//main function to run everything
function main() {
getQ();
whichButton();
}
// -->
</script>
<form name="Search" >
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" value="Google Search" onclick="btnWhichButton=this; main();" />
<input type="submit" value="YouTube Search" onclick="btnWhichButton=this; main();" />
</form>
</body>
</html>
When either button is clicked, the page just reloads with ?q= appended to the url, it doesn't redirect. Any help?
You want to use a button not an input type='submit'. Your current buttons are submitting the form, not performing their onclick actions.
Or block the submit action in some way. Or you could use your functions to set the form action to the url and just let it submit.
Your scripts seem highly overcomplicated. Why not have three functions: getQ, googleSearch, and youTubeSearch? Then inside the onClick event you can call the exact function, including this.value inside the input parameters and calling getQ from inside that function? Your method seems highly inefficient. If you're going to have separate functions for each of them anyways, there's no use in going through two other functions in order to get to them.
A submit button will always submit the form without a return false at the end of the onClick event, and since the default posting method is GET, its attaching ?q= to the end of your URL because that field is blank and it's the only input field in the form.
For redirecting to new page you no need to use the big javascript function.
<html> <body>
<input type="button" value="Google Search" onclick="javascript:window.location.href='http://www.google.com'" />
<input type="button" value="You tube Search" onclick="javascript:window.location.href='http://youtube.com'" />
</body></html>
Please check whether it helps you.
Well as jasonbar says, change your input to be of type 'button' and not 'submit'. Plus, I'd rather use window.location.href instead of window.location only. I don't know possible this is good practice...happy programming.