Develop Reference

return false but submit

i try two way to solve this problem
<form method="post">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit" onclick="return check();">subscribe</button>
</form>
and other way is
<form method="post" onsubmit="return check();">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit">subscribe</button>
</form>
my js is
function check() {
var email = document.getElementById("testId").value;
var exptext = /^[A-Za-z0-9_\.\-]+#[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(email)==false){
alert("error");
document.addjoin.email.focus();
return false;
}else{
alert("complete");
return true;
}
}
alert show "error" but submit wrong email.
What did I do wrong?

<form method="post" id="form">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit">subscribe</button>
</form>
<script>
let form = document.querySelector('#form');
form.addEventListener('submit', function(e) {
e.preventDefault();
check();
});
</script>
<script>
function check() {
let email = document.getElementById("testId").value;
let exptext = /^[A-Za-z0-9_\.\-]+#[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(email) === false){
alert("error");
document.addjoin.email.focus();
return false;
} else {
alert("complete");
return true;
}
}
</script>
This should work

You just need to remove the onclick="return check();"
Then you just need to add document.getElementById("btnValidate").onclick = check; to your js and it would work

Delete div with JavaScript

In my View, I'm dynamically add divs like this via JS:
<div id="detail[0]">
<input name="detail.Index" type="hidden" value="0" />
<input name="detail[0].details_name" type="text" />
<input name="detail[0].details_value" type="text" />
<input class="btn" type="button" value="Delete" />
</div>
The question is how to delete the chosen one by clicking the Delete button in div?
JavaScript that adds new divs:
<script>
$(function() {
var i = 0;
$('.plus').click(function()
{
++i;
var html2add = "<div id='detail[" + i + "]'>" +
"<input name='detail.Index' type='hidden' value='" + i + "' />" +
"<input name='detail[" + i + "].details_name' type='text' />" +
"<input name='detail[" + i + "].details_value' type='text' />" +
"<input class='btn' type='button' value='Delete' />"+
"</div>";
$('#details_part').append(html2add);
})
})

To delete the div containing the delete button, just use the remove() function:
$(document).on('click', '.btn', function(){
var cur = $(this);
cur.parent().remove();
});

A node cannot commit suicide (remove itself), therefore you must remove it from its parent node like this:
<script>
function deleteItem (id) {
var item = document.getElementById(id);
item.parentNode.removeChild(item)
}
</script>
<div>
<div id="detail[0]">
<input name="detail.Index" type="hidden" value="0" />
<input name="detail[0].details_name" type="text" />
<input name="detail[0].details_value" type="text" />
<input class="btn" type="button" value="Delete" onclick="deleteItem('detail[0]')" />
</div>
</div>
Codepen example: https://codepen.io/getreworked/pen/MmVMJB

If you are using Jquery you can do
$(".btn").click(function () {
$(this).closest("div").remove();
})

There are many ways to do this.
This one will hide the div using purely JavaScript.
<div id="detail[0]">
<input name="detail.Index" type="hidden" value="0" />
<input name="detail[0].details_name" type="text" />
<input name="detail[0].details_value" type="text" />
<input class="btn" type="button" onclick="removeDiv('detail[0]')" value="Delete" />
</div>
<script>
function removeDiv(id){
document.getElementById(id).style.display = 'none';
}
</script>
Just pass the parameter of the ID of your parent div.
This is Using jQuery:
<div id="detail[0]">
<input name="detail.Index" type="hidden" value="0" />
<input name="detail[0].details_name" type="text" />
<input name="detail[0].details_value" type="text" />
<input class="btn" type="button" value="Delete" />
</div>
<script>
$(function(){
$('.btn').click(function(){
$(this).parent().remove();
});
});
</script>
Cheers,

// Include below jquery 1.7 script in your file first
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js">
// then use this code to remove
<script type="text/javascript">
$(function(){
$('.btn').live('click' , function(){
$(this).parent('div').remove();
});
});
</script>

HTML redirection script help needed to modify to show the redirection url instead of redirecting

This is the script:
<HTML>
<HEAD>
<SCRIPT type="javascript">
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
window.location(initial+url+extension);
}
</SCRIPT>
<TITLE>Redirect 1</TITLE>
<BASE HREF="http://www.blossompromotions.com/">
</HEAD>
<BODY>
<P></P>
<FORM name="something" action="#">Label
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)" />
<INPUT type="submit" value="GO" />
</FORM>
</BODY>
</HTML>
This redirects to the url but I want the user to be able to see and copy the url. Please tell a command instead of goToPage which will display the url on screen for the user to copy.

function goToPage(url){
var initial = "http://www.blossompromotions.com/-p-";
var extension = ".html";
var link = document.getElementById('gotoURL');
link.innerHTML = url ? initial+url+extension : '' ;
link.href = initial+url+extension;
}
<FORM name="something" action="#">
Label
<INPUT type="text" name="url" value="" onkeyup="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>

