open window using onsubmit or onclick based off using input

Question

I am trying to figure out this code:

<script>
function process()
{
var url="https://stackoverflow.com/questions/" + document.getElementById("url").value;
location.href=url;
return false;
}
    </script>
    <form onSubmit="return process();">
URL: <input type="text" name="url" id="url"> <input type="submit" value="go">
</form>

What I want to happen is if the user enters 11811782 in the box the page Form value creates a url will open, but now on onsubmit I want a modal/popup open instead. I found this page: How to call multiple JavaScript functions in onclick event? and also this link: onclick open window and specific size

I tried to implement those suggestions into code but it would not work.

@MTCoster currently it opens in new window. I would like it to open as modal. — Trainingday, May 30 '17 at 19:57

score 1 · Answer 1 · answered May 30 '17 at 17:29

1

Seeing as I am not 100% sure if you wanted a popup or a new window entirely this is what I came up with:

<form onSubmit="process(event)">
URL: <input type="text" name="url" id="url"> <input type="submit" value="go">
</form>
<script>
    function process(e)
    {
        e.preventDefault();
        var url="https://stackoverflow.com/questions/" + document.getElementById("url").value;
        // location.href=url;
        var popup = window.open(url,'mypopup','height=500,width=500');
        if (window.focus) {popup.focus()}
        return false;
    }
</script>

preventDefault is in place to make sure that the form does not actually submits.

answered May 30 '17 at 17:29

Sebastiaan van Arkens

447
1
4
12

thanks yes a modal or popup not new window sorry if I was clear. – Trainingday May 30 '17 at 17:35
Did this answer your question? Or is there anything else that needs to be answered. – Sebastiaan van Arkens May 30 '17 at 17:38
Glad to help, if this answer solved your problem please mark it as accepted by clicking the check mark next to the answer. see: [How does accepting an answer work?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) for more information – Sebastiaan van Arkens May 30 '17 at 17:47
is there a way to do this with a modal? I did click accepted – Trainingday May 30 '17 at 18:21
@SebastiaanvanArkens: Kindly make sure the [check] mark icon is highlighted below the [vote down] icon arrow if you mark his answer [accepted]. As for your question to using a [modal], Check [Bootstrap] documentation here: https://v4-alpha.getbootstrap.com/components/modal/#live-demo – Marylyn Lajato May 31 '17 at 02:13

open window using onsubmit or onclick based off using input

1 Answers1