Please help me on sending specific data only 'Name' and 'ON' or 'OFF' to XML file from a HTML page.
Problem is I couldn't connect all these with each other to get a result like below
<name>RYAN</name>
<BREAKING>ON</BREAKING>
Here is my code below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>BREAKING NEWS SWITCH</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h2 align="center">BREAKING NEWS SWITCH</h2><br /><br />
<form method="post" id="insert_data">
<div class="form-group">
<label>Enter Your Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Your Name Please....?"/>
</div>
<div class="form-group">
<label>BREAKING NEWS</label>
<div class="checkbox">
<input type="checkbox" name="BREAKING" id="BREAKING" unchecked />
</div>
</div>
<input type="hidden" name="hidden_BREAKING" id="hidden_BREAKING" value="OFF" />
<br />
<input type="submit" name="insert" id="action" class="btn btn-info" value="Insert" />
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#BREAKING').bootstrapToggle({
on: 'ON',
off: 'OFF',
onstyle: 'success',
offstyle: 'danger'
});
$('#BREAKING').change(function(){
if($(this).prop('unchecked'))
{
$('#hidden_BREAKING').val('OFF');
}
else
{
$('#hidden_BREAKING').val('ON');
}
});
$('#insert_data').on('submit', function(event){
event.preventDefault();
if($('#name').val() == '')
{
alert("Please Enter Your Name");
return false;
}
else
{
var form_data = $(this).serialize();
$.ajax({
url:"file:///C:/Documents/MY%20Projects/PHP%20toggles/BREAKING%20NEWS/insert.PHP",
method:"POST",
data:form_data,
success:function(data){
if(data == 'done')
{
$('#insert_data')[0].reset();
$('#BREAKING').bootstrapToggle('off');
alert("Data Inserted");
}
}
});
}
});
});
</script>
Here the problem is I can't connect those with the PHP file below.
PHP:
<?php
if(isset($_REQUEST['insert']))
{
$xml = new DOMDocument("1.0", "UTF-8");
$xml->load("C:\Documents\MY Projects\PHP toggles\BREAKING NEWS\TEMPLATE.xml");
$rootTag = $xml->getElementsByTagName("XML")->item(0);
$nameTag = $xml->createElement("name",$_REQUEST['name']);
$BREAKINGTag = $xml->createElement("BREAKING",$_REQUEST['BREAKING']);
$xml->save("C:\Documents\MY Projects\PHP toggles\BREAKING NEWS\TEMPLATE.xml");
}
?>
And thus this xml file is not updating as expected.
XML:
<?xml version="1.0" encoding="UTF-8"?>
<XML>
<name>NAMES INSERTED SHOULD BE HERE</name>
<BREAKING>TOGGLE ON/OFF SHOULD BE HERE</BREAKING>
</XML>
Please help me on that.
Related
Here I'm trying to execute the following code but it throws the above error in console log in website page, I am unable to identify the error .
I have coded this webpage in such a way that it should show an error like "enter the user name" and "enter the password" whenever the input boxes are left empty but instead of this it is showing an uncaught type error. Kindly help me to find the solution.
my github code link is:https://github.com/harish-123445/login-form-using-html-css-javascript
function vfun(){
var uname=document.forms["myform"]["uname"].value;
var pword=document.forms["myform"]["pword"].value;
if(uname==null || uname=="" ){
document.getElementById("errorBox").innerHTML =
"enter the user name";
return false;
}
if(pword==null || pword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" placeholder="enter username" >
<p>PASSWORD </p>
<input type="password" name="pword" placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</html>
I have edited your code. I have called your username and password using getElementById and your two error boxes with different id names and now it is working fine.
function vfun(){
var uname=document.getElementById("name").value;
var psword=document.getElementById("passw").value;
if(uname==null || uname=="" ){
document.getElementById("errorBox2").innerHTML =
"enter the user name";
return false;
}
if(psword==null || psword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" id="name"
placeholder="enter username" >
<div id="errorBox2"></div>
<p>PASSWORD </p>
<input type="password" name="pword" id="passw"
placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</html>
So like I want to make an input field required when a checkbox is checked an 'not required' when it is unchecked...I've tried the following code but it was not working ...please help...
<form action="#">
<input id='req'><input type="submit"></form><input type="checkbox" onclick="req()" id="check">
<script>
function req(){
var req = document.getElementById("req");
var checkBox = document.getElementById("check");
if (checkBox.checked == true){
alert("checked")
req.required==true
} else {
alert("uncheck")
req.required==false
}
}
</script>
Give this a try:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="results">
<form name="test" id="test" action="#" method="GET">
<div class="input-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="cbox">
<label class="form-check-label" for="cbox">Make field required</label>
</div>
</div><br>
<div class="input-group">
<input type="text" id="tbox" class="form-control">
</div><br>
<button type="submit" id="sub" class="btn btn-primary">Submit</button><br>
<small><span class="status"></span></small>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
// On click of checkbox
$('#cbox').click(function() {
// Check if it's checked
if ($(this).prop('checked')) {
// Add the required attribute to the text input
$('#tbox').attr('required', '');
// log our results and display a small indicator span status
console.log('input is now required');
$('.status').text('input is now required');
} else {
// If it isn't checked, remove the required attribute
$('#tbox').removeAttr('required');
// log our results and display a small indicator span status
console.log('input is no longer required');
$('.status').text('input is no longer required');
}
});
});
</script>
</body>
</html>
I coded an HTML form where I tried to validate it using javascript, However, the validation doesn't work. It should work on click of submit button. Everything looks fine! could not find the error! Please Help.
Below is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interst= document.myform.interst.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name = "myform" method="post"onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
<?php
if (!isset($amount7032)) { $amount7032 = ''; }
if (!isset($interest7032)) { $interest7032 = ''; }
if (!isset($years7032)) { $years7032 = ''; }
?>
You have written wrong form element name at below line
var interst= document.myform.interst.value;
it should be
var interest= document.myform.interest.value;
Basically because javascript was not able to find the form element and it was failing due to that.
I tried below code and its working:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interest= document.myform.interest.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name="myform" method="post" onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
There are two codes. one works the other doesn't work.
I debugged it and I found that
"var eb = new EventBus("http://192.168.0.27:8081/bridge");"
this line in login.js doesn't work well.
Thank you so much everytime.
working
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js"></script>
<script src="vertx-eventbus.js"></script>
</head>
<style>
.news {
font-size: 20pt;
}
</style>
<body>
<div class="news">Latest news:</div>
<br>
<div id="status" class="news"></div>
<script>
var eb = new EventBus("http://192.168.0.27:8081/bridge");
eb.onopen = function() {
// set a handler to receive a message
eb.registerHandler('call', function(error, message) {
console.log('received a message: ' + JSON.stringify(message));
});
// send a message
eb.send('call', {name : 'tim', age : 587});
}
</script>
</body>
</html>
no working - login.html
<!DOCTYPE html>
<!--
login.html
-->
<html>
<head>
<meta charset="UTF-8">
<title>Flat HTML5/CSS3 Login Form</title>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="login-form" id="loginForm">
<input type="text" id="username" placeholder="username" />
<input type="password" id="password" placeholder="password" />
<input class="submit" type="submit" title="Login" value="Login" onclick="check(this.form)" />
<p class="message">
Not registered? Create an account
</p>
</form>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
login.js
document.write("<script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>");
document.write("<script src='//cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js'></script>");
document.write("<script src='/vertx-eventbus.js'></script>");
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.username.value != "" && form.password.value != "") {
var eb = new EventBus("http://192.168.0.27:8081/bridge");
eb.onopen = function() {
// set a handler to receive a message
eb.registerHandler('call', function(error, message) {
console.log('received a message: ' + JSON.stringify(message));
});
// send a message
eb.send('call', {name : 'tim', age : 587});
}
} else {
alert("Input Password or Username")/*displays error message*/
}
}
You have written
document.write("<script src='/vertx-eventbus.js'></script>");
differently than in the working code. There is an extra "/" before "vertx..". Could that be the problem?
This is my simple html code. I included javascript inside this html file.I would like to perform validation on name like no empty field and data format validation but it is not working. Can some one please help me to get rid of this
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate()
{
var nam = document.forms[0].name.value;
if(nam == "")
{
alert("Name should be filled out");
document.getElementById("name").focus;
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font><br><br><br
<form name="form">
Name : <input type="text" name="name" id="name"><br><br>
<input name="Participate" type="button" value="Participate" onClick="validate()" >
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
You have a mistake in your HTML code. You forgot to close a <br> tag before <form name='form'>
Also, "focus" is a method, not a property. I have added that as well
Here is the corrected code.
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate() {
var nam = document.forms[0].name.value;
if (nam == "") {
alert("Name should be filled out");
document.getElementById("name").focus();
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font>
<br>
<br>
<br> <form name="form"> Name :
<input type="text" name="name" id="name">
<br>
<br>
<input name="Participate" type="button" value="Participate" onClick="validate()">
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>