HTML/PHP multiple form actions - php

I have a form with 2 selectboxes a textbox and 1 textarea.
When i load this form it gets all the menu items and language items from the database and inserts them in the selectboxed and then gets the corresponding content from menu item and language.
<form style="border: 1px solid black; " name="form" method="post" action="">
Content selecteren om te wijzigen:
<table>
<tr>
<td width="78">Menu item:</td>
<td><select name="Menu" onchange="this.form.submit()">' . $this->MenuItems->render() . '</select></td>
</tr><br>
<tr>
<td width="78">Taal:</td>
<td><select name="Language" onchange="this.form.submit()">' . $this->LanguageItems->render() . '</select></td>
</tr>
<tr>
<td>Menu Item:</td>
<td width="78"><input name="MenuItemTextBox" type="text" id="MenuItemTextBox" value="' . $_POST['Menu'] . '"></td><br>
</tr>
<tr>
<td>content</td>
<td><textarea style="" Name="Content" id="NewContent" ROWS=10 COLS=50>' . $this->GetContent->render() . '</textarea></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Wijzigen"></td>
</tr>
</table>
</form>
When you select a different value from the selectboxed it reloads the form/page and displays the correct content in the textare again with "this.form.submit()", and it also remembers what you have chosen in the selectbox.
Now i want to submit all these posts from this form to a file ChangeContent.php But i cant use the action attribute in the form otherwise it will always go to this file when you select a new value from the selectbox.
so my question in short: Reload form onchange while able to use the action attribute on a button submit press.
Thank you

if I understand the question correctly, you change the url of form via javascript/jquery like so..
<select onchange="submitform('url1')"></select>
<select onchange="submitform('url2')"></select>
<script type="text/javascript">
function submitForm(url)
{
$("#formid").attr("action",url);
$("#formid").submit();
}
</script>
and if you do this on submit button, you may try something like so:
<input type="submit" onclick="return submitformviabtn()"></select>
<select onchange="submitform('url2')"></select>
<script type="text/javascript">
function submitformviabtn(e)
{
e.preventDefault();
$("#formid").attr("action","page.php");
$("#formid").submit();
}
</script>

<script>
$(document).ready(function(){
$("#textBox").keyup(function()
changeTest($(this).val());
});
function changeTest(val)
{
rowno=0;
var str="";
str = "http://www.xyz.com/index.php/api/getArtist?searchtext="+val;
$.getJSON(str, function (data) {
var artistname="";
var artistid="";
$.each( data, function(key1,value1) {
$.each(data[rowno], function(key,value) {
if(key=='artistname')
{
artistname=value ;
}
});
availableTags[rowno] = artistname;
rowno=rowno+1;
});
});
$( "#textBox" ).autocomplete({
source: availableTags
});
}
</script>
<form action="your-page.php" method="post">
<label>Event Category</label>
<select name="eventTypeidFk" id="eventTypeidFk" class="" required onchange="changetextbox()">
<option value="">--- Select Event Category ---</option>
<option value="1">Sports</option>
<option value="2">Concert</option>
</select>
<label>Artist</label>
<input type="text" name="artist1" id="textBox" class="" required>
</form>
You can use this concept. Create an api to fetch data from db and with onchange call that method.

Related

submit button to input value to database without form action PHP

I would like click on submit and the value input in the field to be stored in database.
However, I do not want to use a form action. Is it possible to do it without creating form action with PHP?
<tr>
<form method="post">
<tr>
<td>
<label for="Item name"><b>Finish Product:</b></label>
</td>
<td>
<input id="finish_product" type="text" maxlength="100" style="width:100px"name="finish_product" required>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Save" id="submit" />
</td>
</tr>
<?php
if(isset($_POST['submit']))
{
var_dump($_POST); exit;
$SQL = "INSERT INTO bom (finish_product) VALUES ('$finish_product')";
$result = mysql_query($SQL);
}?>
</tr>
Use Jquery ajax to do this. Try this:
HTML
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<body>
<table>
<tr>
<td><label for="Item name"><b>Finish Product:</b></label></td>
<td><input id="finish_product" type="text" maxlength="100" style="width:100px" name="finish_product" required></td>
</tr>
</table>
<input type="button" value="Save" id="submit" />
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.ajax({
url: '1.php',
data: {finish_product: $('#finish_product').val()},
success: function (result) {
alert(result)
}
});
});
});
</script>
</body>
PHP
(1.php)
Note: Use mysqli_query since mysql_query is depricated in latest versions. And use bind param instead of directly appending values to query.
<?php
if (!empty($_GET)) {
$SQL = "INSERT INTO bom (finish_product) VALUES ('".$_GET['finish_product:']."')";
$result = mysql_query($SQL);
echo 1;
} else {
echo -1;
}
?>
This isn't a form, this is just a series of table elements with various inputs and a submit button. Clean up the code - there's no closing tr tag, and where is the submit button supposed to be?
Add a form element around it.
You need an method attribute to the form - in this case, "post". Without the action attribute, it will default to the same page.
<!-- add form tag -->
<form method="post">
<tr>
<td>
<label for="Item name"><b>Finish Product:</b></label>
</td>
<td>
<input id="finish_product" type="text" maxlength="100" style="width:100px"name="finish_product" required>
</td>
</tr>
<!-- added new row for submit button - you might want to have the td element span two columns? -->
<tr>
<td>
<input type="submit" value="Save" id="submit" />
</td>
</tr>
</form>
<-- end of form -->
<?php
if(isset($_POST['submit']))
{
//see what is being POSTED - comment out this line when you're happy with the code!
var_dump($_POST); exit;
$SQL = "INSERT INTO bom (finish_product) VALUES ('$finish_product')";
$result = mysql_query($SQL);
}

