I have a select in my HTML form:
<form name="correo" id="correo" method="post" action="#" enctype="multipart/form-data" onSubmit="<!--return checkFields();-->" ><div class="multi-field-wrapper" name="multi-field-wrapper">
<div class="multi-fields" name="multi-fields">
<div class="multi-field" name="multi-field">
<div>
<label for="penviadas[]"> Cantidad </label>
<input type="number" name="penviadas[]" class="penviadas" id="penviadas" maxlength="70" placeholder="¿Cuántas?" onClick="removerIcon('iconcant');" >
</div>
</div>
</div>
<button type="button" class="add-field">Añadir otra referencia</button>
</div>
And I can add fields dynamically (or what's the same, I can repeat the code above many times; the code below works).
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
Let's say I have 3 different selects (penviadas). What I want is to get all of them in my PHP file once I submit the form. It used to work, but now, for some reason, I can only get THE FIRST select (penviadas). Why am I not getting all the values from penviadas array?
PD: I print it in my PHP in different ways but they all return ONLY THE FIRST ELEMENT from penviadas, not the rest:
var_dump($_REQUEST['penviadas']);
I figured it out after many hours playing stupid.
With the information in the OP it was impossible to discover where there was a problem. I found the solution here: Submitting form from different <div> HTML
Basically, I had this structure:
<div...
<form...
</div...
</form>
I thought it was alright and didn't think for a moment this could be affecting. Thus, it wasn't the PHP/JS but the html tags that were incorrect. Thanks for your time.
PHP Code :
<?php
if(isset($_POST['test']))
{
$data = $_POST['referenciasnuevas'];
foreach ($data as $key => $value) {
echo $value . "<br />";
}
}
?>
Html Code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#">
<div class="multi-field-wrapper" name="multi-field-wrapper">
<div class="multi-fields" name="multi-fields">
<div class="multi-field" name="multi-field">
<label for="referenciasnuevas[]">Referencia pieza</label>
<select name="referenciasnuevas[]" id="referenciasnuevas" class="referenciasnuevas" style="width: 105px" onClick="removerIcon('iconref');">
<option selected value='-1'> ¿cliente? </option></select>
</div>
</div>
<button type="button" class="add-field">Añadir otra referencia</button>
</div>
<input type="submit" name="test" value="Submit">
</form>
<script>
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
</script>
</body>
</html>
The above code works for me.please look my code
Related
I wish to search from an input (type="text") in a grid (like table but made in .css for be responsive so with div ans span in html) if input (type="text"). (I precise than this grid in imported from sql sever by php). I don't knw what wrong in my code but it's hide evreything.
I tried http://jsfiddle.net/FranWahl/rFGWZ/ by modifing of course what I needed (so #search by #searchName; table tr by .grid ->class of my div(s); td by span and .text() by .val()-> actually I tried both )
//so here my .js
$(function() {
$("#searchCode").on("keyup", function() {
var value = $(this).val();
$(".grid").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("span:nth-child(1)").val();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
});
//here my php
<form action="menu.php?Option=SelectIgr" method="post">
<div id="titleRow" class="grid">
<span class="cellCode titleCell"><button name="order" class="titlebutton" type="submit" value="orderByCode">Code</button></span>
<span class="cellName titleCell"><button name="order" class="titlebutton" type="submit" value="orderByName">Name</button></span>
<span class="cellEdit titleCell">Edit</span>
<span class="cellDelete titleCell">Delete</span>
</div>
</form>
<?php foreach($ingredients as $object)
{ ?>
<form method="post" id=<?=$object->code()?>>
<div class="grid">
<span class="cellCode"><input type="text" name="code" value=<?=$object->code()?>></span>
<span class="cellName"><input type="text" name="name" value=<?=$object->name()?>></span>
<span class="cellEdit"><button class="ButtonEdit" type="submit" formaction="/action_edit.php"></button></span>
<span class="cellDelete"><button class="ButtonDelete" type="submit" formaction="/action_delete.php"></button></span>
</div>
</form>
<?php } ?>
I expected that in live it would hide line that I don't whant like here http://jsfiddle.net/FranWahl/rFGWZ/ but it's hide everything (like if it didn't show the value on id
Omg I am so st**id today, I should sleep, for those which didn't seen the solution : I attribut my classes to span instead of input facepalm and i try to take the values of the span instread of the input.
Sorry
I have two php pages. In first php page I have two divisions, where in one division I have hyperlinked text which on click showing result in other division of same page, with the help of ajax. The code for same is below:
<body>
<div id="container">
<div id="content"> Sidebar <p> </p>
<div class="form">
<pre>
<a href=sample_disease_form.php><b>Disease</b></a><p>
<a href=sample_drug_form.php><b>Drug</b></a><p>
</pre>
</form>
</div>
</div>
<div id="sidebar">
</div>
</body>
Ajax code for this is:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
$('a').each(function(){
$(this).on("click",function(e) {
console.log(e);
e.preventDefault();
$('#sidebar').load($(this).attr('href'));
});
});
});
</script>
Now, I have other PHP file, one which is opening after clicking hyperlink on same page but in other division, contains form. After being clicked submit button of this form I want the result gets displayed in same division but it will come from different PHP file. How can I achieve this?
The second file's code is below:
<pre><h2> Drug </h2></pre>
<pre><p><span class="error"> * required field </span></p></pre>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<pre> Name: <input type="text" name="drug" value="<?php echo $drug;?>"><span class="error">* <?php echo $nameErr;?></span>
<input type="checkbox" name="drug[]" value="disease">Disease</br>
<input type="checkbox" name="drug[]" value="target">chemical
<input type="submit" name="submit" value="Submit"></pre>
</form>
Since I am very new to these kinds of programming stuff, expecting help.
you need to submit the page through ajax and load the result in the same div
I'm doing php that is textbox a value empty it will open a alertbox (I'm using javascript in here )
this is my code
<?php
include('config.php');
if(isset($_POST['submit'])){
$username=$_POST['username'];
?>
<script>
function validate(){
if(document.forms[0].username.value==""){
window.alert("You must enter both values");
return false;
}
}
</script>
<?php
}
?>
<html>
<div><p>Member Profile</p>
<form action="testing.php" method="POST" onsubmit="return validate();">
Username<br>
<input class="user" type="text" name="username" id="username" /><br>
<input type="submit" name="submit" value="register" />
</form>
</div>
</html>
The problem is i have to click 2 times before the alert show
please help me to solve this problem
It's because the script is inside the php if(isset){} block, one click submits the form, which generates the script and then it works the second time.. try this setup instead:
<?php
include ('config.php');
if (isset($_POST['submit']))
{
$username = $_POST['username'];
}
?>
<html>
<head>
<script>
function validate () {
if (document.forms[0].username.value == "") {
window.alert("You must enter both values");
return false;
}
}
</script>
</head>
<body>
<div>
<p>
Member Profile
</p>
<form action="testing.php" method="POST" onsubmit="return validate();">
Username
<br>
<input class="user" type="text" name="username" id="username" />
<br>
<input type="submit" name="submit" value="register" />
</form>
</div>
</body>
</html>
Edit:
I've moved the script tag inside the head tag. I'm not sure if there are any implications for having the script outside but just to be sure I've moved it.
2nd Edit: (OCD is kicking in)
I've added body tags, not sure if you copied and pasted this code but it looked weird to me :)
I'm generating a number of textareas with jQuery. I want to retrieve the values of all the filled out textareas via an on-page POST method (it's kind of a proof of concept, quick and dirty, I wouldn't do this normally), but when I hit submit, I get the value of only one, whichever is the last textarea value posted. I imagine I can do this with an array and a foreach loop, but am unsure how to do it, given all the additions of the jQuery/on-page factors complications in this endeavor. I also imagine it might have something to do with all of the generated textareas having the same name... anyone?
Here's the code-
<script type="text/javascript">
$(document).ready(function() {
$('.textadder').click(function(){
$("form").append("<p class='introText2'>Enter More Text</p><textarea rows='5' cols='20' name='textForm' class='formText2'></textarea>");
});
});/*document ready*/
</script>
<?php
if (isset($_POST['textForm']))
{
$formTxt = $_POST['textForm'];
echo $formTxt;
}
?>
</head>
<body>
<div id="wrapper">
<div id="submittedHolder"></div>
<div class="formBox">
<form method="post" action="">
<p class="introText">Please Enter Some Text</p>
<textarea rows="5" cols="20" name="textForm" class="formText"></textarea>
<input type="submit" class="submitter" value="Submit">
</form>
<div class="textadder"><p>More Text</p></div>
<div class="clearer"></div>
</div><!--formBox-->
</div><!--wrapper-->
</body>
</html>
Thanks!
Use textForm[] in your textarea name instead of textForm:
<textarea rows="5" cols="20" name="textForm[]" class="formText"></textarea>
After that all "textForm" textareas would be in $_POST['textForm'] array.
<script type="text/javascript">
$(document).ready(function() {
$('.textadder').click(function(){
$("form").append("<p class='introText2'>Enter More Text</p><textarea rows='5' cols='20' name='textForm[]' class='formText2'></textarea>");
});
});/*document ready*/
</script>
<?php
if (isset($_POST['textForm']))
{
$formTxt = $_POST['textForm'];
foreach($formTxt as $txt){
echo $txt;
}
}
?>
</head>
<body>
<div id="wrapper">
<div id="submittedHolder"></div>
<div class="formBox">
<form method="post" action="">
<p class="introText">Please Enter Some Text</p>
<textarea rows="5" cols="20" name="textForm[]" class="formText"></textarea>
<input type="submit" class="submitter" value="Submit">
</form>
<div class="textadder"><p>More Text</p></div>
<div class="clearer"></div>
</div><!--formBox-->
</div><!--wrapper-->
</body>
</html>
Use array here.
the post object will now be an array.
i am doing a simple html form for two languages(English & Hindi) so i show the link for both language for ex English / <a href="#">Hindi after that i need to display the form with corresponding language what user clicked one of the hyperlink. so here how do i find out which language link is clicked?
English / <a href="#">Hindi
<? if($_SESSION['language']=='English'){ ?>
<form action="" method="post" name="englishform">
......
</form>
<? } else { ?>
<form action="" method="post" name="hindiform">
......
</form>
<? } ?>
You can not change PHP code with java script. As PHP code is run on server. Sent to client and then a java script can be run on the result. So you have two options:
Either send both forms. Use css to hide both. An onclick show the corresponding form.
Or the AJAX soltion. Then the user clicks on the link. Use java script to fetch the form from the server (an other URL) and show in in the page.
You could add a hidden field to both forms, containing the selected language.
<form action="" method="post" name="englishform">
<input type="hidden" name="language" value="en" />
...
</form>
<form action="" method="post" name="hindiform">
<input type="hidden" name="language" value="hi" />
...
</form>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#showEnglishForm").click(function()
{
$("#hindiFormDiv").hide();
$("#englishFormDiv").show();
});
$("#showHindiForm").click(function()
{
$("#hindiFormDiv").show();
$("#englishFormDiv").hide();
});
});
</script>
</head>
<body>
show English form
show Hindi form
<div id="englishFormDiv" style="display:none;">
<h3>English form</h3>
<form action="" method="post" name="englishForm">
...
</form>
</div>
<div id="hindiFormDiv" style="display:none;">
<h3>Hindi form</h3>
<form action="" method="post" name="hindiForm">
...
</form>
</div>
</body>
</html>
Well, assuming you just want to hide or show a different form based on the hyperlink:
<a class="switcher" rel="englishform" href="#"> English </a> / <a class="switcher" rel="hindiform" href="#">Hindi</a>
<form action="" method="post" id="englishform" style="display:none">
......
</form>
<form action="" method="post" id="hindiform" style="display:none">
......
</form>
<script>
$("a.switcher").click(function(e){
var name = $(this).attr("rel");
$("#" + name).show();
e.preventDefault();
});
</script>
I don't know javascript well enough, but if you get jQuery you can do the following:
English / Hindi
<form action="" method="post" data-lang="en">
...
</form>
<form action="" method="post" data-lang="hi">
...
</form>
jQuery: (needs to be specified more on your actual page or it will target all links and forms)
$('a').click(function(e){
e.preventDefault();
$('form').hide();
$('form[data-lang="'+$(this).attr('href')+'"]').show();
});
Or without jQuery:
<? if(!$_GET['lang'] || ($_GET['lang'] != "en" && $_GET['lang'] != "hi")){ ?>
English / Hindi
<? }elseif($_GET['lang'] == "en"){ ?>
<form action="" method="post">
...
</form>
<? }elseif($_GET['lang'] == "hi"){ ?>
<form action="" method="post" data-lang="hi">
...
</form>
<?
}
?>