PHP - Add text to box without reload page - php

I want to add text without reloading the page.
Here I have 2 TField (each with button POS and NEG) and 2 TArea (1 TArea POS and 1 TArea NEG).
when i input some text in first TField and then press POS button, the text added to TArea POS, and vice versa, if there is input in second TField then i hit POS, then my input append to TArea POST too.
In pure php with using FORM I could do it. but here I want page without reloading.
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<input type="submit" id="neg" name="neg" value="NEG"/>
</div>
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<input type="submit" id="neg" name="neg" value="NEG"/>
</div>
<div id="box" >
<textarea style="width:420px" name="posbox" rows="4" cols="70"></textarea>
<textarea style="width:420px" name="negbox" rows="4" cols="70"></textarea>
</div>
<?php
if (isset($_POST['pos'])) {
}
if (isset($_POST['neg'])) {
}
?>
Can you help my case?
Thanks for the help.
note : here i using same ID for all my input.

You cant do asynchronous requests with php. It is server compiled, not like javascript that is compiled by the browser..
learn how the internet works!

You can change fields in html with Javascript. The problem of your code is that your buttons are "submit" and thus a form has to be submitted (the page reloaded, etc). With these small changes you can get what you want:
<html>
<head>
<script>
function changeField()
{
document.form1.tweet.value=document.form0.tweet.value;
}
</script>
</head>
<form name='form0' id='form0'>
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<input type="submit" id="neg" name="neg" value="NEG"/>
</div>
</form>
<form name='form1' id='form1'>
<div id="retrain" >
<input type="text" id="tweet" name="tweet" title="Teks retrain" />
<input type="submit" id="pos" name="pos" value="POS"/>
<button type="button" id="neg" name="neg" value="NEG" onclick="changeField();">NEG</button>
</div>
</form>
</html>
Logically, the only button including the new functionality is "neg" in form1: when it is clicked, the text in the "tweet" textbox above is written into the one below.

Related

Input in HTML not connecting to PHP post method

I have an HTML input and button:
<form action="validate.php" method="post">
<!-- THE CODE INSERT -->
<div id="code">
<form>
<label></label>
<input id="input" name="InputText" type="text"/>
</form>
</div>
<!-- THE BUTTON ITSELF -->
<input type="button" id="button" name="myButton"><b>Search Archive</b>
</form>
in my validate.php file I have this switch statement:
<?php
switch ($_POST["InputText"])
{
case "someval":
http_header("someaddress.com");
die();
break;
}
?>
the problem is that when I click the button it doesn't do anything. I did this with JS and it worked but it should be noted that I'm really new to web development so if anyone can explain to me what I did wrong and specifically why that would be great. Thanks!
You have a form inside of a form, that won't work. Also, you need to include an <input type="submit" value="submit" /> before you close your form. This is what submits the information from the form to your action="file.php".
A form would typically look like this:
file.html
<form action="validate.php" method="POST">
<input type="text" name="username" placeholder="Enter your username" />
<input type="submit" name="submit" value="Submit" />
</form>
Then you'd do something like this:
validate.php
<?php
echo "Your username is" . $_POST['username'];
The $_POST['username'] is the data gathered from the name="username" input from the HTML. If you write die($_POST); you'll get all the data that is sent through the form.
When you are using type='button' you have to perform the submit by yourself.
So, you can do that using javascript or change to type='submit'.
Example:
<input type="button" id="button" name="myButton"><b>Search Archive</b>
To
<input type="submit" id="button" name="myButton" value="Search Archive" />
you can try this
<form action="/validate.php" method="post">
<!-- THE CODE INSERT -->
<div id="code">
<label></label>
<input id="input" name="InputText" type="text"/>
</div>
<!-- THE BUTTON ITSELF -->
<button type="submit" id="button" name="myButton">Search Archive</button>
</form>
in the div id ="code" you used form tag that's why its not work...delete it will work and button type must be submit

On click submit go to an url from field

