Submitting html form in php - javascript

This is my first.php page html part. I have a form including a div and a submit button. I want when button clicked, open a new page (second.php) and display contents of div(id=orderList)
<form id="orderForm" action="second.php">
<div class="col-md-5" id="orderList">
<h3 align="center">Sipariş Listesi</h3>
</div>
<div>
<button type="submit" id="firstConfirmButton" class="btn btn-primary btn-lg">Onayla</button>
</div>
</form>
This is javascript part;
$("#orderForm").submit(function() {
var content = $('#orderList').html();
console.log(content); //(no problem everything is ok)
$('#confirmForm').val(content);
var content2 = $('#confirmForm').html();
console.log(content2); //(it is null)
});
And this is second.php where I want to display the contents in the div(id=confirmForm)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<META name=viewport content="width=1024, initial-scale=1">
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META HTTP-EQUIV="Content-language" CONTENT="tr">
<link href="shift.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="product.css">
</head>
<body>
<div id="confirmForm"> </div>
</body>
</html>
It doesn't work, what should I change?

If $('#confirmForm') is not an input item you cant access it using $('#confirmForm').val();
your Form is missing method attribute, add POST in method by default its GET
<form id="orderForm" method="post" action="second.php">
Add a <textarea> in first.php inside orderForm to hold the content of #ordelist using jquery and in second page you can get it using $_POST['confirmForm'];
<textarea name="confirmForm" id="confirmForm" cols="30" rows="10"></textarea>
in second page you do this
<div id="confirmForm"> <?php echo $_POST['confirmForm'] ?> </div>

You're trying to put the content in #confirmForm, which isn't present in the first file.
There is no need for JavaScript here. Grab the content of the div using $_['post']

Try this its working :
first.php
<html>
<head>
</head>
<form id="orderForm" action="second.php">
<div class="col-md-5" id="orderList">
<textarea name="confirmForm" id="confirmForm" cols="30" rows="10">Sipari Listesi</textarea>
</div>
<div>
<button type="submit" id="firstConfirmButton" class="btn btn-primary btn-lg">Onayla</button>
</div>
</form>
</html>
second.php
<html>
<body>
<?php
echo $_REQUEST[confirmForm];
?>
</body>
</html>

In addition to what Saqueib said, I think you'll need to make a jQuery change too. I think you're looking for the html() method, not val() because it looks like you're trying to change the displayed HTML, right?

Related

If you add HTML Elements to the DOM using Javascript's innerHTML is there a way to access those elements with Javascript?

I am trying to add more HTML elements to the DOM with a button's onclick using "innerHTML" and template literals. That much is working, but when I try to get access to the elements via a "getElementBy" or "querySelector", I can't; and I don't know why not. Any help is appreciated, thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Adding and grabbing HTML Elements</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="add-character">Add</button>
<div id="grid"></div>
</body>
<script src="main.js"></script>
</html>
** Javascript**
let grid=document.getElementById("grid")
console.log(grid)
const addCharacter=document.getElementById("add-character")
console.log(addCharacter)
let Hp=0;
let num=0;
addCharacter.addEventListener("click",()=>{
grid.innerHTML+=`
<div id="subgrid" class="subgrid">
<br>
<div id="status" class="status">Status</div>
<br>
<div id="iniative" class="iniative">Iniative</div>
<input id="iniativeel" id="iniativeel" type="number">
<button id="inativebtn" class="inativebtn">Submit</button>
<br>
<div id="character" class="character">Character</div>
<br>
<div id="healthpoints" class="healthpoints">Healthpoints</div>
<br>
<input id="initalHp" class="initalHp" type="number">
<br>
<Button id="initalhp" class="initalhp">Submit</button>
<br>
<input id="damage" class="damage" type="number">
<br>
<button id ="damagebtn" class="damagebtn">Submit</button>
<br>
<div id="weapons" class="weapons">Weapons</div>
</div>`
})
btn()
function btn(){
let iniativeBtn=document.querySelector("#iniativebtn").textContent
console.log(iniativeBtn)
}

Templates in Ractive.js

