Appending a child in Cake - php

I'm using cake & have a web form for entering URLs to go into my db. There will be one input space (url1) and below that a link that says "add another URL" which, when clicked, generates a new form (url2) and reuses the "add another URL". So it would be like:
echo $form->input('name');
echo $form->input('id');
echo $form->input('url1');
echo $form->input('weight1');
echo 'add another URL';
and then, if XXX is clicked it would be like this:
echo $form->input('name');
echo $form->input('id');
echo $form->input('url1');
echo $form->input('weight1');
echo $form->input('url2');
echo $form->input('weight2');
echo 'add another URL';
Is there a jquery script I can use to do this or does cake have something built in?

Haven't try the code but i would do something like this:
<form>
<div id="mainData">
echo $form->input('name');
echo $form->input('id');
</div>
<div id="urlsHolder">
<div class="url">
echo $form->input('urls[]');
echo $form->input('weights[]');
</div>
</div>
add another URL
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#addUrl').click(function( event ){
event.preventDefault();
$('div.url').filter(':first').clone().appendTo('#urlsHolder');
});
});
</script>
When the form is submited do a foreach for $_POST['urls'] and $_POST['weights'].
There is room for improvement, It's just an inspirational example.
Hope it helps.

Actually I think it's not necessary to do your work like this.According to your description,I think you can change the add another URL to any other element such as a button,which will make a hidden div visible when clicked.Then it will be what you want.

Related

How to create confirm yes/no in php?

I want to create a confirm yes/no box in php
my code like this:
<?php
if(isset($_REQUEST['id']))
{
?>
<script>
var cf=confirm("do you want to delete Y/N");
if(cf)
{ i want to call code edit of php
}
</script>
<?php
}
?>
<html>
<head>
</head>
<body>
<form name="frm" method="post" action="edit.php">
Edit <br>
Edit <br>
Edit <br>
</form>
</body>
</html>
I Want to when press Yes i call code edit in PHP
But it do not work.
Can you help me ?
Thanks you
Just use inline onclick event.
This is a simple techique, you can use it in your PHP page.
Edit
In your code, you have mentioned PHP but, have used JavaScript.
If you want to do a confirm with PHP,
Create an intermediate page for confirmation.
Post form data there.
On confirmation page, add two submit buttons:
Yes: If pressed this, redirect/post to edit page.
No: If pressed this, redirect back to form
So, your confirmation page should be:
<html>
<head>
</head>
<body>
<?php
if (isset($_POST['confirm'])) {
if ($_POST['confirm'] == 'Yes') {
header("Location:edit.php?id=1");
}
else if ($_POST['confirm'] == 'No') {
header("goBack.php");
}
}
?>
<form method="post">
<?php
if(isset($_REQUEST['id']))
{
?>
<input type="submit" name="confirm" value="Yes"><br/>
<input type="submit" name="confirm" value="No"><br/>
<?php
}
?>
</form>
Put an id on your form:
Create an event listener for the form's onsubmit event
<script>
function onFormSubmission(e){
return confirm("do you want to delete Y/N");
}
var frm = document.getElementById('frm');
frm.addEventListener("submit", onFormSubmission);
</script>
When the user submits a form they will be prompted with your message. If they click Yes the function will return true and the form will be submitted. Otherwise the function will return false and the form submission will be cancelled
I think this is what you want to do:
<?php
//YOU MUST BE SURE THAT YOUR URL CONTAINS THE $_REQUEST['id'] PARAMETER, OTHERWISE IT WON'T WORK FROM YOUR CODE... IF YOU WANT IT TO WORK REGARDLESS OF THAT, JUST COMMENT OUT THE IF(ISSET(... BLOCK...
$editURL = "edit.php"; //EDIT URL HERE
if(isset($_REQUEST['id'])) {
//ASSIGN THE ID TO A VARIABLE FOR BUILDING THE URL LATER IN JS...
//THE DEFAULT ID IS 1 BUT YOU CAN DECIDE WITH YOUR OWN LOGIC
$defaultID = ($dID = intval(trim($_REQUEST['id']))) ? $dID : 1;
?>
<script>
function confirmEdit(evt){
evt.preventDefault();
var cf=confirm("do you want to delete Y/N");
var id=<?php echo defaultID; ?>;
if(cf){
//i want to call code edit of php
//HERE'S THE CODE YOU MAY NEED TO RUN;
if(id){
//RETURN TRUE SO THAT THE SCRIPT WITH LINK TO THE APPROPRIATE URL
return true;
// OR REDIRECT WITH JAVASCRIPT TO EDIT PAGE WITH APPROPRIATE ID
//window.location = "" + <?php echo $editURL; ?> + "?id=" + id; //YOU ALREADY HAVE THE EDIT URL... JUST APPEND THE QUERY-STRING WITH ID TO USE IN THE EDIT PAGE
// You might also just (without redirecting) return true here so to that the page continues like you just clicked on the link itself...
}
}
}
</script>
<?php
}
?>
<html>
<head>
</head>
<body>
<!-- THE FORM TAG IS NOT NECESSARY IN THIS CASE SINCE YOUR ANCHOR TAGS HAVE THE EXACT URL YOU WANT ASSOCIATED WITH THEM... AND YOU DON'T EVEN NEED JAVASCRIPT IN THIS CASE... BECAUSE THE HREF OF THE LINKS ARE HARD-CODED... -->
<!-- <form name="frm" method="post" action="edit.php"> -->
<a class='class-4-css' onclick="confirmEdit();" id='dynamic-id-based-btn-1' href="edit.php?id=1">Edit Page 1 </a> <br>
<a class='class-4-css' onclick="confirmEdit();" id='dynamic-id-based-btn-2' href="edit.php?id=2">Edit Page 2</a> <br>
<a class='class-4-css' onclick="confirmEdit();" id='dynamic-id-based-btn-3' href="edit.php?id=3">Edit Page 3</a> <br>
<!-- </form> -->
</body>
</html>
So, now clicking on any of the Links will Ask me to confirm if I want to delete the Resource or not. If I choose yes, then the appropriate page is loaded for the Process...
not sure if the other answers really answered your question, this was my problem too, then I experimented and here's what I came up with:
.
confirmation in php :
$Confirmation = "<script> window.confirm('Your confirmation message here');
</script>";
echo $Confirmation;
if ($Confirmation == true) {
your code goes here
}
that's all, other people might look for this, you're welcome :)
I was looking to simply have a confirmation box in php before triggering POST isset without going through javascript:
echo "<input id='send_btn' type='submit' value='previous'
name='previous' OnClick=\"return confirm('Are you sure you want to go
to previous');\" >";
This appeared for me to be the easiest solution.