I have a simple form:
<form class="form-contact-warp form-calc-ship cb-form" action="javascript:redirect();">
<input class="form-control" required="" id="textBox" type="text" name="code" size="15" placeholder="USI-TECH affiliate ID">
<button type="submit" class="btn-main-color btn-block"> Create page</button>
</form>
If I put in input field the text daniel, I want to append a link.
Example:
I put daniel in and I click submit. I want to appear below the link
www.example.com/daniel and the text This is your link.
Thanks
I think the best way to do this is to use jQuery or JavaScript by itself:
<form class="form-contact-warp form-calc-ship cb-form" action="" method="post">
<input class="form-control" required="" id="textBox" type="text" name="code" size="15" placeholder="USI-TECH affiliate ID">
<button type="submit" class="btn-main-color btn-block"> Create page</button>
</form>
<div id="response"></div>
<!-- add jquery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$('form').on('submit',function(e){
e.preventDefault();
$('#response').html('This is your link:<br />http://www.example.com/'+encodeURI($('#textBox').val()));
});
});
</script>
Here is a jQuery demo found at jsFiddle
Here is the same thing, only it changes when you type.
If you want to use purely PHP, you need to check something has been submitted:
<form class="form-contact-warp form-calc-ship cb-form" action="" method="post">
<input class="form-control" type="text" name="code" size="15" placeholder="USI-TECH affiliate ID">
<input type="submit" class="btn-main-color btn-block" value="Create page" />
</form>
<?php
# Check if there is a post
if(!empty($_POST['code'])) {
# You want to make sure you remove possible html and covert the string to a url.
echo 'This is your link:<br />http://www.example.com/'.urlencode(trim(strip_tags($_POST['code'])));
}

Performs form action even out of the form

Hi having a problem with this code even if i clicked on cancel it will still proceed to use the action of my form even though the CANCEL button is not part of the form, Would appreciate any help.
Here is the code.
<form method="post" action="input_enroll.php" >
<div id="overlay1">
<div>
<h1> Enter Educational Level Entry</h1>
<input type="text" name="level" >
<input type="submit" value="Proceed To Enroll" '>
</form>
<input type="submit" value="Cancel" onclick='overlay()'>
</div>
</div>
EDIT: Any suggestions what would be a better idea? I'm thinking putting the cancel outside the div.
You are having form started, then divs started, then form closed..start form after divs..
as your markup is not correct, browsers will change it as thier parser suggest,
In chrome </form> tag is postponed after </div>s..
<div id="overlay1">
<div>
<form method="post" action="input_enroll.php" >
<h1> Enter Educational Level Entry</h1>
<input type="text" name="level" />
<input type="submit" value="Proceed To Enroll" />
</form>
<input type="submit" value="Cancel" onclick='overlay()' />
</div>
</div>

Assign input to a div?

