Javascript only runs alert - javascript

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

Related

Need to change the value of a variable using 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);
}

Form Submit works with Button, but not with Enter key

I am new here, so maybe you need to give me some hints about how everything works in this community. I was already reading a lot here on Stackoverflow but finally signed up.
I am designing a small website for a museum near me which is a non-profit organization. They have a huge collection of ammunition and the information is currently available on paper.
I want a website where I can enter a number and the appropiate information is shown. Everything works so far in my test site. (since no internet available there, it should run locally on a android tablet later)
The only problem I have is that the form submit works with the button, but not with the enter key or "open" key on the androids numberpad.
I am also quite new to javascript-coding since I come from electronics and c-programming on microprocessors, so I may have made mistake.
i currently have the iframe in the main page, but i originally wanted it to open up in a modal. It did not work properly, so maybe I may try that later again.
Live demo here: museum.smallfilms.ch/drei
The code for the form is the following:
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1>Katalog:</h1>
<p>Mit der Munitionsnummer können hier weitere Informationen zur jeweiligen Patrone angezeigt werden.</p>
<p>
<form onsubmit="searchpage()">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<button type="button" class="btn btn-danger" onclick="searchpage()" id="search">Suchen</button>
</form>
The Javascript code is the following:
function searchpage() {
var num = document.getElementById('num');
var targetFrame = document.getElementById('targetFrame');
if (num.value) {
var page = 'pages/' + (+num.value) + '.html';
targetFrame.setAttribute('src', page);
}
}
If you need more code I can deliver this. Just let me know that you need.
The site is now designed to show something for the numbers 1 and 2.
The whole site uses bootstrap and the sites displayed in the iframe use strapdown.js for easier editing. (We need to digitalize about 900 datasets in the end)
I think it is only a small mistake somewhere but after hours of coding and searching the internet i still did not get the source of the error.
Thanks in advance for any help and hint.
Dabbax
Edit: if it helps, i packed the whole page into a zip... museum.smallfilms.ch/drei/drei.zip
I think that the error comes from the line where you are calling the function searchPage(). I would recommend you to try the line below :
<input type="sumbit" class="btn btn-danger" onclick="searchpage()" id="search" value="Suchen">
In this case, when you press enter, the form will be submitted and call the searchPage function.
On your code for the form, try:
<button type="submit" class="btn btn-danger" onclick="searchpage()" id="search"> Suchen </button>
edit: Shaam's answer can be correct but if you say input then you just trying to make it a look like button with bootstrap, a more proper approach would be input type="button" but in your case you should say that this is a button that submit the form.
That's why you should use button and not input here.
This could be your html:
<form id="searchForm" action="some_url">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<input type="button" value="Suchen" class="btn btn-danger entr" onclick="searchpage()" id="search">
</form>
Now add an event listener to the class entr and submit the form if the key is Enter. So the event listener in jquery like
$('.entr').keypress(function(event) {
if (event.which == 13) { // this is the enter key code
document.getElementById('searchForm').submit();
}
});

Mozilla automatically adding disabled="" as button attribute

I have issue I'm making asp .net application any on my view page I got problem.
When I run application in Chrome everything works perfect, but when I run it in Mozilla it just somehow add's disabled="" on my button - when I see page source attribute is added.
Here's my button code:
<button class="btn btn-warning btnBid" value="Bid" type="button" id="#Html.Raw("btn" + item.IDAuc)">
Bid
</button >
I still don't know why this happened, but as one solution I've called initialize() function in JavaScript in which I've just set all buttons' class to be btn and simply just call:
$(".btn").prop("disabled", false);

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 create an HTML button that show more text same page

I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}

Categories

Resources