Add items to array without refreshing the page?

http://alpha.ripfy.com/
As seen in the following demo, I have a YouTube video that I want to be able to play while adding items to the array in PHP. Sadly, this isn't possible from what I've tried because the page refreshes every time I add an item to the array.
Would there be any way of achieving this without the page refreshing (forcing the video to restart?)
Code:
<?php
if (isset($_POST['playlist'])) {
$playlist = $_POST['playlist'];
} else { // Else set my default list
$playlist = array("Be more.mp3", "Drift Away.mp3", "Panda Sneeze.mp3");
}
if (isset($_POST['name1'])) {
$playlist[] = $_POST['name1'];
}
?>
<form method="post">
<?php
foreach($playlist as $song) {
?>
<input type="hidden" name="playlist[]" value="<?php echo $song?>">
<?php
}
?>
<input type="text" name="name1"/>
<input type="submit" name="submit1"/>
</form>
<iframe width="560" height="315" src="https://www.youtube.com/embed/pzB6CxChIQk" frameborder="0" allowfullscreen></iframe>
<?php
foreach ($playlist as $value) {
echo $value."<br>";
}
?>
Thanks for helping me out!
if you need that these information be storaged in database or anything on server sider don't use the convencional form post, use AJAX with JQuery.
First create a div(container)to render the list content where you need the information apears:
<div id="list_musics"></div>
Then create a page(i.e. page.ajax.php) that will treat your request. If you need you can put the information in a database or anything you want by this page. This page must return the content you want to render.
HTML:
<input type="button" id="ajaxcaller">
JQUERY:
$('#ajaxcaller').on('click', function(){
//AJAX CALL WITH POST METHOD
var text = $('input[name=name1]').val();
$.post(page.ajax.php,text,function(data){
//Render your content in the container created on HTML
$("#list_musics").html(data);
});
});
If you just need to show what you wrote on text input instead of storage or treat the information, you may just use JQUERY to render the information in the container you created.
$('#ajaxcaller').on('click', function(){
//AJAX CALL WITH POST METHOD
var text = $('input[name=name1]').val();
// PUT THE TEXT RIGHT AFTER THE CONTENT THAT ALREADY EXISTS IN THE CONTAINER
$("#list_musics").append(text);
});
Take a look here to see the sencond option:
https://jsfiddle.net/wqLf65ox/
Here's my answer. That fully works. In this script, the server checks the presence of a name1 request (post or get). If exists, it returns the string posted (only) and if doesn't, it returns what already was there. And the post() method posts (gets) the data and appends to the container using innerHTML+= data + "<br>";
evaluate the code, it should be self explanatory.
<?php
if (isset($_REQUEST['playlist'])) {
$playlist = $_REQUEST['playlist'];
} else { // Else set my default list
$playlist = array("Be more.mp3", "Drift Away.mp3", "Panda Sneeze.mp3");
}
if (isset($_REQUEST['name1'])) {
// if exists, return plain text responce. NOT HTML
$playlist[] = $_REQUEST['name1'];
echo $_REQUEST['name1'];
}
else{
?>
<html>
<head>
<title>Demo</title>
<script src="jquery.js"></script>
</head>
<body>
<script>
text= ""
function onUpdate(){
text = document.getElementById("name1").value;
}
function handler(data){
document.getElementById('container').innerHTML += data+"<br>";
}
function post(){
onUpdate();
$.get("index.php", name1="+text, handler);
}
</script>
<input type="text" name="name1" id="name1"/>
<input type="submit" name="submit1" onclick="post()"/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/pzB6CxChIQk" frameborder="0" allowfullscreen></iframe>
<br>
<div id="container">
<?php
foreach ($playlist as $value) {
echo $value."<br>";
}
?>
</div>
</body>
<?php };?>
Although, it works as intended, i don't see the point of using it. just plain js should work
You have to send your form using Ajax, eg. via jQuery.post() method.
After that you have to reload your container with list or add new item there with JavaScript.
Try using the $.post and $.get JQuery methods. One method might be to $.post back to a .php page that renders a container of html, then use $.get to retrieve just that html container and insert into the DOM.

Is it possible to call a popup without using onclick or href?

I have a button that updates the query, after which I want a popup to appear.
I have used it like this:
<input type="submit" name="details" value="Details"/>
if(isset($_POST['details']))
{
// update function;
call a popup;
}
I don't want to use popup as
<button id="popup" onclick="div_show()">Popup</button>`
Or
<a href="#openModal" id="btn">
I want it as isset(..) , Is it possible? If yes how should I call a simple popup having a message and 2 buttons? (I don't want to use alert, prompt, confirm boxes , It should be a popup).
Please help.
If you are making the pop-up with java-script, you can do it like this :
<?php
if(isset($_POST['details']))
{
// update function;
echo '<script type="text/javascript">Call_PopUp(); </script>';
}
?>
or even a popup with html (iFrame)
<?php
if(isset($_POST['details']))
{
// update function;
echo '<iframe> Pop-Up here </iframe>';
}
?>
You can echo javascript code with windows.open like this:
<?php
if(isset($_POST['details']))
{
// update function;
echo "<script type='text/javascript'>var url = 'http://www.google.com'; window.open(url,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=1076,height=768,directories=no,location=no'); </script>";
}
?>
The problem with popup windows is that are blocked by all modern browser, can you evaluate modal popup instead of popup windows.

Wordpress submit a form, update link with form input and go to that link & link is "#"?

This code is a form that results in a link being created with variable $ui.
<form method="post" name="form" onsubmit="#">
Name search:
<input id="ui" type="text" name="ui" />
<input type="submit" class="Submit" value="submit" />
</form>
Then the variable $ui is used to set the value of the data-filter attribute. When you click the link (after the form submits) it goes to "#" which performs a sorting/listing function and reloads the page without refreshing.
<?php if(isset($_POST["ui"]))
{
$ui = $_POST["ui"];
}
$Filterclass = strtoupper(str_replace(" ", "-", $ui));
?>
<a href="#" id="gallery_filter"
data-filter=".<?php echo $Filterclass; ?>">
<?php echo strtoupper($ui); ?></a>
Right now, the form submits and then the link is created, then you can click on it.
It works as-is, but I'd like to have the 'submit' button just open that link, the one with newly updated data-filter attribute.
I would ask this is Wordpress.exchange but I think is too advanced.
I won't write the whole process but modify your existing code as below(assuming jquery is already loaded)
<?php if(isset($_POST["ui"]))
{
$ui = $_POST["ui"];
echo '<script type="text/javascript">
jQuery(document).ready(function(e){
jQuery("#gallery_filter").click();
});
</script>';
}
$Filterclass = strtoupper(str_replace(" ", "-", $ui));
?>
<a href="#" id="gallery_filter"
data-filter=".<?php echo $Filterclass; ?>">
<?php echo strtoupper($ui); ?></a>

Javascript form submission doesn't give proper result

i have set the form action to a text retrieved from the database which has an id.my problem is when the form action executed it always shows the first id even if i clicked on the text holding id=2.I have checked the page source and it's showing the correct id for all the text.
here is my view code
<?php foreach ($content as $cont):?>
<form id="offer" method="post" action="<?php echo base_url() . 'index.php/pages/detail'?>">
<input type='hidden' name='cont_id'id='cont_id' value='<?php echo $cont->id?>'>
<a onclick="document.getElementById('offer').submit();"><?php echo $cont->title?></a>
</br>
</form>
<?php endforeach;?>
</div>
<script>
function submitForm() {
document.getElementById("offer").submit();}
</script>
here is my controller :
echo $this->input->post('cont_id');
You can use .submit()
Submit
If you have JAVASCRIPT knowledge you can use the
document.getElementById("myForm").submit();
method to submit the form..
create a Javascript Function
<script>
function submitForm()
{
document.getElementById("myForm").submit();
}
</script>
use this code for the text you want to hyperlink the button to
<h1 onclick="submitForm()">Click on this text</h1>

Categories