I'm working on a simple webpage for a company and the company wants to be able to edit the content themselves from time to time. However they have no programing knowledge and therefore I want to use an embedded HTML editor, I have chosen jQuery TE.
The problem is that I only know how to use this as a form, e.g.:
<form id = "wyForm" method="post" action="test.php">
<textarea class="editor"name = "testText">Hi</textarea>
<input type="submit" class="wymupdate" />
</form>
Then I would convert the textarea to an editor with jQuery:
<script> $('.editor').jqte() </script>
This makes it possible to send the result to a .php page that updates the database. However many times I don't want to use a textfield or a form, but just a simple object that I convert to an editor in the same way. But how do I save the change in that case?
Catch the form submit event and copy the content to a hidden field.
<form id = "wyForm" method="post" action="test.php">
<div class="editor" name="testText">Hi</div>
<input type="submit" class="wymupdate" />
<input type="hidden" id="editorHiddenField" />
</form>
...
$('#wyForm').submit(function() {
$('#editorHiddenField').val($('.editor').html());
});
You may need to use an API to get the content instead (I'm not familiar with the plugin), but the concept is sound.
Edit - If you don't want to use a form at all:
<div class="editor></div>
<button id="SaveButton">Save</button>
...
$(document).ready(function() {
$('#SaveButton').click(function(e) {
e.preventDefault();
$.post('savepage.php', { data: $('.editor').html() }).done(function() { alert('saved!'); });
});
});
Related
I have a php file localhost/~user/sample.php file which gets data from post method.
<?php
$you = $_POST["ids"];
$start= $_POST["start"];
echo $you."--".$start;
I want to write a jquery code which will open the url "localhost/~user/sample.php" in a separate window on button click inside my html page and also pass the arguments required for it.
I can use get method in php, but the number of variables are more
I would probably go for using a form, like so:
<form action="sample.php" method="post" target="_blank">
<input type="hidden" name="name1" />
<input type="hidden" name="name2" />
...
<input type="hidden" name="name20" />
<input type="submit" value="Go to page">
</form>
This is the most cross-browser JS-failsafe basic html version way of achieving this task that I can think of...
If you need to dynamically add form fields to the form, I believe you will find this question: Jquery - Create hidden form element on the fly handy. Copying the modified answer:
$('<input type="hidden" name="myfieldname" value="myvalue">').appendTo('form');
One way would be to dynamically create a hidden form and then submit it, make sure you encode the input:
var params = [['someKey0', 'someValue0'], ['someKey1', 'someValue1'], ['someKey2', 'someValue2'], ['someKey3', 'someValue3']];
var inputs = $.map(params,function(e,i){
return '<input type="hidden" name="'+e[0]+'" value="'+encodeURIComponent(e[1])+'"/>';
});
var form ='<form action="sample.php" id="hidden-form" method="post" target="_blank">'+inputs.join('')+'</form>';
$('#hidden-div').html(form);
$('#hidden-form').submit();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden-div"></div>
Try this....
<form id="myForm" action="sample.php" method="post">
<?php
echo '<input type="hidden" name="'.htmlentities($you).'" value="'.htmlentities($start).'">';
?>
</form>
<script type="text/javascript">
document.getElementById('myForm').submit();
</script>
if you send request with javascript to any php page; it sends a request and gets the respose to the page which has sent request and you continue process your data at your first page. So if you want to open your sample.php and also send your post data within; you must send your data with something like php form.
Submitting forms: http://www.w3schools.com/php/php_forms.asp
If you want to use js post, you can do something like below:
teams.php:
data = { teams : ['Real Madrid','Barcelona','etc']};
var response = null;
$.ajax({
url : 'mypostfile.php',
type : 'POST',
data : data
})
.done(function(resp){ response = resp; //it returned from php echo })
.fail(function(){ console.log('fail'); //post process failed. });
mypostfile.php:
if(isset($_POST['teams'])){
$teams = $_POST['teams'];
echo $teams[0]; //response : Real Madrid
}
Hope it helps.
Hiya:
i know some people would be so tired of my questions, but I'm working on a uni project and need to get it done as soon as possible. This question is about using JS on a button(button) and sending a php_my_sql update on the same button. The problem is JS uses button, right? but PHP uses button(submit). How can I get these two to work on one of these buttons, cuz there has to be only one button.
this is my code for JS
<script type="text/javascript">
function formAction(){
var x=document.getElementById("collect")
x.remove(x.selectedIndex)
}
</script>
HTML
<form method="post">
<select id="collect" name="Select1" style="width: 193px">
<option>guns</option>
<option>knife</option>
</select> <input type="**submit/button**" onclick="formAction()" name="Collect" value="Collect" /></form>
PHP
<?
if (isset($_POST['Collect'])) {
mysql_query("UPDATE Player SET score = score+10
WHERE name = 'Rob Jackson' AND rank = 'Lieutenant'");
}
?>
This can be a way
Submit the form through JS after removing parameter
<script type="text/javascript">
function formAction(){
var x=document.getElementById("collect")
x.remove(x.selectedIndex);
document.forms[0].submit();
}
</script>
Input type button
<input type="button" onclick="formAction()" name="Collect" value="Collect" />
Embed jQuery and use $.post() to send an AJAX request.
JavaScript can interact with the button whilst the user is navigating the page and entering data into the form. The instant the user pushes the submit button and the request for the form submission is sent JS no longer has control. The request is sent to the form's action (most likely a PHP file) which processes the request and gives an answer back.
If you really need to combine the two, look into AJAX.
<?php print_r($_POST); ?>
<script type="text/javascript">
function formAction(){
var x=document.getElementById("collect");
x.remove(x.selectedIndex);
submit_form();
}
function submit_form() {
document.form1.submit();
}
</script>
<form method="post" name='form1'>
<input type='hidden' name='Collect'/>
<select id="collect" name="Select1" style="width: 193px">
<option>guns</option>
<option>knife</option>
</select> <input type="button" onclick="formAction()" name="Collect" value="Collect" /></form>
<?
if (isset($_POST['Collect'])) {
//do whatever update you want
}
?>
Simple Solution
Make this modification in the form tag
<form method="post" onsubmit="return formAction()">
In JavaScript function add a line "return true;" at the end of the function.
Voila ..!!! you are done..!!
Enjoy..!!
I am trying to create a form that generates an html template. I have the template in a hidden div on the page and am using jQuery to create a new window with the template html, but I can't figure out how to load the contents of the form fields into the template. I know I should probably be using AJAX, but I don't know where to start.
Suppose you have this template:
<div class="template">
<p class="blah"></p>
<p class="foo"></p>
</div>
and this form:
<form>
<input name="blah" class="blah"/>
<input name="foo" class="foo"/>
</form>
so, for this example we will assume a mapping of form elements to template elements via a common class for each corresponding element:
$("form input").each(function() {
$(".template").find("." + $(this).attr("class")).html(this.value);
});
Try it here: http://jsfiddle.net/dx2E6/
One trick I've been using is using the <script type="text/html"> tag. The browser doesn't render the code, so what I do is something like this:
<script type="text/html" id="template">
<div>
<div class="some_field">{name}</div>
<h4>{heading}</h4>
<p>{text}</p>
</div>
</script>
Your form is something like this:
<form>
<input type="text" name="name" />
<input type="text" name="heading" />
<input type="text" name="text" />
</form>
Then your javascript code would be something like:
$(document).ready(function(){
var tpl = $('#template').html();
$('form input').each(function(){
tpl.replace('{'+$(this).attr('name')+'}',$(this).val());
});
$('div.some_destination').html(tpl);
});
Hope it helps. Tell me if you have more questions regarding this method.
I need jquery to check if my posted filename (up_image) is empty or not.
if it's empty i need a div tag to be shown and come with some kind of alert message.
if not, just do the
$("#submit").submit();
<form action="/profile/" method="post" enctype="multipart/form-data" id="submit">
<p>
<label for="up_image">image:</label>
<input type="file" name="up_image" id="up_image" />
</p>
Upload
</form>
$(function() {
$("#post_submit").click(function() {
var fil = $("#up_image");
if($.trim(fil.val()).length == 0) {
alert("Choose a file!");
fil.focus();
return false;
}
$("#submit").submit();
});
});
1: use a standard submit button to submit your form rather than a javascript-dependent link, for accessibility reasons, and to prevent brokenness if someone tries to right-click-open-in-new-window or other similar action on the link. If you want it to look like a link, you can still use a button, just apply some CSS to make it no longer look like a button.
2: use the form.onsubmit event to do validation rather than relying on a submit button click (forms can also be submitted by pressing enter, which may not always generate a button click)
<form id="uploadform" method="post" action="/profile/" enctype="multipart/form-data">
<p>
<label for="up_image">image:</label>
<input id="up_image" type="file" name="up_image" />
</p>
<p>
<input type="submit" value="Upload" />
</p>
</form>
<script type="text/javascript">
$('#uploadform').submit(function(e) {
if ($('#up_image').val()=='') {
alert('Please choose a file to upload.');
e.preventDefault();
}
});
</script>
Have a form that is not being read by serialize() function.
<script type="text/javascript">
function submitTrans1(){
var formData = $('form1').serialize();
var options = {
method:'post',
postBody:'formData',
onCreate: function(){alert(formData)},
onSuccess: function(transport){alert("onSuccess alert \n" + transport.responseText);},
onComplete: function(){alert('complete');},
onFailure: function(){alert('Something went wrong...')}
}
new Ajax.Request('/clients/addTrans/<?=$clientID123?>/',options);
}
</script>
<?php
$datestring = "%Y-%m-%d";
$time = time();
$clid1 = $this->uri->segment(3);
?>
<form name="form1" id="form1">
<div id="addTransDiv" style="display:none">
<div class="">
<label for="transDesc" id="transDesc" value="sadf" class="preField">Description</label>
<textarea cols="40" rows="3" id="transDesc" value="" name="transDesc" class=""></textarea>
</div>
<div class="">
<label for="date" class="preField">Date</label>
<input type="date" id="transDate" name="date" value="<?=mdate($datestring, $time);?>" size="40" class=""/><br/>
</div>
<div class="">
<label for="userfile" class="preField">File</label>
<input type="file" name="transFile" id="userfile" size="20" /><br>
</div>
<input type="button" id="submitTrans" name="submitTrans" value="Submit" onclick="submitTrans1()">
</div>
</form>
Uh, I have an alert in the onSuccess parameter of the Ajax.Request that would ideally alert the variable assigned to the serialized form. However, when it alerts, it alerts nothing. I also have the processing url printing out the $_POST data just in case, but that as well returns an empty array in the responseText, so indeedidly nothing is being posted to the form.
Thx.
Edit1
it seems that the problem might be related to the fact that the form is inside a div. If I remove everything on the page except for the form and js, it works ok. But the form is in a div that is hidden by default and uses another function to be displayed. Is there some kind of magic needed to get form data via serialize if it's in a div?
Edit 2
Tried adding quotes and pound signs and all that other jazz. I am using web developer toolbar, firebug, etc... it isn't throwing any js errors and doesn't afraid of anything.
Try removing the quotes from around the variable name formData in the postBody field.
The web developer toolbar in Firefox is as useful as anything for debugging client-side javascript.
BTW, the snippet contains a few undefined items, like the JS function showTransAdd(), several PHP variables, the PHP function mdate(), and the inclusion of the prototype library.
Change this line:
var formData = $('form1').serialize();
to this:
var formData = $('#form1').serialize();
I had to change several other things to make a working copy, but I'm not sure about what all code you withheld or how your environment may differ. If that doesn't work, I can send you the full code snippet I used.
Erroneous table does the breaking.
I had the form within a table with no tr's or td's (not sure if the last part matters) and upon removing the table tags, everything is working.
The relevant js now looks like:
var formData = $('form1').serialize();
var options = {
method:'post',
postBody:formData,
[...]
I'd like to thank the Academy, and all those that helped me.