We Keep Coding

Filling information when changing dropdown in Laravel

I do a query on a table and obtain 25-30 results.
$items = item::all();
And then give it to the blade:
return view("myview",compact'items');
I display those results on my blade like this:
#foreach($items as $item)
<select onchange="changeTextInputs()">
<option value="{{item->id}}">{{$item->name}}<input type="hidden" value={{item->color}}>
<input type="hidden" value={{item->shape}}>
<input type="hidden" value={{item->color}}>
...
</option>
#endforeach
<input type ="text" value="" id="item_color">
<input type ="text" value="" id="item_shape">
...
When changing the select, my javascript fills the inputs with the information of each item - as intended. Everything works just fine.
I honestly don't like to put the hidden inputs in the selects. Anyone knows other way to do this on Laravel?

AngularJS: disable button when input fields are empty

I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including this one and this one but none of these are working for me. Below is my code. Thanks
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" />
To Date:
<input type="text" id="dateTo" ng-model="data.date2" />
<button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1 && !!data.date2)">Submit </button>
</form>
I also tried this method below:
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required />
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button>
</form>
So initially when the page loads and all fields are empty by default, the Submit button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks

Your second method works for me (utilizing myForm.$invalid) if I add required to the dropdown element. I've created a plunkr you can play with here.
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" required>
<option>red</option>
<option>blue</option>
<option>green</option>
</select><br/>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/><br/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required /><br/>
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button>
</form>
Note: I used Angular 1.4 in the plunkr as you did not specify which version of Angular you are working with.
Edit: OP stated that issue was created by using JQuery's datepicker. May I suggest using angular-ui boostrap datepicker? Plunker example - Angular-UI Bootstrap docs

Why dont you use ng-disabled="myForm.myName.$pristine" because pristine will check for each variable inserted in textboxes
please check small example here..
ng pristine example

AJAX form elements processing

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();

IOS 7 remember this card callback

I am having this problem where we have a payment page that we only allow you to submit once.
And on iOS if you enter a credit card it will ask you if you would like to save it (Safari feature not ours). However this is called after our javascript validation assigns the boolean to disallow resubmition.
The Safari popup stops page propagation and nothing happens.
I was wondering if there was a way to use a callback or hook into when the user submits this value and continue with form submission.
Note: I have already tried autocomplete="off" on the form and the input to have this popup not appear. Which does not work.
Edit: I discovered that the reason the form does not submit after clicking not now is because we make use of Recaptcha (which is hidden behind the popup in the picture).

Surprisingly I had a difficult time getting the AutoFill dialog to pop up. It seems that Safari needs some type of clue that you're submitting credit card info. If you want the dialog to just go away and you control the name of the form elements, then name the elements to something unrelated to a credit card:
This prompts autofill:
<form action="test" method="post" id="credit">
Name:<input type="text" name="cardholder" />
<br/>
Credit Card Type:
<select name="cardtype" >
<option></option>
<option value="amex">amex</option>
<option value="visa">visa</option>
<option value="mastercard">mastercard</option>
</select>
<br/>
Credit Card:<input type="text" name="cardnumber" />
<br/>
Expiration:<input type="text" name="expirationdate" />
<br/>
<input type="submit">
</form>
This does not prompt:
<form action="test" method="post" id="credit" autocomplete="off" >
Name:<input type="text" name="h" autocomplete="off" />
<br/>
Credit Card Type:
<select name="t" autocomplete="off" >
<option></option>
<option value="amex">amex</option>
<option value="visa">visa</option>
<option value="mastercard">mastercard</option>
</select>
<br/>
Credit Card:<input type="text" name="n" autocomplete="off" />
<br/>
Expiration:<input type="text" name="d" autocomplete="off" />
<br/>
<input type="submit">
</form>

This is a variant on Sam Nunnally's answer.
I was in a situation where I was working with a Python package and couldn't edit the name of the credit card, so I had to rename fields on the fly with jQuery. This may or may not work for others depending on how they need to use the submitted form data.
Here's most of the relevant code that worked for me with some comments. I needed to rename the field and detach the label from the input (when there was a label for the input that said "Credit Card", iOS sniffed it out), and I threw in autocomplete="off" for good measure.
var iOSCheck = false;
var cardField = $("#id_card_number");
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { // This could be more elegant; should sniff iOS 7.x specifically
iOSCheck = true;
}
if (iOSCheck == true) {
$("#id_card_number").attr('id','workaround-one'); // Rename ID. Nondescript name.
$('#workaround-one').attr('autocomplete','off'); // Turn off autocomplete (not sure if necessary)
$("#w1-label").after('<div class="simulate-label">Credit Card</div>'); // Kill the label. Append the text,
$("#w1-label").remove(); // Then remove the label. That way the text in the label doesn't link to the CC field.
cardField = $('#workaround-one'); // Redefine our credit card field so we can reference it later in the script.
}

Help with Javascript program I am Working on

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();