Append input field jQuery - php

Can anybody tell me why if "Append" or "AppendTo" or "After" or "prepend" an input field inside a div which is nested inside the form tag it doesn't work ?
And why if I Append it just after the form tag it works magically fine ?
This is absolutely insane. I need to place the field exactly where it needs to be. An help will be appreciate. Thanks in advance.
<form id="myform" name="myform" method="post" action="somewhere.php">
// APPEND <INPUT> IN HERE WORKS !!!!
<div id="myDiv">
// APPEND <INPUT> IN HERE WONT WORK !!!!
</div>
<button type="submit" id="myform"> SAVE THE FORM </button>
</form>

It's difficult to know what's wrong, if you don't post your code.
In any case, the problem certainly isn't the div inside the form.
$('#myform').prepend('<input value="1"/>');
$('#myDiv').prepend('<input value="2"/>');
form {
background: #ff9999;
padding: 1rem;
}
div {
background: #99ff99;
padding: 1rem;
margin: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform" name="myform" method="post" action="somewhere.php">
APPEND INPUT IN HERE WORKS !!!!
<div id="myDiv">
APPEND INPUT IN HERE WONT WORK !!!!
</div>
<button type="submit" id="myform"> SAVE THE FORM </button>
</form>

Related

Submit content of div in database on button click

I have a WYSIWYG tool where I can create a content. At the bottom, I have a form where I can submit a value (from an input text) to a database. That works fine. Now, I am trying to submit the content that has been created in the WYSIWYG in the database.
I am thinking of using a value in the input as shown below:
<input name="videoLink" type="text" value="John" required/>
and use javascript to make the value dynamic. But there must be an easier way. To make the form submit the content of a div instead of having to type anything in the input box.
My code is shown below:
angular.module("textAngularTest", ['textAngular']);
function wysiwygeditor($scope) {
$scope.orightml = '<h2>Put Your Text Here</h2>';
$scope.htmlcontent = $scope.orightml;
$scope.disabled = false;
};
.ta-editor {
min-height: 80px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css" rel="stylesheet" />
<div ng-app="textAngularTest" ng-controller="wysiwygeditor" class="container app">
<h3>WYSIWYG Editor</h3>
<div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div>
<!--<h3>Raw HTML in a text area</h3>
<textarea ng-model="htmlcontent" style="width: 100%"></textarea>-->
<h3>Preview</h3>
<div ng-bind-html="htmlcontent"></div>
<!--<h3>Bound with ta-bind, our internal html-binding directive</h3>
<div ta-bind="text" ng-model="htmlcontent" ta-readonly='disabled'></div>-->
<button type="button" ng-click="htmlcontent = orightml">Reset</button>
<form action="Insert.php" method='POST' enctype='multipart/form-data'>
<label><input name="videoLink" type="text" required/></label>
<input id="button" type="submit" name="log">
</form>
</div>
Use placeholder instead of value.
Set value =" " but the placeholder="Put text here" ... otherwise you could get a lot of Johns.. I presume that's what you want to avoid? I don't think you can avoid php/ passing values to php from html [using javascript] to enter values into a database.
Your form isn't that big. You don't need that amount of js unless your site is using angular/is included in all pages of the CMS. So if the question is really how to pass variables to php with minimal javascript, then comment.
You should still use placeholder instead of value. Otherwise if people don't change the text / maybe just press enter/submit.. your required error message won't fire. That's a lot of Johns in the db! :)
Hope this helps

if isset submit failed

$jepse = $_POST['slj'];
if(isset($jepse)){
$sql43 = "UPDATE notifications SET seen='1' WHERE touser='$myid' ";
if(mysqli_query($con, $sql43)){
}}
?>
<center>
<form action="#" method="POST">
<input type="submit" name="slj" value="Seen" style="background: rgba(255,255,255, 0); ">
</form>
</center>
I have very stupid problem here... My submit button wont set ..... Don't know what is problem... I have many same things on different pages and with different names... But for this it wont work .... Anyone help?
:::::::::::::::::::UPDATE:::::::::::::::::::::::
I did it with moving update code to another file and at action set that file...
A submit button alone isn't enough to post a value. You should use a form field like a hidden input to post your data. I made this stupid mistake also.
<input type="hidden" name="slj" value="some-value">
You doesn't set any values to submit to the server.
You have to change the form like this:
<center>
<form action="" method="POST">
<input type="hidden" name="slj" value="1">
<input type="submit" value="Seen" style="background: rgba(255,255,255, 0); ">
</form>
</center>
A value in the submit button is just the text printed on the button. You have to set another hidden input value and that will be sent.
Also it could be heplful to change the action to "".
your codding is expected to work as is if there are no spelling mistakes somewhere: Although the
defining a POST element before checking if it is set, the program will see it as it is not defined ref: $jepse = $_POST['slj']; but that should not be the main problem why your database is not updating since once you clicked the button it was then defined.
Also in your form <form action="#"... remove the #
i.e. if you are on the same page <form action=""...
or
i.e. be direct <form action="the-php-page.php"...
<?php
if(isset($_POST['slj'])){
$sql43 = "UPDATE `notifications` SET `seen`='1' WHERE `touser`='$myid' ";
if(mysqli_query($con, $sql43)){
echo "updated";
}
else
{
echo "Error updating record: " . mysqli_error($con);
}
}
?>
<span>
<form action="" method="POST">
<input type="submit" name="slj" value="Seen" style="background: rgba(255,255,255, 0); ">
</form>
</span><br>
REGARDS
<center>
<form method="POST">
<input type="submit" name="slj" value="Seen" style="background: rgba(255,255,255, 0); ">
</form>
</center>
<?php
$jepse = $_POST['slj'];
if(isset($jepse)){
echo "Working fine";
}
?>
Let mw know whether this code return "Working fine" or not

AJAX XMLHttpRequest not working

I'm trying to work with ajax. I have two pages: request.html and reply.php.
request.html:
<html>
<script language="javascript">
var xht = new XMLHttpRequest();
function testAJAX()
{
xht.open("get","http://localhost:9999//a.php", true);
xht.send();
xht.onreadystatechange=function() {
if (xht.readyState==4) {
alert("Text: "+xht.responseText);
}
}
}
</script>
<form id="form1" name="form1" method="post" action="">
btn
<input name="btn" type="submit" id="btn" onClick="testAJAX();" value="Submit" />
</form>
</html>
reply.php:
<?php
echo 'hi';
?>
The problem is that I don't get a response via xht.responseText and with xht.responseXML I get null and with xht.status I get 0.
I asked the link http://localhost:9999//a.php via browser and got hi correctly.
P.S: I tried this on Chrome 29.0.1547.18 and Maxthon v4.1.1
any ideas..
You don't need to mention "http://localhost".
The main mistake is you have given the input type as Submit If it is submit the form will be submitted first the click event will not trigger. Change the input type to button.
If you want to do form submission do it in java script
The corrected code is below.
<form id="form1" name="form1" method="post" action="">
btn
<input name="btn" type="button" id="btn" onClick="testAJAX();" value="Submit" />
// change type to button
</form>
var xht = new XMLHttpRequest();
function testAJAX()
{
xht.open("get","a.php", true); /// Change to a.php
xht.send();
xht.onreadystatechange=function() {
if (xht.readyState==4) {
alert("Text: "+xht.responseText);
}
}
}
Adding to SarathPrakash's answer, I would like to point out that there is nothing wrong with specifying localhost. It will still work as long as the PHP file's address is valid.
You can also have the submit button. But you'll have to modify the form opening tag as follows:-
<form id="form1" name="form1" method="POST" action="" onsubmit="return false">
This is will stop the default behaviour of the form being submitted. Although in my opinion, it is best to avoid it altogether, and just stick with assigning the correct event handler to the onclick attribute.
Also, it is good practice to follow the correct syntax for HTML documents.
<html>
<head>
<title> Your title here </title>
<script type="text/javascript"> Your script here </script>
</head>
<body>
Your main document text here. Forms, tables etc.
</body>
</html>
For a simple tutorial, you could try this.

Assistance with FORM-SUBMIT & "?" removal from URL

I was wondering how one would go about sending whatever the user types in text box; to the end of the <form action=. If one does not have access to the websites code source, how would one go about this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a:link {color:#687BC6;}
a:visited {color:#0F0;}
a:hover {color:#000;}
a:active {color:#0A0;}
</style>
</head>
<body>
<form name="form1" method="get" action="http://www.blah.com/right-now/" target="_blank">
<table border="0" cellpadding="2" cellspacing="0">
<tr><td>ZC:</td>
<td><input name="fld-zip" type="text" maxlength="7" size="15"></td></tr>
<tr><td> </td>
<td><input type="submit" name=Submit value="Submit this"></td></tr>
</table>
</form>
</body>
</html>
Pretty much asking how you can add what you put in text box to the end of URL /??? when you click the submit button.
So it shows:
Textbox - "11722"
URL = http://www.blah.com/right-now/11722
Is there a way to do this via css/html/php/js?
Every time I click the SUBMIT button, it just adds a '?' at the end and it gets cut off.
Well,m just giving it a try...i dunno whether it'll work or not.. do one thing,use two files..one to get the zip code..
=>in file 1,use a form.. after submitting,send the zip code to a dummy file(second file) i.e.,action="dummy.php"
=>in dummy file assign the zip code to a variable '$a'
$a=$_GET['zip'];
now use javascript
<script>
function a()
{
newwindow=open("http://www.blah.com/rightnow/'$a'",window,"height=900,width=1100");
}
</script>
I would do something like this at the top of the page.
<?php
if (!(empty($_GET['fld-zip']))){ //check if the var is empty
$url = "http://www.blah.com/right-now/";
$page = $_GET['fld-zip'];
header("location:$url . $page"); //if its all good then redirect to the correct page
}
?>
This could probably be done a bunch of different ways but should work.
The ? is there because the form is submitted using get it wont go away and shouldnt. Do some reading on GET and POST in HTML forms.
if you use GET, the link should look something like "http://www.blah.com/right-now?variable1=11722&variable2=11733. The question mark is at the beginning of the variables. How does it get cut off?
If you're using http://www.blah.com/right-now/ as the action, make sure that http://www.blah.com/right-now/index.php has the logic.
As your basically wanting to just open a new window with the value of what's entered in the text box concatenated on to a url;
Change your form slightly, use a button instead of a submit, and with the use of jquery(cleaner imo) and a simple js function to put it altogether & trigger it from the forms onClick="doForm()".
<script>
function doForm(){
var param = $("#fld-zip").val();
window.open ("http://www.blah.com/right-now/" + param,"openwindow");
}
</script>
<form name="form1" method="get" action="" target="_blank">
ZC:<input name="fld-zip" id="fld-zip" type="text" maxlength="7" size="15">
<input type="button" name="Submit" onClick="doForm()" value="Submit this">
</form>
Add a script like this
function formSubmit(){
document.getElementById('frm1').setAttribute('action', "http://www.google.com/right-now/" + document.form1["fld-zip"].value)
document.form1["fld-zip"].value = '';
return true;
}
then add onsubmit event to your form
<form id="frm1" name="form1" method="get" action="http://www.blah.com/right-now/" target="_blank" onsubmit="return formSubmit()">
Working example http://jsfiddle.net/FtRKp/4/

Submit button not submitting

<div class = 'buttons'>
<button type="submit" class="regular" name="save">
<img src="elephant.png" alt=""/>
Memory
</button>
</div>
This is the code for a submit button
however when i try validate the form using php, the button does not seem to be submitting
<?php if( isset($_POST['save']) && $_POST['save'])
{
$submit = $_POST['save'];
echo "lol";
}
else
{
echo "lola";
}
Submit buttons only work in forms. Try to wrap the whole thing in a form tag and try again.
Your submit button doesn't have any value to send when posting the form. The <button> element does not send its element's content as its submit value. You still have to add a value attribute to the element in order for it to have a submitted value. Since you don't, it's sending an empty string, which is causing your conditional statement to fail:
if( isset($_POST['save']) && $_POST['save'])
Since $_POST['save'] is empty, that second part returns false and thus it goes to your else block.
Here is the code that you want:
<form name="myForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<div class="buttons">
<button type="submit" class="regular" name="save" value="Save">
<img src="elephant.png" alt="Elephant" />
Memory
</button>
</div>
</form>
As written already your code lacks the wrapping. While submit button as a button might work without the form, then catching the _POST data surely doesnt.
Also, your solution for image-button could be better, maybe something like this:
<style type="text/css">
input[type="submit"] {background: url('elephant.png') right no-repeat; padding: 10px; padding-left: 30px; font-size: 14px; font-weight: bold;} /* or call this .regular */
</style>
<?
if ($_POST['save']) { // the trigger
echo '<h1>Cooking with fire now!</h1>';
}
?>
<form method="POST" action="">
<div class="buttons">
<input type="submit" name="save" value="Memory" class="regular" />
</div>
</form>
Note that class = "buttons" with the spaces, is incorrect syntax!
You should include your code within <form method="post" action="path/to/your/php/processing/file"> and </form> tags
Replace your button code with <input type="submit" class="regular" name="save" />
Remove isset($_POST['save']) && part from condition of if as you don't have set value for your button.

Categories