Need to change the value of a variable using javascript - javascript

I have dug and dug for a few hours today without much luck. My language is PHP and my javascript skills are not that great I am learning.
I have a list of buttons, each with their own value. When the button is pressed I would like for it to send the value of that button to a variable so the right file is loaded.
I know that this has got to be a simple thing but it's beyond me right now.
Code:
<button type="button" id="myButton" onClick="setval('shannen')" class="btn btn-primary cd-btn">VIEW</button>
<button type="button" id="myButton" onClick="setval('fall-features')" class="btn btn-primary cd-btn">VIEW</button>
var content_div = document.getElementsByClassName("cd-panel-content");
$(document).ready(function() {
setValue();
$("#myButton").on('click',setValue)
}) console.log(mysample);
function setValue() {
mysample=null;
var mysample=$("#myButton").val();
var mysample=mysample+".html";
console.log(mysample);
$(".cd-panel-content").load("emails/"+mysample);
When they click it a window opens on the right of the screen displaying an HTML file.
www.jeffcade.com to see the functionality. I have gotten it to work with one variable but then it will not change when a different button is pressed.

You're calling a "setval()" function with one argument, but you've written a "setValue()" function with no arguments. You could try changing your function to:
function setval(mySample) {
mySample=mySample+".html";
console.log(mySample);
$(".cd-panel-content").load("emails/"+mySample);
}

Related

onclick event that is inline with html input type="button" doesn't work but when I put the same in JS it works

I have a button on my page that when clicked should redirect to another view based on an Action in my controller, but when clicked it does not do anything... I have the same html syntax with another button on another view and it works.... so here is the broken button:
<input type="button" class="btn btn-info btnArchive clearButton" value="Clear Search" onclick="location.href='#Url.Action("ClearArchiveFilter","ApplicantRecords", new { area = "" })'" />
Here is the same button but with a different action on another view of mine that works:
<input type="button" class="btn btn-info indexBtns" value="Clear Search" onclick="location.href='#Url.Action("ClearFilter","ApplicantRecords", new { area = "" })'" />
However, if instead of using inline onclick events for the broken button I used JS as a workaround and it works fine:
<script type="text/javascript">
$(document).ready(function (e) {
$('.clearButton').click(function (e) {
location.href = '#Url.Action("ClearArchiveFilter","ApplicantRecords")';
});
});
</script>
Here is the ClearArchiveFilter method in my ApplicantRecords Controller:
public ActionResult ClearArchiveFilter()
{
Session.Clear();
return RedirectToAction("Archive");
}
Just a quick method to clear a session.
So my question, is that why doesn't my button work? Am I missing something really small? It is just striking me as weird that one button with the same syntax works and the other doesn't... I will stick with the JavaScript method if this can't be explained/resolved.
I have checked spelling multiple times so that is not the issue (at least I hope not and I overlooked a spelling mistake multiple times)
Thanks in advance.

How to use Bootstrap button-group and AngularJS to navigate between pages

I have this portion of code that creates a button group:
<div class="btn-group btn-group-lg">
<button id = "Image" type="button" class="btn btn-primary">Click1</button>
<button id = "Text" type="button" class="btn btn-primary">Click2</button>
</div>
I want to make it dynamic, in a sense that each button will take me to a different URL. I have come across this post:
How do I navigate to another page on button click with Twitter Bootstrap?
However, I cannot use <a></a> when dealing with a button group (or at least cannot think of a way to do so). So I guess I need a JS file with a function? How do I do that with AngularJS?
You can use a simple Javascript function such as:
go(path) {
window.location = path;
}
Then call it from your button with:
ng-click="go('index.html')"

Javascript only runs alert

I'm trying to piece together a basic page using PHP & JS to take me to a google map related to a search box. However the JS script will only run with an alert, no other function type will run:
The address bar just changes to "Domainx.com/?searchButton="
The code for the button is:
<button class="btn btn-success btn-lg" name="searchButton" onclick="searchFunction()">Search </button>
and directly under it (within the body) is have my script:
<script>
function searchFunction() {
alert("pressed");
}
</script>
When i change the alert to anything else i.e. window.location.href = "http://www.google.com"
it simple stays on the page and only the address bar changes.
You probably wanted to use window.open("http://www.google.com/search?q=the_meaning_of_life");
If you wanted to use reload onclick, the following should work:
<input type="button" value="Reload Page" onClick="window.location.reload()">
There is an example of how to dow it here - http://www.mediacollege.com/internet/javascript/page/reload.html

HTML Button redirects pages

I have the following button:
<div class="form-group">
<button onclick="assign_all()" class="btn btn-default">Vælg alle</button>
</div>
Now this calls a JavaScript function called assign_all
This works fine however when it is done executing the JavaScript it simply tries to load a page. Which is fairly odd (its like if you click on an A tag)
As you can see below nothing in my javaScript indicates that it should reload / load a page:
function assign_all() {
var info = [];
var i = 0;
$('.user_list').each(function () {
if ($(this).hasClass('show')) {
info[i] = $(this).find('.user_id').val();
i++;
}
})
}
Can anyone tell me why this is happening?
It's because the default button element's type attribute is set to submit. Your button element is attempting to submit a form. Simply give it a type of button:
<button onclick="assign_all()" class="btn btn-default" type="button">...</button>
Add type="button" to your button tag. it must solve the issue
you can do this also
<button onclick="assign_all();return false;" class="btn btn-default">Vælg alle</button>

Submit button displays an image based on the time of the day

Basically there is an empty box with a submit button directly underneath. The empty box might have a default picture loaded to begin with. When a user clicks the submit button, how can I display a different picture (in place of the default) based on a certain time of the day. I don't really need an answer regarding the checkTime logic, but I would appreciate some help with regards to the submit button being able to change a picture in the same spot. Thanks guys.
if you just have a simple button, you can add an onclick event to it:
Example 1:
<input type="button" onclick="changeImage()" />
and your changeImage() function will have the logic to follow
Example 2:
<input type="button" id="submitButton" value="Button"/>
Javascript -
document.getElementById("submitButton").onclick = function () {
// run the logic
}
images can be switched using the src property
javascript -
document.getElementById("theImage").src = "newImage.jpg";
Since you are talking about a "Submit" button I assume it is within a form. Is submitting the form supposed to have some other effect? If not, use type="button" rather than type="submit". Either way, here is some basic code to get you started:
<img id="thePicture" src="...">
<input type="submit" value="Go" onclick="return changePicture();">
<script>
function changePicture() {
// your logic here to set which picture to use
var newPicture = "yourpath/images/img1.jpg";
document.getElementById("thePicture").src = newPicture;
// return false to stop the form submitting, otherwise
return true;
}
</script>

Categories

Resources