I am new to Ractive.js and just playing around with it. I am trying to build a simple app, but strangely, it's not working on my pc and I am getting an error in console "Could not find template element with id #template", where #template refers to the id assigned to script tag. Nothing gets rendered on my browser. However, the same code is running fine in JSFiddle. Can someone explain what is happening here?
Here is the fiddle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Weather Details</title>
<meta name="description" content="Get weather for your city">
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link rel="stylesheet" href="weather.css">
<script src='https://cdn.ractivejs.org/latest/ractive.js'></script>
<script src="weather.js"></script>
</head>
<body>
<div id="main" class="page-container">
<script id='template' type='text/ractive'>
<div class="weather-widget">
<div class="input-group">
<label>City Name</label>
<input type="text" class="form-control" placeholder="Enter City Name" />
</div>
<div class="input-group">
<label>Recent Searches</label>
<select>
<option>Select from recent searches</option>
</select>
</div>
<div class="weather-details">
<table>
<tbody>
<tr>
<th>Wind</th>
<td>{{country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
</div>
</body>
</html>
Code in weather.js:
var ractive = new Ractive({
el: '#main',
template: '#template',
data: {
country: 'London'
}
});
At the time weather.js executes, the element hasn't yet been created. You could either move the <script src='weather.js'></script> tag to the bottom of the page (inside <body>, after the topmost <div> containing the template element the script refers to), or add a defer attribute: <script defer src='weather.js'></script>.

Material Design Lite Switch not working on jquery load

I am trying to load MDL Switch through external file but it's not working.
Here is my main page code : index.php
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="material.min.css">
</head>
<body>
Load
<div class="demo-switch">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
<span class="mdl-switch__label">Bluetooth</span>
</label>
</div>
<script src="js/material.min.js"></script>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$.getScript("js/material.min.js").done(function(){
$(document).on("click",".lo",function(){
$('.demo-switch').load("new_test.php");
});
});
});
</script>
</body>
</html>
Here is file new_test.php
<div class="demo-switch">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
<span class="mdl-switch__label">Bluetooth</span>
</label>
</div>
Here are the result after i press load button:
possible js is not working properly but i can't find a way to fix this.
please help
You Will need to call componentHandler.upgradeAllRegistered() for dynamic dom.
Add componentHandler.upgradeAllRegistered() at the very bottom of your view (new_test.php, in this case).

Bootstrap datepicker getDate and SQL

i want to get date from and make SQL query with it, but i have a little problem :S
I cant get the date and i don't know how to give to an php variable :S
Even more i'm not allowed to use submit (Post and Get methods)
<?php
session_start();
if(isset($_SESSION['myusername']))
{
$hi='';
}else
{
header("location:login.php");
}
require_once '../../templates/DBconnect.php';
$link = DBconnect::connect();
?>
<html>
<head>
<title>bootstrap datepicker examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap CSS and bootstrap datepicker CSS used for styling the demo pages-->
<link rel="stylesheet" href="../css/datepicker.css">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div class="container" width="50%">
<div class="hero-unit" width="50%">
<input type="text" placeholder="Begin Date" id="example1">
</div>
</div>
<div class="container" width="50%">
<div class="hero-unit" width="50%">
<input type="text" placeholder="End Date" id="example2" onchange="hole()">
</div>
</div>
<!-- Load jQuery and bootstrap datepicker scripts -->
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#example1').datepicker({
format: "dd-mm-yyyy"
});
});
$(document).ready(function () {
$('#example2').datepicker({
format: "dd-mm-yyyy"
});
});
function hole(){
this.$('.example1').datepicker('getDate');
alert($('#example1').val());
}
</script>
</body>
</html>
You have to use client side script such as JavaScript to pass the SQL query without submitting the page. Some JavaScript libraries such as jquery can be used with minimal JavaScript code.

Countdown script not starting countdown

Can someone please tell me why the countdown function is not working properly (the countdown is not starting in the div with the I.D. "countdown"). Probably something real simple, but Javascript isn't my forte. This is the countdown plugin I am using: http://keith-wood.name/countdown.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/web-style-second.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="chrome://mozbar/skin/css/injected.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="content">
<div class="center">
<center>
<div></div>
</center>
</div>
<script type="text/javascript">
$(function() {
$('#countdown').countdown({
until: '14min+20sec',
format: 'MS',
layout: '{mnn}min ' + '{snn}sec ',
onExpiry: function() {
$(".hidden").css("display", "block");
}
});
});
</script>
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 class="hasCountdown" id="countdown">14min 20sec </h4>
</div>
<form name="signupFrm" id="signupFrm" action="#" method="post" class="hidden">
<div>
<div class="yellow_red">
<h1></h1>
</div>
<div class="center">
<a href="https://www.testing.com" class="btn_buy_now">
Get Started</a>
</div>
<input name="submit" value="submit" type="hidden">
<p class="mb_5"> </p>
</div>
</form>
<div class="fnote justify">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You should put the $(function () ...) script into the <head> tag of your HTML page. This way, the countdown will be initiated once the DOM has fully loaded.
I think that the problem is that you are missing the reference to the "jQuery Countdown CSS". In the usage instructions of the plugin it says:
Download and include the jQuery Countdown CSS and JavaScript in the
head section of your page. #import
"jquery.countdown.css";
But you can still make it work without the "jQuery Countdown CSS" if you remove the class attribute from the <h4> element with the id "countdown", like this:
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 id="countdown">14min 20sec </h4>
</div>
​JSFiddle Example
The countdown plugin uses the class hasCountdown to test whether the countdown has already been instantiated, so you should use a different class name.
From jquery.countdown.js:
/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'

Categories