I have a form kinda like this:
<form action="#" method="post">
<select name="phase">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div data-phase="1">
<input type="text" name="info" />
</div>
<div data-phase="2">
<input type="text" name="info" />
</div>
<div data-phase="3">
<input type="text" name="info" />
</div>
</form>
By using JQuery, at any time, only one of the DIVs is displayed, corresponding to the value in the select box.
The issue is that the value POSTed is overridden by the last text input, since they all have the same name. Is there away around this WITHOUT renaming the inputs?
Yes -- before submission, dynamically remove the unwanted div sections. You could do this by hooking in using jQuery's submit() function callback.
To remove the elements, you could use jQuery's remove() function, for example. It would be easier with div ids, but you could also use indexes to do it.
You can dynamically rename the inputs with javascript before submitting the form. Or you could even remove the disabled inputs from the DOM just before submission.
For example, something like this may work:
$(input[name="info"]).filter(function() {
return $(this).css('display') == "none";
}).remove();
So, select all the inputs named "info" that have display: none and remove them.
I so sorry to say this: you'll have to rename the name of each div. something like this
name="info1" name="info2" name="info3"
you only use the same name for the name attribute when you dealing with radio input type.
Related
I have two pages lets say first.php, second.php.
first.php:
<form name=register method="post" action="second.php">
Name:<input type="text" name="username" value=<?=$username?> >
Email:<input type="email" name="email" value=<?=$email?> >
Hobbies:<select name="hobbies" id="hobbies" disabled>
<option value="cricket">cricket</option>
<option value="football">football</option>
</select>
</form>
second.php:
<?
print_r($_POST);
I am getting only name and email and not select value.
If I print the post value I am not getting the select value, but when I am removing the disabled in select, I am getting the select value in hidden.
In this scenario, I don't want the user to select the select box and when I submit the form, I should get the value in hidden in second.php.
I have tried many possible ways, to no avail.
Can anybody suggest me how can I achieve this.
Disabled tags can't be send to POST. Change disabled to readonly or hidden
You cant post a disabled field. Maybe you can disable the selectbox right before you post it or you could (like the comments tell you) get a hidden value to be posted that has the standard value you want. If the select box is able to be posted(so not disabled) you can overwrite the hidden value with the select value.
You can do this by Jquery before the form is submitted.
<script>
$(document).ready(function () {
$('#register').submit(function() {
$('select').removeAttr('disabled');
});
});
</script>
In
second.php
you have to create a validation to check that user can be registered or no.
if($this->user->can_register()){
$this->user->save($_POST['hobbies']);
}
Because if only with html or js exception is not enough to handle that case. Some users can just inspect element and remove the disabled element.
For my php file, I need to grab the unique form name.
The php file is executed when a user clicks the submit button. However, there are multiple submit button each with the same id, but they all have unique names. I need the name when they click on the submit button.
you dont want elements in html with the same id - bad practice in general. Your page will likely load normally but an html validator will notice it as an error.
html validator: http://validator.w3.org/
without seeing your code, its difficult to give you a definitive answer. if you have miltuple forms you can use hidden inputs. e.g.
<input type="hidden" name="form_name" />
Otherwise you can use javascript to put data in the form when the button is clicked. example javascript using jquery
html:
<form id="formid" >
<button type="button" id="someid" onclick="submitForm('btn1')" />
<button type="button" id="someid" onclick="submitForm('btn2')" />
<input type="hidden" id="btnsubmitid" value="" />
</form>
js:
function submitForm(btnID){
$("#btnsubmitid").val(btnID);
$("#formid").submit();
}
1 way is to put a hidden input inside of your form.
<input type="hidden" name="formName" value="[name of form]" />
then in your php, you can get it using
$form-name = $_POST['formName'];
pretty sure there are other ways, but this came to mind first.
I'm new to html, but I need to make this block of code functional:
<form method="get" action="http://cat.opal-libraries.org/search~S9/X">
<p>
<select name="searchtype">
<option value="X" selected="selected">Keyword</option>
<option value="t">Title</option>
<option value="a">Author</option>
<option value="d">Subject</option>
</select>
<input class="textfield" name=" " style="width: 200px;" type="text">
<input class="button" value="Search" type="submit">
I want to be able to select say a Title, and enter in a title, and hit search, and have it work like i entered it in this page
http://cat.opal-libraries.org/search/t
I would appreciate any suggestions on doing this!
Sorry for the non-answer, but as I mentioned, the answer to your question would be too long to be suited to Stack Overflow.
I suggest you get your hands dirty by following a PHP tutorial like this one.
As a side note, your HTML is invalid. You opened <form> and <p> tags on lines 1 and 2, and didn't close them. Semantically, it's a little strange placing those form elements in a paragraph. That's not really what a paragraph does.
Question is very broad as there are many ways to approach it. Here is a simple edit of your code that makes it work if you want to search by title:
<form method="get" action="http://cat.opal-libraries.org/search/t">
<input class="textfield" name="SEARCH" style="width: 200px;" type="text">
<input class="button" value="Search" type="submit">
</form>
What I did was fix your URL and give a name to the input. You probably want to read up on how <form method="get" works and then you can probably figure out how to search by different fields.
Updated to include full code. It'd be good if you read up on these items to find out how/why it works. Basically when they choose a new search type, you need to change the action of the form (that is the piece you were missing). I also added the "searchscope" field and set it to 28 since their website was doing that. I don't know what that does.
This assumes you are referencing jQuery. Related documentation jQuery attr() and jQuery change().
<form id="searchForm" method="get" action="http://cat.opal-libraries.org/search/X">
<select id="searchType">
<option value="X" selected="selected">Keyword</option>
<option value="t">Title</option>
<option value="a">Author</option>
<option value="d">Subject</option>
</select>
<input class="textfield" name="SEARCH" style="width: 200px;" type="text">
<input name="searchscope" type="hidden" value="28">
<input class="button" value="Search" type="submit">
</form>
<script>
$("#searchType").change(function () {
var newPath ="http://cat.opal-libraries.org/search/" + $("#searchType").val();
$("#searchForm").attr("action", newPath);
});
</script>
It looks like the search engine you're referencing uses a separate endpoint for each "searchtype," which actually makes this relatively easy to do with Javascript and a couple changes to your form.
Change the name attribute on the <select> to an id instead, so that it isn't actually sent to the search engine.
Change the name attribute of the text field to "SEARCH" so that it will be sent and recognized as the search string.
Add an on-change listener to the sel which modifies the action attribute of the form as appropriate. If you're using JQuery, that might look something like this:
var base = "http://cat.opal-libraries.org/search/";
$("#searchtype").change(function() {
$(that).closest("form").attr("action", base + $(that).val());
});
This might be a basic question of HTML but I'd like to know if it is possible in PHP. Usually when building a form submission page, the form tag is set per one form group. So the submit button is assigned per one form tag. The elements of form fields have to be close as enclosed in the form tag. If I want more complicated layouts, then is it possible to separate form tags to divide form fields?
For example,
<?php
print_r($_POST);
?>
<form name="test" action="" method="post">
First name: <input type="text" name="firstname" value="" /><br />
<input type="submit" value="submit" />
</form>
<p>some other contents</p>
<form name="test" action="" method="post">
Last name: <input type="text" name="lastname" value="" />
</form>
In this case, even if the second field is filled, the value won't be sent. If possible, I'd like to have just one submit button and control multiple forms.
Wrap your entire page into a single form and use some kind of deliminator for your elements (for instance "form2_field1"). I have never found having multiple forms useful (even if there are hide/unhide values) and my guess is that the submit button will probably only submit the form it is wrapped in. As one of the comments has mentioned, use JQuery if you want more complex forms. However, my recommendation is just to send over the entire form, whether it is complex or not and process it according to what you want.
I have a php page with a form on it for adding people to a small group.
For each person being added, there is a with multiple form elements, each named according to the person's number. For example:
<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>
For each person in the database, the php page populates a form sections.
To add additional people, the user can click on a "+" icon, at which time the page uses jQuery to dynamically populate a new . To do this I am simply appending the new div html to the existing form. This means that the javascript page contains all the same html markup (to be appended), as the php page.
This seems like an unnecessary duplication of code. Whenever I change something in the php page, I also have to change it in the javascript code.
Is there any general method for avoiding such code duplication? The only thing I can think of is to use jQuery to grab the html from an already existing div. But in this case, the values of the form fields for user n will appear in the new code for user n+1.
Thanks.
Capisci :)?
<div class="user" id="user_1">
<input type="hidden" name="uid[0]" value="1"/>
<input type="text" name="lastname[0]" value="user480029"/>
...
</div>
<div class="user" id="user_2">
<input type="hidden" name="uid[1]" value="2"/>
<input type="text" name="lastname[1]" value="arto"/>
...
</div>
Now when adding another field just...
<div class="user" id="user_3943094103945">
<input type="hidden" name="uid[]" value=""/>
<input type="text" name="lastname[]" value=""/>
...
</div>
Then you iterate trough $_POST[] a do what you want.
You have user ID on .user, so I you delete user you can remove that part of HTML (this is more for UX), more importantly, you don't have hundreds of variables but just a few array which you can iterate in one loop. Hope you get the point. Cheers.
The php code should give the javascript a "prototype", which could be modified using javascript. That way, even if there aren't any users, the javascript would still work. This example is obviously missing lots of code (like forms), but it should give you an idea. I haven't tested it because I assume you have to make lots of modification anyways.
<script type="application/x-javascript">
addEventListener("load",function(){
document.getElementById("add-user").addEventListener("click",function(){
var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
document.getElementById("user-list").appendChild(node);
node.id="users_"+(n+1);
for(var i=0;i<list.length;++i)
list[i].name&&(list[i].name+="["+n+"]");
},false);
},false);
</script>
</head>
<body>
<div id="prototype-container">
<? /* print out a div without any information in it */ ?>
</div>
<div id="user-list">
<? /* print out divs with some infomation in them */ ?>
</div>
<button id="add-user">add a user</button>