Nested Form to disable text field with selection box HTML - javascript

I have code form.html and entry.php
First I want to disable textfield with selection box using javascript, then submit it to give an output.
If i not using this code <form name="form1" method="post" action="entry.php"> form.html is success to display in web browser, but how i can submit it with one submit button?
form.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('.group').hide();
$('#option1').show();
$('#chooseForm').change(function() {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
</script>
</head>
<body>
<form name="form1" method="post" action="entry.php">
<select id="chooseForm" name="select">
<option value="option1">Form1</option>
<option value="option2">Form2</option>
<option value="option3">Form3</option>
</select>
<form id="option1" class="group">
<input name="a" value="form A"><br>
</form>
<form id="option2" class="group">
<input name="a" value="form A"><br>
<input name="b" value="form B"><br>
</form>
<form id="option3" class="group">
<input name="a" value="form A"><br>
<input name="b" value="form B"><br>
<input name="c" value="form C"><br>
</form>
<input value="Save" name="submit" type="submit"><br>
</form>
</body>
</html>
entry.php
<?php
$select = $_POST['select'];
$a = $_POST['a'];
$b = $_POST['b'];
$c = $_POST['c'];
echo $select;
echo "<br>";
echo $a;
echo "<br>";
echo $b;
echo "<br>";
echo $c;
?>
Can anyone solve this code without nested form? thanks :)

First of all, you can't nest forms.
As I understand the idea is to group some elements. If so, then replace the interior <form>tags with <div>s.
The other problem is that you want to use the same input elements names through different sections. Basically, if name is not unique, it will get updated with the last occurrence's value. For example:
<input type="text" name="a" value="val 1" />
<input type="text" name="a" value="val 2" />
When the above is posted, $_POST['a'] will contain val 2 value. Even, if the second text-box is hidden. So either you make text-boxes names unique or you disable the ones, which are hidden. disabled attribute will make the control disabled for user input and also not present in $_POST array. So, in this case:
<input type="text" name="a" value="val 1" />
<input type="text" name="a" value="val 2" disabled />
$_POST['a'] will contain val 1 value, because the second text-box is disabled.
In your case, every time you hide a section you should disable all controls within the group. Here's how to do it: disable all form elements inside div.

Related

Get RadioButton value with php

I can get the value of text input from a form.
Like this:
<label for="lblName">Name (*):</label>
<input type="text" name="txtBoxName" id="txtBoxName">
I submit the form with a validation check first:
<form name="contactDataForm" action="sendMail.php" onsubmit="return ValidationCheck()" method="post">
This is sendMail.php:
$Name = $_POST['txtBoxName'];
This works, but how you do it for a RadioButton value? The selected radio button value.
<input type="radio" name="test1" id="test1" value="test1" required> TEST 1<br>
<input type="radio" name="test2" id="test2" value="test2"> TEST 2<br>
A radio button is used for selecting a single value from multiple values. So, there will be only one single name for all the radio buttons and the values for each of them may vary. You can get the value using the usual $_POST['name'] in PHP.
<form action="" method="post">
<input type="radio" name="radio" value="1">Radio 1
<input type="radio" name="radio" value="2">Radio 2
<input type="radio" name="radio" value"3">Radio 3
<input type="submit" name="submit" value="Get Selected Values" />
</form>
<?php
if (isset($_POST['submit'])) {
if(isset($_POST['radio']))
{
echo "You have selected :".$_POST['radio']; // Displaying Selected Value
}
}
?>
Make the 2 radio buttons with the same name attribute test1 example
you will find the radio button value at your PHP server with
$radioValue = $_POST['test1'];
This is a standard HTML Form. A HTML form always gives the value of the selected radio button. If you have a 2 radio buttons with the same name value this will work. The selected radio button will then post your answer to the server. You can then get the value the same way.
I hope this helps.

Echo radio button value without using submit button in php

I want to echo the selected radio button value without using submit button. I want to display the value of radio button when it is selected. Here is the code.
<?php
if(!empty($_GET['a1'])){
$selected = $_GET['a1'];
}
else{
//if no option was selected, set home as default
$selected = 'home';
}
?>
<form action="" method="post">
<input type="radio" name="a1" value="home" /> Home <?php echo ($selected == 'home' ? 'This was selected!' : '');?> </br>
<input type="radio" name="a1" value="site1" /> Site 1 <?php echo ($selected == 'site1' ? 'This was selected!' : '');?> </br>
<input type="radio" name="a1" value="site2" /> Site 2 <?php echo ($selected == 'site2' ? 'This was selected!' : '');?> </br>
</form>
I want the output in the following format
Here is your solution....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>//jQuery Plugin
<?php
if(!empty($_GET['a1'])){ $selected = $_GET['a1'];}
else{ $selected = 'home';}
?>
<form action="" method="post">
<label>
<input type="radio" name="a1" value="home" /> Home
</label></br>
<label>
<input type="radio" name="a1" value="site1" /> Site 1
</label></br>
<label>
<input type="radio" name="a1" value="site2" /> Site 2
</label></br>
</form>
<span class="r-text"><?php echo $selected;?></span>
<script>
$('input[type=radio]').click(function(e) {//jQuery works on clicking radio box
var value = $(this).val(); //Get the clicked checkbox value
$('.r-text').html(value);
});
</script>
I'm not sure how you want to do a clientside manipulation with PHP(!!!) but this is a jquery solution for displaying the value of radio button when it is selected:
$('#myform input[type=radio]').on('change', function(event) {
var result = $(this).val();
$('#result').html(result);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="" method="post">
<input type="radio" name="a1" value="home" /> home</br>
<input type="radio" name="a1" value="site1" /> site1</br>
<input type="radio" name="a1" value="site2" /> site2</br>
<div id="result"></div>
</form>
You need to use the onchange event of the radio buttons with javascript/jquery.
PHP runs server-side, not client-side, so without sending client-side changes to the server, it can't output stuff based on them: you'd need to send a $_POST or a $_GET request, either by submitting the form or using AJAX. Not necessary for this.
<div id="radioMsg"></div>
<form action="" method="post">
<input type="radio" name="a1" value="home" onchange="showRadio()" /> Home <?php echo ($selected == 'home' ? 'This was selected!' : '');?> </br>
<input type="radio" name="a1" value="site1" onchange="showRadio()" /> Site 1 <?php echo ($selected == 'xyz' ? 'This was selected!' : '');?> </br>
<input type="radio" name="a1" value="site2" onchange="showRadio()" /> Site 2 <?php echo ($selected == 'zbc' ? 'This was selected!' : '');?> </br>
</form>
Meanwhile in showRadio():
function showRadio(){
var radioVal = $("input[name='a1']:checked").val();
if(radioVal) {
$( "#radioMsg" ).html("<p>"+radioVal+"</p>");
}
}
I'm not sure where you want the changed button's value outputted, so I'm putting it into that div just as an example.
To define the onchange event in an external stylesheet instead of inline:
$( "input[name='a1']" ).change(function(){
... (showRadio's contents go here)
});

Form elements added after AJAX and php script not transfered to $_POST

I am using AJAX to get the value of the element chosen in a select input and to launch a PHP script that returns some input checkboxes fields.
Here is what it looks like :
HTML
<form method="post" action="liens_chra.php" name="Form" id="Form">
<label for="id_turbo">Turbo</label>
<select name="id_turbo" size="1" id="id_turbo">
<option value="10970">TM1761178</option>
<!-- and more -->
</select>
<div id="choix_reffab">
<!-- checkboxes appear here -->
</div>
<p class="form ">
<input type="submit" name="valider" value="Enregistrer">
</p>
<!-- something I tried too
<input type="button" id="submitevent" value="Enregister">
<script type="text/javascript" >
$('#submitevent').click(function() {
$("#Form").submit();
});
</script> -->
</form>
JQuery/AJAX
$("#id_turbo").change(function(){
var id_turbo = $("#id_turbo").val();
$.ajax({type: "POST",
url: "<?=URLSITEWEB;?>admin/outils/ajax/liste_Reffab.php",
data: "id_turbo="+id_turbo+"",
error: function(){
/*alert(id_famille+" \n ne passent pas.");*/
},
success: function(data){
$("#choix_reffab").html(data);
}
});
});
PHP
/* things */
foreach ($fabTab as $fab) {
$chaine .= '<input type="checkbox" "name=tabreffab[]" id="'.$fab.'" value="'.$fab.'" /><label for="'.$fab.'">'.$fab.'</label>';
}
echo $chaine;
So, when the user selects a value, some checkboxes appears.
My problem is that the data I want is not transfered to $_POST, and here is the result :
var_dump($_POST['tabreffab']) // is NULL, others values are ok
I'm fairly new to AJAX & JQuery, so I have no idea what to do. I tried submitting the form using JQuery, made no changes.
I got your issues when you return your checkbox your mistake is at name property of element.
In your code "name=tabreffab[]" Replace with name = "tabreffab[]"
$chaine .= ''.$fab.'';
Insted of above write like below code
$chaine .= '<input type="checkbox" name = "tabreffab[]" id="'.$fab.'" value="'.$fab.'" /><label for="'.$fab.'">'.$fab.'</label>';
checkboxes value will display in $_POST[] only on selecting a value
try in a editor
<?php
echo "<pre>";
print_r($_POST);
?>
<form id="sampleName" name ="sampleName" method="post" action="">
<textarea id="testID" name="textAreaName"></textarea>
<input type="text" name="text1" />
<input type="checkbox" name="check" value="1"/>
<input type="checkbox" name="check" value="2"/>
<input type="checkbox" name="check" value="3"/>
<input type="submit" value="submit">
</form>
The problem is in your Ajax call, specifically in the data part. It takes a json formatted object. The right way to write this is data:{id_turbo:"id_turbo_value"} not as what you used - data: "id_turbo="+id_turbo+""

Changing 2 hidden input fields on select

I have a form that is need to be passed to my CRM.
the form is simple and contains 2 important fields that defines under what category the data will be received in my crm.
<form method="post" action="http://api.leadmanager.co.il/v1/submit" id="lm_form">
<input type="hidden" name="lm_form" value="5750" />
<input type="hidden" name="lm_key" value="cc0ce4fe280e46e986e5716f9feedaab" />
<input type="hidden" name="lm_tyt" value="" />
<input type="submit" value="submit"/>
</form>
I want to add a drop down list with 2 options first will send the form i mentiond above as is.
the second will modify the values of "lm_key" and "lm_form" to other values.
Plain JS code can be like this. But I would advice you to use some JS library like JQuery, AngulerJS or another one.
<form method="post" action="http://api.leadmanager.co.il/v1/submit" id="lm_form" name="form">
<input type="hidden" name="lm_form" value="5750" />
<input type="hidden" name="lm_key" value="cc0ce4fe280e46e986e5716f9feedaab" />
<input type="hidden" name="lm_tyt" value="" />
<select name="selectField" onchange="changeValues()">
<option value="1">1</value>
<option value="2">2</value>
</select>
<input type="submit" value="submit"/>
</form>
<script>
function changeValues() {
form.lm_key.value = form.selectField.value;
form.lm_form.value = form.selectField.value;
}
</script>

Copy value of one form into the hidden field of a second form

I have a page with multiple forms, however all forms need to take the value of a radio button in the products form. Below is a simplified version of my forms which are all on the same page.
<form name="products" method="post" action="" />
<input id="prod_name" name="prod_name" type="radio" value="Product 1" checked />
<input id="prod_name" name="prod_name" type="radio" value="Product 2" />
</form>
<form name="delivery_method1" method="post" action="" />
<input type="hidden" id="item_name" name="item_name" value=""/>
<input type="image" name="submit" value="submit">
</form>
<form name="delivery_method2" method="post" action="" />
<input type="hidden" id="item_name" name="item_name" value=""/>
<input type="image" name="submit" value="submit">
</form>
I understand I should be able to copy the value of "prod_name" into the hidden field of "item_name" using JavaScript however I have tried a number of solutions but they haven't worked.
I have very little JavaScript knowledge so I would appreciate if someone could provide me with a full function and details of how the function is actioned from within the form.
ID attributes should be unique. If you don't need them, remove these. If you're using id=... for styling purposes, replace all occurences of id= by class=, and replace the sharp (#) in the CSS by a dot.
When a form is submitted, only elements with a name attribute are sent.
This should work:
....
<script>
function fill(value) {
var forms = document.forms;
for (var i = 0; i < forms.length; i++) {
if (forms[i].item_name) forms[i].item_name.value = value;
}
}
</script>
</head>
<body>
...
<form name="products" method="post" action="">
<input onchange="fill(this.value)" name="prod_name" type="radio" value="Product 1" checked />
<input onchange="fill(this.value)" name="prod_name" type="radio" value="Product 2" />
</form>
...
All form elements are accessible through their name at the form element. All forms are accessible (by name or by their index in the document) through the document.forms object.
When the radio selection changes, function fill() is called, passing this.value as an argument. From the context of the radio input elements, this.value points to the value of the radio element.
Then, we loop through all forms in the document. If item_name is an element in the form, the value is updated.

Categories

Resources