How to make the text field's value blank depending on a condition using jQuery?

I'm using PHP, MySQL, Smarty and HTML for my website. Now the scenario is I'm having a group of two radio buttons(viz. Yes and No are their values). I'm showing and hiding the textboxes depending on the value of selected radio button. The Hide/Show is working perfectly. The main issue is when I submit the form with radio button selected having value "No" the dependent text fields get hidden but the $_POST[] contains the textfield values present within them, if any. I want to make the values blank of these text fields as the user selects radio button with value "No". Can anyone help me in this regard? Thanks in advance.
For your reference I'm putting here the code snippet from my Smarty template as well as the code for Hide/Show functionality.
First the code from Smarty template is as follows :
<table>
<tr height="30">
<td align="right" width="300"><label><b>{'Do you want to use call to
action
?'|signal_on_error:$error_msg:'newsletter_call_to_action_status'}</b>
<strong style="color: red">*</strong></label></td>
<td> <input type="radio"
name="newsletter_call_to_action_status"
id="newsletter_call_to_action_status" value="1"
onclick="select_option(this.value);"
{if $data.newsletter_call_to_action_status=='1' } checked {/if}> Yes
<input type="radio" name="newsletter_call_to_action_status"
id="newsletter_call_to_action_status" value="0"
onclick="select_option(this.value);"
{if $data.newsletter_call_to_action_status=='0' } checked {/if}> No
</td>
</tr>
<tr id="action_link_no" {if $data.newsletter_call_to_action_status==
'1' }style="display:;" {else}style="display:none;"{/if}>
<td colspan="2"> </td>
</tr>
<tr class="action_link_yes" height="30"
{if $data.newsletter_call_to_action_status== '1' }style="display:;"
{else}style="display:none;"{/if}>
<td align="right" width="300"><label><b>{'Enter call to action
text'|signal_on_error:$error_msg:'newsletter_call_to_action_text'}</b>
<strong style="color: red">*</strong></label></td>
<td> <input type="text" name="newsletter_call_to_action_text"
id="newsletter_call_to_action_text"
value="{if $data.newsletter_call_to_action_status == '0'}{else}{$data.newsletter_call_to_action_text}{/if}"
maxlength="50" class="inputfield">
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr class="action_link_yes" height="30"
{if $data.newsletter_call_to_action_status== '1' }style="display:;"
{else}style="display:none;"{/if}>
<td align="right" width="300"><label><b>{'Enter call to action
link'|signal_on_error:$error_msg:'newsletter_call_to_action_link'}</b>
<strong style="color: red">*</strong></label></td>
<td> <input type="text" name="newsletter_call_to_action_link"
id="newsletter_call_to_action_link"
value="{if $data.newsletter_call_to_action_status == '0'}{else}{$data.newsletter_call_to_action_link}{/if}"
class="inputfield">
</td>
</tr>
</table>
Now the jQuery code to perform Hide/Show functionality is as follows:
{literal}
<script language="javascript" type="text/javascript">
function select_option(plan){
if(plan == '0'){
$('#action_link_no').fadeOut('fast');
$('.action_link_yes').fadeOut('fast');
}else{
$('#action_link_no').fadeIn('fast');
$('.action_link_yes').fadeIn('fast');
}
}
</script>
{/literal}
Change the markup to use classes and remove the inline JS:
<input type="radio" name="newsletter_call_to_action_status" class="newsletter_call_to_action_status" value="1" {if $data.newsletter_call_to_action_status=='1' } checked {/if}>Yes
<input type="radio" name="newsletter_call_to_action_status" class="newsletter_call_to_action_status" value="0" {if $data.newsletter_call_to_action_status=='0' } checked {/if}>No
Then do this:
$(function() {
$('.newsletter_call_to_action_status').on('change', function() {
var state = $('.newsletter_call_to_action_status:checked').val() == '1';
$('#action_link_no, .action_link_yes')[state?'fadeIn':'fadeOut']('fast');
});
});
How about changing the value attribute to empty when a particular radio button is checked. Am assuming that 'newsletter_call_to_action_text' and 'newsletter_call_to_action_link' are the IDs of the input fields you want to blank, add the code below
$('#newsletter_call_to_action_text, #newsletter_call_to_action_link').val('');
Your javascript code should now look like this.
<script language="javascript" type="text/javascript">
function select_option(plan){
if(plan == '0'){
$('#action_link_no').fadeOut('fast');
$('.action_link_yes').fadeOut('fast');
$('#newsletter_call_to_action_text, #newsletter_call_to_action_link').val('');
}else{
$('#action_link_no').fadeIn('fast');
$('.action_link_yes').fadeIn('fast');
}
}
</script>
or you can also use this
<script language="javascript" type="text/javascript">
function select_option(plan){
if(plan == '0'){
$('#action_link_no').fadeOut('fast');
$('.action_link_yes').fadeOut('fast');
$('#newsletter_call_to_action_text, #newsletter_call_to_action_link').attr('value', '');
}else{
$('#action_link_no').fadeIn('fast');
$('.action_link_yes').fadeIn('fast');
}
}
</script>

Ajax Tabs with PHP sites

I have a "little" big problem with my web application.
First, I must confess, that I am not so good in english :).
I have realize very simple html+css-Tabs based on ajax (powered by jquery) and each Tab request a separate PHP-site. Every site includes min. one form with php-values and other jquery-effects/-plugins.
The primary problem is the form-view in every tab. The ajax-loaded forms were shown not complete and other form were complete blank. I locate the problem and delete PHP-code in one of some fieldsets and finaly I show this one fieldset and the rest of the form were blank.
If I use only css-based tabs and without ajax functionality the forms loaded completely.
What is the problem with ajax? I dont understand it :P
Here is a part of one of the forms:
<form action="#" method="post" name="form_project" class="form_project mainform">
<input type="hidden" name="uid" value="<?= issetGlobals('uid') ?>" />
<table border="0" id="tbl-projects" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2"><input type="checkbox" name="cb_newProject" onclick="actFieldset('#fs-newProject')" /> <label for="cb_newProject">Projekt erstellen</label></td>
</tr><tr>
<td>
<fieldset id="fs-newProject" disabled="disabled"><legend>Projektverzeichnis erstellen</legend>
<table border="0">
<tr>
<td><label for="projectName">Projektname</label></td>
<td><input type="text" name="projectName" value="" /></td>
</tr><tr>
<td><label for="projectManager">Projektleiter</label></td>
<td><select size="1" name="projectManager" id="projectManager">
<?php
foreach($DBma->getEmployees() as $value) {
if($value['uid'] == issetGlobals('uid'))
echo '<option value="'.$value["uid"].'" selected="selected">'. convertString($value["name"]) .'</option>';
else
echo '<option value="'.$value["uid"].'">'. convertString($value["name"]) .'</option>';
}
?>
</select>
</td>
</tr>
And here the "converted" JS-Code:
$('#tabs-nav li').each(function(i) {
$(this).click(function(event){
event.stopPropagation();
Tab($(this).attr('id'));
});
});
function Tab(key){
$('#tabs-nav li').each(function() {
$(this).removeClass('active');
})
$(key).addClass('active');
$.ajax({
url: 'tab-content.php?tab=' + key,
type: 'get',
beforeSend: function() {
$(key + '-loading').html('<img src=\'images/ajax-loader.gif\' width=\'16\' height=\'16\' alt=\'Loading\' />');
}
}).done(function(responseText) {
$(key + '-loading').html("");
$('#tabs-content').html(responseText);
});
}

List box sending data to textarea upon click of send button

I am using a micro message PHP script that allows user to submit messages in a simple and clean form. It uses a database for the entries. The form part of it looks like this:
<form name="new_post" method="post" action="admin.php?page=wp-admin-microblog/wp-admin-microblog.php" id="new_post_form">
<table>
<thead>
<tr>
<td>
<div id="postdiv" class="postarea" style="display:block;">
<textarea name="wpam_nm_text" id="wpam_nm_text" style="width:100%;" rows="4"></textarea>
</div>
<p style="text-align:right; float:right;"><input name="send" type="submit" class="button-primary" value="<?php _e('Send', 'wp_admin_blog'); ?>" />
</td>
</tr>
</thead>
</table>
</form>
I want to add a drop-down list to the form and depending on what the user selects in the drop-down list, a custom text should be added to the beginning of the textarea (wpam_nm_text) message when the user clicks the send button.
Let me explain this. I want to add something like this:
<select>
<option>Milk</option>
<option>Coffee</option>
<option>Tea</option>
</select>
...to the form, and if the user selects the option "Coffee", then I want to add the text "Coffee keeps me awake" to the textarea when the user clicks on the send button. So when the form is sent to the database, it will contain "Coffee keeps me awake" followed by what the user wrote in the textarea.
I would presume that this is possible using Javascript or PHP, both of which I have no good knowledge of, so detailed replies are beneficial. Also, if you require more info or script, by all means, feel free to ask.
Here is a fiddle if you want one: http://jsfiddle.net/tNrfA/
The answer posted by codingbiz will work for you ..(can't upvote,no priveleges :( ).
However if you want a javascript solution I think this should work for you ..
<script type="text/javascript">
function setText(){
var drink = document.getElementById('drink');
var feed = document.getElementById('feed');
feed.value = drink.value + " keeps me awake:" + feed.value;
}
</script>
<form name="new_post" method="post" id="new_post_form">
<table>
<thead>
<tr>
<td>
<div id="postdiv" class="postarea" style="display:block;">
<textarea name="wpam_nm_text" id="feed" style="width:100%;" rows="4"></textarea>
</div>
<select id = "drink">
<option>Milk</option>
<option>Coffee</option>
<option>Tea</option>
</select>
<p style="text-align:right; float:right;"><input name="send" type="submit" onClick="setText()" class="button-primary" id ="submit" value='go' />
</td>
</tr>
</thead>
</table>
</form>​
I think you can access your select dropdown value from the server side and append it to the text
HTML
<select name="choice">
<option>Milk</option>
<option>Coffee</option>
<option>Tea</option>
</select>
PHP
<?php
$wpam_nm_text = $_POST['wpam_nm_text'];
$choice = $_POST['choice'];
$customText = "default";
if($choice == "Coffee")
$customText = "Coffee keeps me awake";
else if($choice == "Milk")
$customText = "WhatStuffYouWantHere";
//combine the dropdown value and the textarea value
$requiredVal = $customText.' '.$wpam_nm_text;
print($requiredVal);
//do whatever you want with $requiredVal
?>
That should do it
You are correct, a simple bit of javascript can help you accomplish this.
<script>
var drinks = {
Milk: "does a body good",
Coffee: "keeps me up",
Tea: "is yummy"
};
function optionChange(){
var drinkText = drinks [document.getElementById('drinkSelection').value]
document.getElementById('wpam_nm_text').value = drinkText;
}
</script>
here is the updated fiddle
http://jsfiddle.net/tNrfA/6/
EDIT:
I did not see at first that this was on submission of the page. For that, what codingbiz posted should work just fine. This way should only be used if they can update the custom text.
If you did need to do it on the front end though, you could do something like this.
fiddle: http://jsfiddle.net/tNrfA/14/
var drinks = {
Milk: "does a body good",
Coffee: "keeps me up",
Tea: "is yummy"
};
function submitForm(){
drinkText = drinks [document.getElementById('drinkSelection').value]
document.getElementById('wpam_nm_text').value = drinkText + ' ' +document.getElementById('wpam_nm_text').value;
document.getElementById('new_post_form').submit();
}
<div id="postdiv" class="postarea" style="display:block;">
<textarea name="wpam_nm_text" id="wpam_nm_text" style="width:100%;" rows="4"></textarea>
</div>
<select id="drinkSelection">
<option>Milk</option>
<option>Coffee</option>
<option>Tea</option>
</select>
<p style="text-align:right; float:right;"><input name="send" type="button" class="button-primary" value="<?php _e('Send', 'wp_admin_blog'); ?>" onclick="submitForm()" />
</td>
</tr>
</thead>
</table>
</form>​

Populate text field with checkbox

I have a table with a column on prices and the next column is a check box to mark whether that item was paid. I was wondering how I could populate the text box with the amount when the check box is clicked.
Code:
<table>
<tr>
<td>Procedure</td>
<td>Amount</td>
<td align="center"><input type="checkbox"></td>
<input type="text" size="20" value="" class="currency">
</tr>
</table>
HTML
<table>
<tr>
<td>Procedure</td>
<td>Amount</td>
<td align="center">
<input type="checkbox">
</td>
<td>
<input type="text" size="20" value="" class="currency">
</td>
</tr>
</table>
JavaScript/jQuery:
$(function() {
$('table input[type="checkbox"]').change(function() {
var input = $(this).closest('td').next('td').find('input');
if ($(this).is(':checked')) {
var amount = $(this).closest('td').prev('td').text();
input.val(amount);
} else {
input.val('');
}
});
});
See a working example at: http://jsfiddle.net/KTQgv/2/.
Some code you can expand on:
<input type="checkbox" rel="textbox1" name="banana"/>
<textarea id="textbox1" ></textarea>
JS/jQuery:
$('input:checkbox').click(function(){
var tb = "#"+$(this).attr('rel');
if($(this).is(":checked"))
$(tb).append(this.name + "\n");
});
Fiddle: http://jsfiddle.net/maniator/hxkX3/
Semantically, a checkbox isn't really the best control to choose to initiate an action. I would have an edit or pay (something actionable) button/icon which initiates the action of allowing the user to enter a value.
However for the purposes of your example, the click event of the checkbox is enough to be able to change the contents of your table cell from the displayed text (if any) to a textbox.
Given
<td id="row_1">Unpaid</td>
Using
$('#row_1').html('<input type="text" name="txtRow1" />');
is simplistic, but enough to enable the user to type in a value which could then be posted to the server during a save action.

Categories