Display page inside div from submitting form - javascript

I'm attempting to create a page with a simple input form, use that to create the URL required and display the resulting page in a div all in one go. When I sent the user directly to the created URL from clicking submit that worked perfectly, but I can't seem to get it to do anything with the following code:
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
<form id="theForm">
<input id='subj'/>
<input type='submit'/>
</form>
<script>
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
var show;
theForm.onsubmit = function(e){
show = "www.someurl.com/" + encodeURIComponent(theInput.value);
return show;
$('#display').load(show);
}
</script>
<div id="display"></div>

I've changed three things and got the code to work:
1. Changed the div to an iFrame
2. Added an "action" attribute to the form and set it to "#" so that the program doesn't exit the webpage upon clicking the form.
3. Removed the "encodeURIComponent" command from the code, because it didn't work with it..
This is my example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="theForm" action="#">
<input id='subj'/>
<input type='submit'/>
</form>
<iframe id="display"></iframe>
<script>
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
var show;
theForm.onsubmit = function(e){
var show = "http://someUrl.com/" + (theInput.value);
console.log(show);
document.getElementById("display").src= show;
}
</script>
</body>
</html>

Related

Adding elements to form dynamically with javascript

I'm trying to add elements when a button is clicked, my code looks like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<form action="" method="POST" id="form-one">
<button onclick="addChargingSchedule()">Add</button>
<div class="cs"></div>
</form>
</center>
<script>
var elem = document.getElementsByClassName("cs");
function addChargingSchedule() {
var form = document.getElementById("form-one")
var id = document.createElement("input");
id.setAttribute("type", "text");
id.setAttribute("name", "one");
id.setAttribute("id", "one");
id.setAttribute("placeholder", "1");
form.appendChild(id)
}
</script>
</body>
</html>
The code works, when I click on the button, an input text is created but after like 0.1 secondes, the page is refreshed and the input disapears again.
Someone knows what am I doing wrong?
You can add submit event listener and stop it like this:
form.addEventListener('submit', (event) => {
event.preventDefault();
});
Working example taken by your code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<form action="" method="POST" id="form-one">
<button onclick="addChargingSchedule()">Add</button>
<div class="cs"></div>
</form>
</center>
<script>
var elem = document.getElementsByClassName("cs");
var form = document.getElementById("form-one")
function addChargingSchedule() {
var id = document.createElement("input");
id.setAttribute("type", "text");
id.setAttribute("name", "one");
id.setAttribute("id", "one");
id.setAttribute("placeholder", "1");
form.appendChild(id);
}
form.addEventListener('submit', (event) => {
event.preventDefault();
});
</script>
</body>
</html>

keep jquery value after page after press enter key or page refresh

i want to keep a jquery value for input box value after press enter key or refresh not reload. when click button then set a value of a input box but when page refresh or press enter key then input box value erase. i have uses localStorage but it is not working for me.
here is my html code....
<button id="read">set value</button>
<input type="text" id="value">
here is my jquery.....
$(function(){
$('#read').on('click', function () {
var someVarName = "value";
localStorage.setItem("someVarName", someVarName);
var someVarName = localStorage.getItem("someVarName");
$('#value').val(someVarName)
})
});
Below is the working code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#read').on('click', function () {
var someVarName = "value";
localStorage.setItem("someVarName", someVarName);
var someVarName = localStorage.getItem("someVarName");
$('#value').val(someVarName)
});
});
</script>
</head>
<body>
<button id="read">set value</button>
<input type="text" id="value">
</body>
</html>

Incorporating JS in Html page