You can do it with JavaScript, and add an ID to your input text
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
document.getElementById('url').value=initial+url+extension ;
}
<FORM name="something" action="#">
Label
<INPUT id="url" type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>

Button redirecting to new jsp page not working

I was trying to redirect to a n ew jsp page on click of a button like this :
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function () {
var x=$(this).siblings("input[type=text]").val();
$('#selectedempids').val(x);
alert("Would submit: " + x);
loaction.href='ProjectAssigning.jsp';
});
});
</script>
And in html I have something like :
<div>
<h1 align="center">ASSIGN PROJECTS</h1>
Assign Project To : <input type="text" id="demo-input-facebook-theme" name="blah2"></input>
<br></br>
<input type="hidden" name="selectedempids" id="selectedempids"></input>
Project Name : <input type="text" name="projecttitle" id="projecttitle"></input>
<br></br>
Project Description : <input type="file" name="description" id="description"></input>
<br></br>
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-facebook-theme").tokenInput("ValidEmployeeList.jsp", {
theme: "facebook"
});
});
</script>
</div>
But its not getting redirected.Please help me know the reason.

Instead of:
loaction.href = 'ProjectAssigning.jsp';
Use this:
window.location.assign('ProjectAssigning.jsp');

How to display buttons when a text box is focused in Javascript

I have written the following code for a virtual keyboard using javascript.
Jsp page:
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" onfocus="myFunction(this)" />
<input name="" type="reset" value="Clear" />
</form>
Javascript:
function myFunction(x)
{
}
function clicked(val)
{
var txt;
txt = document.getElementById('text').value;
if(val != 'B')
{
txt = txt + '' + val;
}
else
{
txt = txt.substr(0,(txt.length)-1);
}
document.getElementById('text').value = txt;
}
$(".dialog").dialog({
autoOpen: false,
height: 200,
width: 930,
modal: false,
draggable: true,
resizable: true,
buttons : {
"ESC":function(){
var val="Esc";
clicked(val);
},
"1":function(){
var val="1";
clicked(val);
},
"Tab":function(){
var val="T";
clicked(val);
},
"Caps":function(){
var val="q";
clicked(val);
},
"Shift":function(){
var val="";
clicked(val);
},
"B":function(){
var val=" ";
clicked(val);
},
},
});
When the text box is focused display dialog like keyboard, when i click some button its entered button value in textbox except Caps,Shift,Enter and Tab.
Please provide the required code for those Caps,Shift,Enter,Tab .
I'm not sure how to maintain code in clicked(val) method .

Use jQuery:
$("#text").on("focus", function() {
$("#button1").show();
$("#button2").show();
});
I just noticed you commented on somebody else's answer saying you want to create buttons with JS dynamically.
Here's a way to do it:
HTML:
<div id="myDiv"></div>
jQuery:
var myBtn = $('<button/>', {
text: 'Awesome button',
click: function () {
alert("Hello!");
}
});
$("#myDiv").append(myBtn);
DEMO

I hope the following example would be helpful:
<script type="text/javascript">
<!--
function fClose() {
document.getElementById('divWithButtons').style.display = 'none';
}
function myFunction(x) {
document.getElementById('divWithButtons').style.display = '';
}
//-->
</script>
<div style="display:none; position:absolute; top: 100px; left: 100px; background-color: #eee;" id=divWithButtons>
<input type=button value=Really onclick=fClose() style="margin: 100px">
<input type=button value="Why not" onclick=fClose() style="margin: 100px">
</div>
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" onfocus="myFunction(this)" />
<input name="" type="reset" value="Clear" />
</form>

Wrtie the function like this:
function myFunction(x)
{
document.getElementById("btn1").style.display="block";
document.getElementById("btn2").style.display="block";
}
Also set the id of buttons as well.
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" onfocus="myFunction(this)" />
<input name="" type="reset" value="Clear" />
<button id="btn1" class="btn">Btn1</button>
<button id=btn2" class="btn">Btn2</button>
</form>
Hope this will work for you.

Try this
HTML
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" />
<input name="" type="reset" value="Clear" />
</form>
Script
$(function() {
$("#text").focusin(function() {
$('form').append('<button class="btn">Btn1</button>\
<button class="btn">Btn2</button>'); // It will add dynamically two buttons
$(".btn").show();
})
});
DEMO

try this with jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery("#text").focus(function() {
jQuery('.btn').show();
});
// if you want button disappear after focus out
jQuery("#text").focusout(function() {
jQuery('.btn').hide();
});
});
</script>
...
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" />
<input name="" type="reset" value="Clear" />
<input class="btn" type="button" value="button2" name="btn2" style="display:none;"/>
<input class="btn" type="button" value="button1" name="btn1" style="display:none;"/>
</form>