I am trying to create a multi step form by getting questions and answer alternatives from a mysql database through php/ajax (No page reload is necessary). I do however seem to have problems submitting the data if a .php page generates all the divs(at least that is a theory as to why it won't work). The way I am trying to do it seems to work fine if I write it all directly in HTML, but that would not be dynamic and therefore useless for this particular task. Is it possible to create a form like psuedo-coded underneath?
<div>
<div id="stepone" class="section"> </div>
<div id="steptwo" class="section"> </div>
<div id="stepthree" class="section"> </div>
<div id="stepfour" class="section"> </div>
</div>
And then have a PHP site generate the input tags and assign it to the correct div, so that the divs are created in HTML/JS but the inputs like checkboxes and textareas are generated dynamically through PHP. I can't seem to think of a good way to do this?
Worth mentioning that this page is made in JQM (jQuery Mobile) so I think the different div-roles can appear problematic for this task.
A generated question in my PHP script will be something like this:
<form id="eval_form">
<h3>Hva tenkte du om møtet?</h3>
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="2">
<input type="checkbox" name="res[2][1]" id="2_1" value="1"><label for="2_1">asd1</label>
<input type="checkbox" name="res[2][2]" id="2_2" value="2"><label for="2_2">asd2</label>
<input type="checkbox" name="res[2][3]" id="2_3" value="3"><label for="2_3">asd3</label>
</fieldset>
<h3>Hva følte du om møtet?</h3>
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="3">
<input type="checkbox" name="res[3][1]" id="3_1" value="1"><label for="3_1">test1</label>
<input type="checkbox" name="res[3][2]" id="3_2" value="2"><label for="3_2">test2</label>
<input type="checkbox" name="res[3][3]" id="3_3" value="3"><label for="3_3">test3</label>
<input type="checkbox" name="res[3][4]" id="3_4" value="4"><label for="3_4">test4</label>
</fieldset>
<input type="button" id="submit" value="Submit" class="submit-btn">
</form>
The code for my demo program looks like this, and it has no problems being posted:
<form id="eval_form">
<!-- STEP 1-->
<div data-role="content" id="form1" class="section">
<input type="text" name="answer[1]" placeholder="Write something..." class="required"></input><p/>
<input type="text" name="answer[2]" placeholder="Write something..." class="required"></input><p/>
<input type="button" name="next1" value="Next" id="next1" onClick="toggleVisibility('form2')" class="next-btn"/>
</div>
<!-- STEP 2-->
<div data-role="content" id="form2" class="section">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="answer[4]" id="1" value="1" class="required"/><label for="1">Value 1</label>
<input type="radio" name="answer[4]" id="2" value="2" class="required"/><label for="2">Value 2</label>
<input type="radio" name="answer[4]" id="3" value="3" class="required"/><label for="3">Value 3</label>
</fieldset>
<input type="button" id="back2" value="Back" onClick="toggleVisibility('form1')" class="back-btn">
<input type="button" name="next2" value="Next" id="next2" onClick="toggleVisibility('form3')" class="next-btn"/>
</div>
<!-- STEP 3-->
<div data-role="content" id="form3" class="section">
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" class="required">
<input type="checkbox" name="answer[5][1]" id="1" value="1"/><label for="1">Testie</label>
<input type="checkbox" name="answer[5][2]" id="2" value="2"/><label for="2">Testoe</label>
<input type="checkbox" name="answer[5][3]" id="3" value="3"/><label for="3">Tester</label>
</fieldset>
<input type="text" name="answer[3]" placeholder="Write something..." class="required"></input><p/>
<input type="button" id="back3" value="Back" class="back-btn" onClick="toggleVisibility('form2')">
<input type="button" id="submit" value="Submit" class="submit-btn"/>
</div>
</form>
Ajax function to send the data:
$(document).ready(function()
{
$("#submit").click(function()
{
var data_string = $('#eval_form').serialize();
$.ajax(
{
type:'POST',
url:'add.php',
data:data_string,
success:function(response)
{
$("#eval").html(response);
}
});
})
});
The way id do it is just have a single div to contain your steps
<div id="stepContainer" >
<input type="text" id="step1Input" />
</div>
Something like that.
The ajax query will take any elements within the step container and submit them appropriatley via GET/POST to your php/asp whatever page does your server logic. When it returns it can return some confirmation or the html required for the next step.
Once you have this returned html or built the new html in javascript based on the response from the server you can replace the contents of the stepContainer with the new html. This will then act as step 2.
You may want to have a hidden div or some counter in javascript to keep track of which is your current step.
It may even be wise to use json return from the server which can allow you to pass more information across (well more easily anyway), allowing you to have error messages, confirmations, html etc embedded in the single response.

Open PHP Page On Button Click

I wonder whether someone could help me please.
I'm put together the following form contained within a PHP file.
<form name="savemyfindstolocation" id="savemyfindstolocation" method="post">
<p><label></label>
</p>
<p align="left">
<input name="userid" type="text" id="userid"/>
<input name="locationid" type="text" id="locationid"/>
<br />
</p>
<div>
<label>
<div align="left">Click on the map to place the marker for the find that has been made and drag until the precise location has been found. </div>
</div>
<p align="left"><label>Find OSGB36 Latitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lat" type="text" id="findosgb36lat" size="20" />
</div>
</div>
<p align="left"><label>Find OSGB36 Longitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lon" type="text" id="findosgb36lon" size="20" />
</div>
</div>
<p align="left"><label>Date of Trip<br />
</label>
</p>
<div>
<div align="left">
<input name="dateoftrip" type="text" id="dateoftrip" size="10" />
</div>
</div>
<input name="submit" type="submit" onclick="MM_callJS('savedata()')" value="Submit" />
</form>
It all works fine, but I'd now like to add a button that opens the following php page, 'blobupload.php'. If I've understood this correctly from the research that I've done, I need to use javascript to open the page, using the 'submit' action from the main form.
What I don't understand is how to do this when the 'submit' action is already taken for the saving of the information on the main form.
Could someone perhaps please show me how to get around this, i.e. using the same 'submit action but for two different purposes.
Just modify your form tag (add the action attribute to file you want to load):
<form name="savemyfindstolocation" id="savemyfindstolocation" method="post" action="blobupload.php">
And you submit input tag:
<input name="submit" type="submit" value="Submit" />
You can use a second javascript function to open new window like this way
<input name="submit" type="submit" onclick="MM_callJS('savedata()');SECOND_JS_FUNCTION()" value="Submit" />
Use php to process the form is one of the way to do it.
<input name="submit" !!!!!!action="process.php" method="POST (or get)!!!!!!!!!! type="submit" onclick="MM_callJS('savedata()')" value="Submit" />
that way the the variable will be passed to the process.php while you can also redirect the page in the process.php
header("Location:URL");

Categories