I want to make a submit button that only activates when a radio button is checked, it works perfectly in JS fiddle http://jsfiddle.net/sYNj7/94/
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
but it doesn't work when I try to make it into a html page with notepad++. I get the radio button next to a disabled submit button but the submit button doesn't activate when the radio button is checked. this is the code I have at the moment.https://gist.github.com/anonymous/e5f19f5745396926ce02
Currently you attempt to access HTML elements before the page is fully loaded; they are not available at that point.
1. Put your code in a named function
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
....
2. Use the body onload event to ensure it runs when all the HTML elements are available for use:
<body onload="myFunc();">
(JSFiddle does this for you by default)
Just put your script just before closing body tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Captive portal</title>
</head>
<body>
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
<script>
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
</script>
</body>
</html>
It happens because you're trying to get the elements before they are rendered in the page.
In jsFiddle, it works, because they wrap your code into a onload event, and then, all the elements are already rendered when you try to use them.
There are two simpler ways of achieving what you want:
You can put your script tag right before ending the body tag, e.g:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- all your content -->
<script>
</script>
</body>
</html>
Or you can wrap your code in a onload or DOMContentLoaded event:
<script>
document.addEventListener('DOMContentLoaded', function(e) {
// your code goes here
});
</script>

Getting rid of Value attribute of a textBox when using clone method in jQuery

I'm having a problem with this form I'm working on. Whenever I add, or refresh the page, the values are still there. I believe this is because the clone method copies the value attribute from the textBox. Is there any way I can get rid of them when I add another textBox?
<html>
<head>
<title>JQuery Example</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
function removeTextBox()
{
var childCount = $('p').size() //keep track of paragraph childnodes
//this is because there should always be 2 p be tags the user shouldn't remove the first one
if(childCount != 2)
{
var $textBox = $('#textBox')
$textBox.detach()
}
}
function addTextBox()
{
var $textBox = $('#textBox')
var $clonedTextBox = $textBox.clone()
//document.getElementById('textBox').setAttribute('value', "")
$textBox.after($clonedTextBox)
}
</script>
</head>
<body>
<form id =
method="POST"
action="http://cs.harding.edu/gfoust/cgi-bin/show">
<p id= "textBox">
Email:
<input type = "text" name="email" />
<input type ="button" value ="X" onclick = "removeTextBox()"/>
</p>
<p>
Add another email
</p>
<input type="submit" value="submit"/>
</form>
</body>
</html>
The Following addition should work:
var $clonedTextBox = $textBox.clone();
$($clonedTextBox).val('');

Disable the text boxes

I am beginner to html. I have two text boxes say t1 and t2 If t1 is filled with some data then then other text box t2 should be disable. Please let me know hot to do it. Thanks in advance
Based on your simple scenario description, here's an implementation that works cross-browser and without any third-party javascript library:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
t1.onchange = function(){
t2.disabled = t1.value.length > 0;
}
}
</script>
</head>
<body>
<form>
t1:<input type="text" id="t1" name="t1" /><br/>
t2:<input type="text" id="t2" name="t2" />
</form>
</body>
</html>
<head>
<script type="text/javascript">
function verify(){
var t1 = document.getElementById ('first');
var t2 = document.getElementById ('second');
if (t1.value != '') {
t2.setAttribute('disabled','disabled');
return true;
}
if (t2.value != '') {
t1.setAttribute('disabled','disabled');
return true;
}
}
</script>
</head>
<body>
...
<input type="text" id="first" onblur="verify()">
<input type="text" id="second" onblur="verify()">
...
</body>
You can't achieve this with plain HTML.
Following the guidelines of progressive enhancement, you should first implement a server side check in whatever form handler you are using to process the submitted data.
Then you can consider adding JavaScript for a client side check. Something along the lines of:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Disabling form controls</title>
</head>
<body>
<form id="myForm" action="http://example.com/">
<div>
<input name="t1">
<input name="t2">
</div>
</form>
<script type="text/javascript">
(function () {
var t1 = document.forms.myForm.elements.t1;
var t2 = document.forms.myForm.elements.t2;
var handler = function handler() {
t2.disabled = (t1.value !== "");
};
t1.onchange = handler;
}());
</script>
</body>
</html>
(Although I would use a library such as YUI or jQuery to add event handlers in a fashion that is better protected from overwriting in a crossbrowser compatible way).
You might want some tutorials on JavaScript and the DOM so that this makes sense.

Categories