This is probably a stupid way of doing what I want to do, so a more elegant solution to the bigger problem is definitely appreciated! However, the specific problem I am encountering is this:
I am processing a form with javascript. The form structure is as follows:
Name (text, also hidden value)
Preference (checkbox): Green, Purple (user can check both)
Time (Dropdown): AM, PM, Midnight
<FORM>
<SECTION>
Jane Doe:
<INPUT type="hidden" name="user[]" id="user[]" value="Jane_Doe" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference[]" id="preference[]" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<SECTION>
John Jacob:
<INPUT type="hidden" name="user[]" id="user[]" value="John_Jacob" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference" id="preference" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<INPUT type="button" Value="SUBMIT" onclick="function(form_script)"/>
</FORM>
Depending on a prior action by the user, a list of names is generated, with Preference and Time needing to be filled in.
The form is then submitted and a mySQL table will be populated according to the user's response using PHP coding.
I am currently at a loss to how to store the form responses with Javascript. As you can see from the coding, each <SECTION> contains the exact same coding structure.
Ideally, I'd like to store each form element within an array, (e.g. user['Jane_Doe', 'John_Jacob']) when the form is submitted, and pass that to the php script. But, I'm not sure how to create these arrays from the form elements, and would appreciate help.
I hope my question is clear.
Alternatively, if there are better ways of processing this form without using javascript arrays, I would definitely be interested in the solution!
assuming the id of your form is "form", to grab all the data from the form you will need to do this (you will need to include jquery to be able to perform this action) :
var form_data = $("#form").serialize();
Related
I've looked through some topics but they either have auto-submit where each checkbox is as a separate parameter in the URL or they need submit button. What I am trying to achieve is:
My current HTML form:
<form name="status" id="status" method="get">
<input type="checkbox" name="status[]" value="0" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="1" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="2" onchange="document.getElementById('status').submit()" />
</form>
With this, I have auto-submit whenever a checkbox is checked, but I have an URL like ...&status%5B%5D=0&status%5B%5D=1
What I need is a comma-separated parameter in the URL like &status=0,1 while keeping the auto-submit option. Also, there are some more parameters in the URL, so this must be appended at the end while keeping the rest parameters.
Is this possible? I'm not familiar with javascript but I think there might be a way ...
I am stuck trying to pass a value from ng-repeat to my AngularJS controller. I don't feel like I know what anything is doing anymore. I keep trying different changes, but with no success.
My goal is to
1) display an array as options in a dropdown box.
2) Let the user select an option then
3) click a button that submits that choice to the Angular function.
I know the Angular function (I didn't include in this example) is working because I can pass a value to it statically and see the updates I expect. The problem is how do I capture the user selection in a variable that I can pass as a parameter to my $scope function named $scope.changeHost(newHost). Here is the AngularJS HTML I am having trouble with:
<form ng-submit="changeHost(newHost)">
<select type="text" class="form-control" ng-model="eveSingle.evePlayers">
<option ng-selected="{{eveSingle.evePlayers}}" value="{{eveSingle.evePlayers}}" ng-repeat="player in eveSingle.evePlayers">{{player}}</option>
</select>
<input class="btn submit-btn" type="submit" value="Change GM" />
</form>
Here is the (now abandoned) modified code that works as I intended:
<form ng-submit="changeHost(eveSingle.eveHost)">
<select type="text" class="form-control" ng-model="eveSingle.eveHost" ng-options="player for player in eveSingle.evePlayers">
<option type="text" value="{{eveSingle.evePlayers}}">{{player}}</option>
</select>
<input class="btn submit-btn" type="submit" value="Change GM" />
</form>
Here is a Final update because of a comment below. Once I changed to ng-options I no longer needed the HTML options in my code. When I removed it this bit still worked fine.
<form ng-submit="changeHost(eveSingle.eveHost)">
<select class="form-control" ng-model="eveSingle.eveHost" ng-options="player for player in eveSingle.evePlayers">
</select>
<input class="btn submit-btn" type="submit" value="Change GM" />
</form>
The user selection is the value of the variable binded to the ng-model. Therefore change ng-model="eveSingle.evePlayers" to ng-model="eveSingle.selectedPlayer" (adapt the name to your needs), and pass the selected player to changeHost:
ng-submit="changeHost(eveSingle.selectedPlayer)"
Notice that you should remove ng-selected="{{eveSingle.evePlayers}}" and type="text" (this applies to input elements).
As a side note, be advised that you can (should) use the ng-options syntax over the ng-repeat-ed options. The first allows you to bind to the model other types than strings, plus it is more efficient as it doesn't create isolated scopes for each option. Would be something like that:
<select class="form-control" ng-model="eveSingle.selectedPlayer"
ng-options="player for player in eveSingle.evePlayers">
</select>
I have a form running a shopping cart style application on my site. To add items, I POST values to a form using a submit button. To remove items, I have to use a GET command.
What I want to do is to limit the selection possibilities - as you select one option, others are removed. For instance, if I have three options: Apples, Oranges, Bananas you are only able to select one.
Apples
Oranges
Bananas
If you select Apples, I want to post the value "Apples" whilst using a GET command to remove "Bananas" and "Oranges".
Currently I am doing this to post the values:
<form method="post">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="id" value="Apples" />
<input type="hidden" name="name" value="Apples" />
<input type="hidden" name="color" value="red" />
<input type="hidden" name="shape" value="round" />
<div id="apples" >
<input type="submit" name="my-add-button" class="add" value=" "/>  Apples
</div>
</fieldset>
</form>
And to remove the items I do this:
remove Bananas and Oranges
Is there a way to do both at the same time? I have tried doing an onclick event like this:
<div id="Apples" >
<input type="submit" name="my-add-button" class="add" value=" " onclick="location.href='index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges';" />  Apples
</div>
and I have also tried to use an action at the start of the form
But neither of these work - they will still submit the new item, but will not remove the item. Any idea of a good way to do both together?
Technically, yes, but it's a hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
If the form is set to POST, then any <input> and <textarea> within the form will go as POST data, but any query strings you place into the action's url will show up at the server as GET data:
$_GET['x'] -> 'y'
$_POST['a'] => 'b'
$_POST['x'] => undefined index
But note that clicking a link that's inside a <form> does NOT submit the form. it's like clicking any other link and will just go to the new address.
You can use $_REQUEST. As per the php documentation, quoted as follows:
An associative array that by default contains the contents of $_GET, $_POST and $_COOKIE
As above, you can then use the following hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
EDIT: If both of the GET and POST requests work individually, it is possible that your PHP is where the problem lies - You haven't posted it, so I can't see where the issue could be. You could just put together some javascript to fire the remove request then fire the add request when clicked:
jQuery("input[name|='my-add-button']").click(function() {
var addform = jQuery(this);
event.preventDefault();
$.get("index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges", function(data) {
addform.submit();
});
});
I have been stressing about this for a few hours and I cannot get it working. I have no experience in javascript and have been searching around in the forum and other sites, but I can't seem to get a solution that works.
I am trying to fill in the form using a webView in xCode
The website http://www.eatwellguide.org/mobile/ is where the form is located.
The website has this forum
<form name="data[Search][form]" METHOD="post" ACTION="/search/advanced/find" ID="frmAS" >
<ul>
<li><input type="hidden" name="device" id="device" value="mobile" title="mobile">
<input type="hidden" name="iframe" id="iframe" value="11" title="mobile" > Keyword: </li>
<li><input type="text" name="data[Search][keyword]" id="SearchKeyword" title="search by keywords" />
<input ID="SearchSubmit" class="BTNsend" type="submit" value="Find" name="data[Search][submit]"/></li>
<li>Zip / Postal Code:</li>
<li><input type="text" title="Zip search" value="" name="data[Search][zip_code]" /> <input ID="SearchSubmit" class="BTNsend" type="submit" value="Find" name="data[Search][submit]"/> </li>
<li><select name="data[Search][distance]" style="font-size:120%; ">
<option value="1">1</option>
<option value="5" selected="">5</option>
<option value="10">10</option>
<optionvalue="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select> <input type="radio" ID="SearchDistanceUnit" value="Mi" checked="" name="data[Search][distance_unit]" class="BTNradio"/> Mi
I am trying to modify the textbox that i has the title = "zip search" and submit the form, but my code doesn't work at all. It won't even fill in the textbox
NSString* javaScriptString = #"document.getElementById('data[Search][zip_code]').elements.value='22911';";
[self.webView stringByEvaluatingJavaScriptFromString: javaScriptString];
It just does nothing. I have also tried GetElementsByName and many other variations of the two.
Browsers support the input of JavaScript directly into the URL bar. So if you load the page you link to, then enter the following URL:
javascript:alert(document.getElementsByName('data[Search][zip_code]'))
You'll get an alert message showing what was found. In that case I've taken your getElementByName and corrected it — elements should be plural and it returns an array.
Building up:
javascript:alert(document.getElementsByName('data[Search][zip_code]')[0])
Evaluates to show an input element. Then:
javascript:alert(document.getElementsByName('data[Search][zip_code]')[0].value)
Shows the current value, and:
javascript:document.getElementsByName('data[Search][zip_code]')[0].value = '22911'
Populates the box. So that's the string you want (minus the javascript:).
If you'd taken a syntactic wrong turn, at least in Mobile Safari, your statement would be ignored. If you'd ended up trying to fetch something that isn't there you'd have received a NULL message in an alert.
I am working through an assignment and I have run into a problem that is weird to me and that I have no idea how to solve.
It is hard to explain but hopefully I'll be able to explain it well enough for someone to understand.
I am working with HTML forms (radio buttons, check boxes, select boxes, text boxes) and my teacher gave us tasks to do with the HTML in javascript.
I have been getting through the tasks but after a certain point, when I try to declare an object and pull some HTML from the forms, it says it is "null". However, if I put it at the top of the page it will work but then it cancels out anything under it. (i know this sounds confusing but maybe seeing some code might help..)
<html>
<body>
<script language="javascript">
<!--
function fred ()
{
option1=document.f1.zooanimal.option1
if(document.f1.game1.checked||document.f1.game2.checked||document.f1.game3.checked||document.f1.game4.checked)
{
return true
}
else
{
alert("Must Select at least ONE Checkbox Value!!!")
}
if (document.f1.zooanimal.selectedIndex=option1);
{
alert("Must Select Option other than default value!");
}
bigtextstr=document.f1.bigtext.value
bigedit=bigtextstr.replace(/ /g,"+")
bigedit2=bigedit.replace(/[\r\n]/g , "")
document.write("Characters in Text Area Before Edits="+"<br>")
biglen=bigtextstr.length
document.write(biglen+"<br>")
document.write("Characters in Text Area After Edits="+"<br>")
newbiglen=bigedit2.length
document.write(newbiglen+"<br>")
}
-->
</script>
<p>
<form name="f1">
<br>
Name <input type="text" name="nametext" size="30" value="First Last"><p>
List your favorite things to do <P><textarea name="bigtext" rows="5" cols="40">default value</textarea>
<p>What is your favorite animal to see at the zoo?
<select name="zooanimal">
<option name= "option1" selected="yes">default value
<option name="option2">elephants
<option name="option3">giraffes
<option name="option4">tigers
<option name="option5">seals
</select>
<p>
What is your favorite color?<br><p>
blue <input name="rb" type="radio" value="blue" checked> green <input name="rb" type="radio" value="green">
pink <input name="rb" type="radio" value="pink"> yellow <input name="rb" type="radio" value="yellow"> red <input name="rb" type="radio" value="red"> black <input name="rb" type="radio" value="black"></p>
Which of these games do you play?<br><p>
Starcraft <input name="game1" value="Starcraft" type="checkbox"> World of Warcraft <input name="game2" value="WorldofWarcraft" type="checkbox">
League of Legends <input name="game3" value="LeagueofLegends" type="checkbox"> none <input name="game4" value="none"
type="checkbox"><P>
<p><input type="button" value="EDIT AND REPORT" onClick="fred()">
<p>
<p>
</form>
</body>
</html>
Now looking at the script part, everything works up until that point but if i try to add any other form referencing after that, it says its null. I am very confused and have been working on this for several, several hours. Can someone please help?
When referencing [singular] objects, you should be fetching them using getElementById('elementid') or getElementsByName('elementname')[0], not attempting to delve through parent 'nodes' through to the desired element.
Also place the JavaScript either in the head of the document or at the bottom of the body. These are the best places for scripts that shouldn't run onload ;)
Additionally, be aware 'document.write' will write over the entire document. You should place a <p> in your page, give it a unique id...
<p id="unique_id_alerts"></p>
And write into it like so:
document.getElementById('unique_id_alerts').innerHTML = 'Output goes here.';
or if you want to get data from HTML element
you can use
jQuery("#ElementId").text();