I am trying to open a pop-up window by clicking a button inside a form. MY code is as follows
HTML
<form>
<div class="form" align="center">
<button class="form_sub_btn" onclick="popitup()">Next</button>
</div>
</form>
JavaScript:
function popitup(url) {
newwindow=window.open(url,"","height=400,width=350");
if(!newindow){
alert('We have detected that you are using popup blocking software.');}
if (window.focus) {newwindow.focus();}
}
function popitup(){
window.open("","","height=300, width=300");
}
The latter function I put cause the former one wasn't getting executed with the url given.
Any help is appreciated. Thanks!
Delete the second popitup function. You need only the first one. Pass the URL to open in the argument. E.g., popitup('/popup.html');.
Since this button is inside a form, the button will cause the form to be submitted, which will navigate away from the current page before the popup can be opened. To prevent this, you need to return false from the onclick handler:
<button class="form_sub_btn" onclick="popitup('/popup.html'); return false;">Next</button>
Also, to make this work, it will be necessary to fix the typo in popitup: if(!newindow){ should be if(!newwindow){, because any error in that function will prevent the return false; from executing.
Related
I'm having the weirdest problem right now. I have this JS code:
function CreateChat() {
var chatName = document.getElementById("chatName").value;
window.location.href = "https://localhost:44321/CreateNewChat/CreateChat?ChatName=" + chatName;
}
Thing is, as it is, I can't make it work. It obviously should be calling a controller method, but it just won't work. If I hit that url with the project running and put anything at the end of it, like https://localhost:44321/CreateNewChat/CreateChat?ChatName=TestName, that test name variable will get to the controller without a problem. If I hardcode to the code the "TestName" instead of passing the chatName variable I define earlier, it will get to the controller, no problem. Hell, if I debug the script, the chatName variable gets loaded correctly with my input, and if I console.log the url it will show up correctly (in fact, I can copy/paste that url and it will hit the controller method correctly). But, as the code is presented above, it will never, by any means, hit the controller. It will reach that point, and cut the execution as if there was an error in the JS code. Do you guys have any ideas on this? It's driving me mad, really.
Just in case, this is how I define the text input in the HTML:
<input type="text" required class="form-control" id="chatName" aria-describedby="nameHelp" placeholder="Name your chat!">
Edit: encodeURIComponent on the chatName doesn't work either.
try using window.open with _self instead:
window.open ('https://localhost:44321/yadayada','_self',false);
You have a submit button (and I assume this button is inside a form)... when you click on the submit button the form is submitted to the submit action of the form, this is the default behavior for the submit action.
Now if you don't want your page to be submitted, you can change the button type to button:
<button type="button" onclick="CreateChat()" class="btn btn-primary">Create a New Chat!</button>
Alternatively if you actually need a submit button then you need to prevent the default behavior in order to change window.location:
function CreateChat(event) {
e.preventDefault(); // <-- don't submit the form
var chatName = document.getElementById("chatName").value;
window.location.href = "https://localhost:44321/CreateNewChat/CreateChat?ChatName=" + chatName;
}
You need to pass the event to CreateChat function:
<button type="submit" onclick="CreateChat(event)" class="btn btn-primary">Create a New Chat!</button>
This might be very basic but I couldnt really find a solution to this. I am creating my own website. I have written a javascript file, simply called "main.js".
I can call my entire script in my HTML file like so:
<script src="main.js">
</script>
And I see in the console that everything works as it should. However, this is not what I want. What I want is the code in the JS script to be fired upon a click on my button. This is what I tried:
<input class="button" onclick="main()" type="submit"
value="Submit" name="">
</div>
So I want the script that I have referenced somewhere else in the HTML file to fire the "main" function when my button is clicked. But what happens currently is that the click onto the button simply reloads the page.
So, to get this all into one question:
I want to click my html button and then fire a single function from another script that is called "main.js".
How can I achieve that?
Thank you
I think this might be because of your type: submit.
Try changing it to type="button".
Hope this helps!
You are trying to call a function called main, but you need to run a script that creates a function. The browser won't go looking in a JS file with the same name as the function automatically.
Edit main.js so the code appears inside a function.
function main () {
// Your code here
}
If you don't want the form to be submitted after the JS function is called, then don't use a submit button to trigger it. Use a type="button".
A submit button triggers a reload as it submits the formto the server, unless your main function returns false.
Adding
return false;
at the end of main should do the trick.
I have an alert where if the answer is OK then it should redirect the user to a different page and if they click cancel they should stay on the page. But no matter what button they press it will redirect them to the new page. What is going on?
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
window.location.replace = "send_PhysiologicalMeasures.html";
}
}
</script>
Your HTML button is wrapped in an a tag, which is effectively a link. a elements will always take you to their link specified in href, so just remove that a element: change your HTML to:
<button class="button PhysiologicalMeasures" onclick ="validation()">Record Physiological Measures</button>
Another method would be to change the link's onclick to return the status:
Link
and the JS:
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
return true;
}
return false;
}
</script>
By returning false, you will prevent the execution of the link, and returning true will allow the link to work.
You can see it here: https://jsfiddle.net/am0adszu/
I am not so into JavaScript and I have the following problem.
Into a JSP page I have some "links" like this:
<tr onmouseout="Javascript: this.style.background='#EAEFFF'; this.style.color='#003399';" onmouseover="Javascript: this.style.background='#003399'; this.style.color='#FFFFFF'; this.style.cursor='hand';" style="background-color: #EAEFFF;" onclick="Javascript: document.location.href='edi.do?serv=4.1';">
<td>
<!--A HREF="edi.do?serv=4.1" class="linkBlue" onMouseOver="self.status='Comunicazioni'; return true"-->
Comunicazioni
</td>
</tr>
As you can see in the previous code snippet the link is not yet implemented by a classic a href but, in its place, it is done by JavaScript using this expression:
onclick="Javascript: document.location.href='edi.do?serv=4.1';"
So, correct me if I am saying wrong assertion, I think that (when the user click on the tr) by the Javascript: it perform the following JavaScript operation that open the link. Is it the correct interpretation?
It works but my problem is that, before doing it, I have to perform a specific loadingPopUp() JavaScript function defined into the
<script type="text/javascript">...</script>
section of my page. So my problem is: how can I perform the loadingPopUp() function before the Javascript: document.location.href='edi.do?serv=4.1'; on theonclick event?
change onclick event to:
onclick="changeLocationTo('edi.do?serv=4.1')"
create a new js function:
function changeLocationTo(newLocation)
{
loadingPopUp();
// you may add an timeout here or to handle a popup action like closing it
document.location.href = newLocation;
}
Yes, Your assertion is absolutely right. But I think if you call your function before changing url then it would not be correct approach because second function will be executed immediately after your loadingpopup function and will redirect user to different page, so I think your purpose of opening popup will not be fulfilled.
So try this
Way 1: if you want to load your popup and immediately redirect user
function fnOpenNewLink(){
loadingPopUp();
document.location.href='edi.do?serv=4.1';
}
Way 2: if you want to load your popup and then redirect user according to your requirement.
function fnOpenNewLink(){
loadingPopUp(function(){
document.location.href='edi.do?serv=4.1';
});
}
function loadingPopUp(callback){
//your stuff
//when everything is done, just call the callback
callback();
}
I a using jquery mobile to create a mobile web page. I defined a button and an onclick event. After the onclick function is carried out my page is automatically refreshed. Does anyone know why this is happening or how i can stop it?
my button declaration:
<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed();">Rate</button>
function:
function BtnRatePressed() {
var rateBtn = document.getElementById('rateButton');
rateBtn.style.visibility = 'hidden';
alert("yeh");
}
I receive the alert and then the page refreshes.
We need code for this to find out. Any way you can supply us with a live demo?
You might have forgotten to return false at the end of the onclick event. Neglecting the return of false will make the browser to execute the href of the link anyway, which might appear as a page reload.
As I stated, seeing the live example, add return false to either
your BtnRatePressed function
function BtnRatePressed()
{
var rateBtn = document.getElementById('rateButton');
rateBtn.style.visibility = 'hidden';
alert("yeh");
return false;
}
or within the onclick statement.
<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed(); return false;">Rate</button>
Add return false; to the end of BtnRatePressed() so that the click even isn't propagated and doesn't cause the form to submit.
Edit: Also, change your attribute to onclick="return BtnRatePressed();"
The problem is that you're using an actual button and that is causing the form to action, you can accomplish the same thing by using a hyperlink button like this and avoid the problem...
Rate