I've got a really simple form that displays a single field. When you punch in a value and hit submit, it gives you a list of checkboxes. You check some and then click another button below and it displays a success/failure message.
I'm trying to convert this to a jQuery mobile app but am having nothing but problems. For example, I can pragmatically call a popup using $("#element").popup("open"); when the page first loads, but after the post when I call the popup open like above I see the URL change but no popup is visible and it's pretty much the exact same page. I also tried just posting the checkboxes to a secondary URL (/update) and then use an HTTP redirect back to the original page, but somehow jQuery Mobile is breaking that.
I've pasted the majority of the code below. If anyone can point me in the correct direction, that's all I'm looking for.
<!DOCTYPE html>
<html>
<head>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).on("pagecreate", function() {
$(document).on("click", "#button", function(e) {
// Do ajax stuff here
$("#popupBasic").popup("open");
});
});
</script>
</head>
<body>
<div id="lookup" data-role="page">
<div data-role="header">
<h1>Lookup Order</h1>
</div>
<div data-role="content">
<?php if (validation_errors()): ?>
<div class="errors"><?=validation_errors()?></div>
<?php endif; ?>
<?php if ($this->session->flashdata('error')): ?>
<div class="errors"><?=$this->session->flashdata('error')?></div>
<?php endif; ?>
<form method="post" id="search_form" action="/search">
<label for="term">Term:</label>
<input type="number" data-clear-btn="true" name="term" id="term" value="<?=set_value('term')?>" />
<input type="submit" value="Search" />
</form>
<?php if (!empty($fish) && $fish->num_rows()): ?>
<form method="post" action="/update">
<br /><strong>Species:</strong> <?=$species?><br />
<hr />
Uncheck All / Check All<br />
<?php foreach ($fish->result_array() as $k => $f): ?>
<fieldset data-role="fishgroup">
<?php if (!$f['is_deleted']): ?>
<input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" />
<?php else: ?>
<input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" disabled="disabled" />
<?php endif; ?>
<label for="checkbox-<?=$f['id']?>">
<?php if ($f['type']): ?>
<?= $f['1'] ?> <?= $f['2'] ?> Attr: <?= $f['3'] ?> Attr: <?= $seat['4'] ?>
<?php else: ?>
<?= $f['3'] ?> <?= $f['4'] ?>
<?php endif; ?>
</label>
</fieldset>
<?php endforeach; ?>
Uncheck All / Check All<br /><br />
<input type="button" value="Update Fish(s)" id="button" />
</form>
<?php endif; ?>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
</div> <!-- end content -->
</div><!-- end page -->
</body>
</html>
Using the following prevents the click handler from being called twice but I still don't get the actual popup after the initial page load:
$(document).off("click").on("click", "#button", function() {
$(" #popupBasic").popup("open");
});
All I'm getting is #&ui-state=dialog added to the URL, and calling $("#button").popup("close"); removes that.
It might be that youre attaching same handler multiple times add
<script type="text/javascript">
$(document).on("pagecreate", function() {
$("#button").off();
$(document).on("click", "#button", function(e) {
// Do ajax stuff here
$("#popupBasic").popup("open");
});
});
</script>
Related
In my web page, I am passing the value of a textarea to PHP via the POST Method. That value is supposed to be written into a file, but in the $_POST key which contains the value, it has no line breaks, so when it is written to the file, there are no line breaks (as if some one replaced \n with nothing).
Is there some PHP/JS function that replaces JS textarea newlines into PHP newlines that work in files?
Edit:
My code is supposed to be a file editor. Here it is:
<!DOCTYPE html>
<html>
<head>
<title>File Editor</title>
<meta charset="UTF-8"/>
<style>h1{text-align:center;font-size:40px;padding:10px;border:2px solid black;border-radius:10px;}textarea{width:90%;height:90%}</style>
</head>
<body>
<h1>File Editor</h1>
<?php
if(isset($_POST["save"],$_POST["extra"]))
file_put_contents($_POST["save"],$_POST["extra"]);
if(isset($_POST["delete"]))
unlink($_POST["delete"]);
if(!isset($_POST["filename"],$_POST["submit"])){
?>
<form action="editor.php" method="post">
<label for="filename" id="n">Enter a file to edit: </label>
<input type="text" name="filename" placeholder="Enter file name to edit"/>
<button type="submit" name="submit">Submit</button>
</form>
<?php }else{ ?>
<textarea><?php echo htmlspecialchars(file_get_contents($_POST["filename"])); ?></textarea>
<span style="display:none"><?php echo $_POST["filename"]; ?></span>
<form action="editor.php" method="post" style="display:none" id="a">
<input name="close" id="v" />
<input name="extra" id="e" />
</form><br/>
<button id="save">Save</button>
<button id="close">Close file</button>
<button id="delete" style="color:red">Delete file</button>
<script>
function submit(v,x,c){
document.getElementById("v").name=v;
document.getElementById("v").value=x;
document.getElementById("e").value=c;
document.getElementById("a").submit();
}
document.getElementById("save").onclick=function(){
submit("save",document.getElementsByTagName("span")[0].innerHTML,document.getElementsByTagName("textarea")[0].value.replace(/\n/g,"\r\n"));
}
document.getElementById("close").onclick=function(){submit("close");}
document.getElementById("delete").onclick=function(){
if(confirm("Are you sure you want to delete this file?"))submit("delete",document.getElementsByTagName("span")[0].innerHTML);
}
</script><br/><br/>
<?php } ?> </body>
</html>
I see that the purpose of your javascript code is only to fill in any input values. This can be done by utilizing <form> directly. Most likely, copying your data into a <input tye="text"> (text is the default type) will mangle your newlines.
Something like this should be equivalent and without the presented issue:
<!DOCTYPE html>
<html>
<head>
<title>File Editor</title>
<meta charset="UTF-8"/>
<style>h1{text-align:center;font-size:40px;padding:10px;border:2px solid black;border-radius:10px;}textarea{width:90%;height:90%}</style>
</head>
<body>
<h1>File Editor</h1>
<?php
if(isset($_POST["save"],$_POST["extra"]))
file_put_contents($_POST["filename"],$_POST["extra"]);
if(isset($_POST["delete"]))
unlink($_POST["filename"]);
if(!isset($_POST["filename"],$_POST["submit"])){
?>
<form action="editor.php" method="post">
<label for="filename" id="n">Enter a file to edit: </label>
<input type="text" name="filename" placeholder="Enter file name to edit"/>
<button type="submit" name="submit">Submit</button>
</form>
<?php }else{ ?>
<span style="display:none"><?php echo $_POST["filename"]; ?></span>
<form action="editor.php" method="post">
<textarea name="extra"><?php echo htmlspecialchars(file_get_contents($_POST["filename"])); ?></textarea>
<br/>
<input type="hidden" name="filename" value="<?= $_POST['filename'] ?>">
<button name="save">Save</button>
<button name="close">Close file</button>
<button name="delete" style="color:red">Delete file</button>
</form>
<script>
document.getElementById("delete").onclick=function(e){
if(!confirm("Are you sure you want to delete this file?")) e.preventDefault();
}
</script>
<br/><br/>
<?php } ?>
</body>
</html>
Also as mentioned, you will probably need to format the newlines for html when displaying.
When needing to pass the same or hidden data you can use <input type="hidden" name=".." value="..">. This is used to pass the filename. The desired action is passed with the button press. The name of button you press will be passed in the request.
In your PHP code, you can do:
$text = nl2br($_POST['name_of_textarea']);
Then save $text into the file.
This will preserve line breaks.
How can I change a web page title for everyone on that site and not to be changed with refreshing, using javascript or PHP?
I've tried HTML DOM title but it gets back to its first title after refreshing.
I've tried giving variable in PHP and changing it by after a button pressed but the title didn't change!
These were my codes:
<?php
$title = "Chat";
?>
<html>
<head>
<title><?php echo $title ?></title>
</head>
<body>
<div id="chat_messages"></div>
<form enctype="multipart/form-data" method="post">
<input onClick="dokme()" class="button2" type="submit" name="send" value="Send">
</form>
</div>
<?php
if(isset($_POST['send'])){
$title = "new message";
}
?>
</body>
</html>
Any idea what should I do?
Glad to help.
Of course the title won't change, because php reads your code from 1st line to the end, and you have already added $title = "Chat";
what to do is to change the code like this:
<?php
if(isset($_POST['send'])) $title = "new message";
else $title = "Chat";
?>
<html>
<head>
<title><?php echo $title ?></title>
</head>
<body>
<div id="chat_messages"></div>
<form enctype="multipart/form-data" method="post">
<input onClick="dokme()" class="button2" type="submit" name="send" value="Send">
</form>
</div>
</body>
</html>
This will change the title.
Also, if you want to change the title without refreshing the page, you need JS.
Just use
document.title = '***'; //use your title to replace "***"!
Have a good day~
There are some mistakes in your code like you have used onClick instead you should use onclick
you have not putted a semicolon ; while you are typing
You have not assigned action to your form
Action will be echo htmlspecialchars($_SERVER['PHP_SELF'])
And we will use if else
This will work
<?php
if (isset($_POST['send'])) {
$title = "new message";
} else {
$title = "Chat";
}
?>
<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
<div id="chat_messages"></div>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" enctype="multipart/form-data" method="post">
<input onclick="dokme()" class="button2" type="submit" name="send" value="Send">
</form>
</div>
</body>
</html>
I hope this will Help you
I am using PHP and I have a form that I want to disappear/hide when the user clicks submit. It shouldn't appear/show for same user again.
form.php
<?php
session_start();
include('config.php');
if(isset($_SESSION['User']))
{
$nameuser = $_SESSION['User'];
}
else
{
header("location:signin.php");
}
?>
<!doctype html>
<html lang="en" class="no-js">
<head>
<title></title>
</head>
<body>
<header>
</header>
<!-- Form -->
<main class="cd-main-content">
<div class="container">
<form id="question_form" novalidate action="insertswat.php" method="post">
<div class="row">
<div class="col-25">
<label for="title">Swat form</label>
</div>
<div class="col-75">
<input type="text" id="" name="swat" >
</div>
</div><!--End -->
<hr>
<div class="row">
<input type="submit" value="submit">
</div>
</div></form><!-- End form -->
</main>
<!-- cd-main-content -->
</body>
</html>
insertswat.php
<?php
include('config.php');
$swat=$_POST['swat'];;
// Insert data into mysql
$sql = "INSERT INTO swatreport (swat)
VALUES ('$swat')";
if (mysqli_query($con, $sql)) {
header("location:swatform.php?q=success");
} else {
header("location:swatform.php?q=error");
}
mysqli_close($con);
?>
How could I go about this?
When user fill text field and clicks Submit
He will never see that form again
You can change this line <input type="submit" value="submit">
to assign id and name like this:
<input type="submit" name="submit" id="submit" value="submit">
Then:
<?php
$submit = $_POST['submit'];
if(!isset($submit)){
//Do NOT put closing curly brace
?>
<form>
//Your form you want to hide on submit
</form>
<?php
} //this is the closing curly brace
?>
//Put the stuff you want to show after submit here...
in header check if userlogged in
session_start();
if(!isset($_SESSION['loggedin'])){
header('location:login.php');
exit();
}
Try this JQuery snippet,
<script>
$( "#questions_form" ).submit(function( event ) {
$("#questions_form").fadeOut(500);
event.preventDefault();
});
</script>
How to execute Jquery Ajax post data on multiple pages.
For Example, I am using three pages named Page1,Page2,Page3. I need to post data from Page 1 -> Page2 and,from Page2 -> Page 3. User initiates only on Page1, all other function should performed in background. Is that possible?
This is the code used.
Page1.php:
<html>
<head><title>Page1</title></head>
<script src="/path to/jquery.min.js"></script>
<body>
<button type="button" class="btn" id="bt">SEND</button>
<script>
var a1="Hello";
var b1="Testing Ajax";
$(function(){
$('#bt').click(function(){
$.ajax({
url: 'Page2.php',
type: 'POST',
data: {'w1': a1,'w2':b1},
alert("Data Sent...");
},
error: function() {
alert("Unable to send data now.");
}
});}); });
</script>
</body>
</html>
Page2.php:
<html>
<head><title>Page 2 </title></head>
<body>
<?
$r1 = $_POST['w1'];
$r2 = $_POST['w2'];
?>
<div id="dom1" style="display: none;">
<?php
$r1 = $_POST['w1'];
echo htmlspecialchars($r1);
?>
</div>
<div id="dom2" style="display: none;">
<?php
$r2= $_POST['w2'];
echo htmlspecialchars($r2);
?>
</div>
<script>
var div1 = document.getElementById("dom1");
var m1 = div1.textContent;
//alert(m1);
var div2 = document.getElementById("dom2");
var m2 = div2.textContent;
//alert(m2);
$.ajax({
url: 'Page3.php',
type: 'POST',
data: {'x1': m1,'x2':m2},
alert("Data Sent...");
},
error: function() {
alert("Unable to send data now.");
}
});
</script>
</body>
</html>
Page3.php:
<html>
<head>
<title>Page3</title></head>
<body>
<div id="dom3">
<?php
$r1 = $_POST['x1'];
echo htmlspecialchars($r1);
?>
</div>
<div id="dom2">
<?php
$r2 = $_POST['x2'];
echo htmlspecialchars($r2);
?>
</div>
</body>
</html>
There are several ways you can solve your problem.
PHP Sessions
You can easily start a session in every of your pages and post
<?php
// every page needs to start the session
session_start();
// after submission or posting
$_SESSION['data'] = $your_data;
?>
So on your next page you can easily access your data via session.
<div>
<?= $_SESSION['data']['var1'] ?>
</div>
Use Forms and send them via jQuery ajax requests and put the form values on the next page into hidden input elements.
<!-- example for page 2 -->
<form id="your_form" method="post" action="">
<input type="hidden" name="var1" value="<?= $var1 ?>">
<input type="hidden" name="var2" value="<?= $var2 ?>">
<input type="submit" id="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
$('#submit').on('click', function( event ) {
event.preventDefault();
$.ajax({
url : your_url,
type : 'POST',
data : $('#your_form').serialize();
});
});
</script>
Just don 't use ajax. You really don 't need it, wenn you jump from page to page. Look the example below.
<!-- on page1.php just a quick form -->
<form id="form1" method="post" action="page2.php">
<label for="var1">Var 1</label>
<input type="text" name="var1" id="var1" value="">
<input type="submit" name="submit" value="submit">
</form>
<!-- on page2.php just another quick form with hidden elements -->
<form id="form2" method="post" action="page3.php">
<label for="var2">Var 2</label>
<input type="text" name="var2" id="var2" value="">
<input type="hidden" name="var1" value="<?= $_POST['var1'] ?>">
<input type="submit" name="submit" value="submit">
</form>
In every 3 given examples you should consider the securty stuff like escaping post vars, etc.
this is my main page where i have radio button which when clicked a value will be passed via ajax and the result is checked by ajax and the corresponding output is displayed for each question correct/Incorrect. And the problem is my unbind event is working fine once i click on radio button answer is checked and result is displayed and nothing happens when i click again but the problem is click event is not removed i can click again and again thought the function is working fine and only once.
So how do i make it not click able once clicked ,where is the problem
<!doctype html>
<head>
<link href="<?php echo base_url('css/style.css');?>" type="text/css" rel="stylesheet"/>
<script src="<?php echo base_url('javascript/jquery.js');?>" rel="javascript" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="main-content">
<?php foreach($result as $rows):?>
<form>
<div class="question-box">
<?php echo '<h1 class="Qbanner">Q.</h1>'.'<h2>'.$rows->question.'</h2></br>';?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="a"><?php echo $rows->option1;?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="b"><?php echo $rows->option2;?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="c"><?php echo $rows->option3;?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="d"><?php echo $rows->option4;?>
<h5 class="result"></h5>
</div>
</form>
<?php endforeach;?>
</div>
</div>
<!-- wrapper div ends -->
<script>
$(document).ready(function(){
var clickedval,qid;
$("input:radio").bind('click',function(e){
clickedval=$(this).val();
qid=$(this).attr('name');
var siteurl='<?php echo site_url();?>' + '/site/checkAnswer';
$this=$(this).parent("div.question-box");
$allradio=$(this).parent("div.question-box").children();
$.ajax({
url:siteurl,
dataType:'json',
type:'post', data:{'answer':clickedval,'questionid':qid},
success:function(data){
$this.find('.result').html(data.resultstatus);
$allradio.unbind('click');
}
});
});
});
</script>
</body>
</html>
You can disable it by adding $(this).prop('disabled', true) to your click event function.