Combine arrays with inputs. Key->value binding - javascript

I have a div with input fields.
<div class="tabs">
<div class="ru">
<input type="text" name="my_vals_ru[]">
<input type="text" name="my_keys_ru[]">
</div>
<div class="en">
<input type="text" name="my_vals_en[]">
<input type="text" name="my_keys_en[]">
</div>
<div class="de">
<input type="text" name="my_vals_ge[]">
<input type="text" name="my_keys_ge[]">
</div>
</div>
Also, I have a MySQL table, where I store some custom user data in 3 languages (English, German, Russian).
id
product_id
key_en
val_en
key_ge
val_ge
key_ru
val_ru
With javascript, I can create a lot of such constructions with inputs and send it to process by POST method.
Now the question: how can I find out, where the right key->value pair? If it's only one .tabs construction, there's no problem. But what if there are 5 or more?
Are there some methods in PHP or Laravel to manage it?

Related

How Can I compare two different $index in the same html input element?

I am using ng-repeat for printing the HTML input element. I want to check that when I add new HTML input element it should not contain the same value as compared with the previous one.
This is my code.
<div class="row" ng-repeat="m in machines">
<div id="machinename_{{$index}}">
<input id="machinenameInput_{{$index}}" type="text" class="form-control" maxlength="20" ng-model="m.alias" required>
</div>
</div>
In the above code when i add new machine name it should not contain the same name.Thank you in advance
use ng-if to display the machine only if the previous machine has a different value
<div class="row" ng-repeat="m in machines">
<div ng-if="machines[$index-1] != machines[$index]" id="machinename_{{$index}}">
<input id="machinenameInput_{{$index}}" type="text" class="form-control" maxlength="20" ng-model="m.alias" required>
</div>
</div>

How to clone form fields without their values?

How to clone following html without persisting the field values?
<form method=POST action="/url">
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[1][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[1][body]" placeholder="Possible answer">
</div>
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[2][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[2][body]" placeholder="Possible answer">
</div>
. . .
<button type="submit">Submit</button>
</form>
I can see only 3 possible choices here. However, all of them come with major flaws:
.clone() the .form-field normally and reset the field values.
Problem: resetting all the values one by one is cumbersome and is not a future-proof solution. For example, if more fields are added into the .form-group, their values will need to be cleared separately.
Include a hidden .form-group as a template on the page.
Problem: as you see, the input fields contain enumerated names like: answer[1][body]. It is convenient to clone the last .form-group and just increment the value by 1. Cloning the templated .form-group will be lacking this flexibility.
Read the fields as raw html and transform them into JQuery object
Problem: this seems to be a clear solution to me, however I couldn't get it working. The code $.parseHTML($('.form-group').html()) does not return a valid JQuery object, which I need to use .find() and other methods on.
What will be an effective and elegant solution to this problem?
Try this code:
$("button").click(function(){
var t = $("form").clone().appendTo("#clonedForm");
$(t).find("input[type=checkbox],input[type=text], textarea").removeAttr("checked").val('');
});

Parsley.js - Understanding and erroring on groups

I think I've misunderstood the use of groups in Parsley.js. What I had assumed is that groups could be used to not show an error on an individual input but on a group.
For instance, I have three sort code fields for a bank details form.. they're all required, but I don't want each one individually to get an error message (as they're inline), if any of them error, I want the group to get the error message and error class.
Is this possible without writing custom javascript to parse the form data manually?
You can't do that with data-parsley-group. Groups were created in order to validate a multi-step form. That is norrmally a large form that you split into steps (groups) and validate them one at a time.
What you can use, without adding custom javascript, is data-parsley-errors-container.
You should apply this attribute on every field where you want to group the error messages. You should use something like this:
data-parsley-errors-container="#element"
Where element is the id of the element where the messages will be displayed.
Here is an example on how you should create your form (jsfiddle available):
<form class="form-inline" role="form" id="myForm">
<div class="form-group col-xs-12">
<input type="text" class="form-control col-xs-3" id="field1" required
placeholder="Field 1" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field2" required
placeholder="Field 2" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field3" required
placeholder="Field 3" data-parsley-errors-container="#listFieldError" />
</div>
<div class="form-group">
<div id="listFieldError"></div>
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>

How can I generate the POST array as a clientside / JavaScript object before sending to server?

I have a mixed form of text inputs and textareas. I'm curious if I can do some local parsing before sending it to the server. Is there an efficient way to accomplish this?
Example form:
<form>
<div class="levelone">
<input type="text" name="input-one">
<input type="text" name="input-two">
<input type="text" name="input-three">
</div>
<div class="levelone">
<div class="leveltwo">
<input type="text" name="input-arr[]">
<input type="text" name="input-arr[]">
<input type="text" name="input-arr[]">
</div>
</div>
<div class="levelone">
<textarea name="input-textarea">Submit</textarea>
</div>
<div class="levelone">
<button type="button">Submit</button>
</div>
</form>
Is there an efficient way to get all of these inputs and textareas into a single javascript object without building it one at a time? I'm looking for something roughly the same order and structure as what is returned server side in a POST array.
The structure sent to the server is a string containing the data serialized using the application/x-www-form-urlencoded data format. Converting a form into that format is what the serialize method does.
var string_www_form_urlencoded = jQuery('form').serialize();

Form submit fails to generate query parameters if input element's are in multple div's

If I have a form element as given below, then calling the form's submit will automatically generate the request body/query parameters in the url-encoded form as "username={username}&password={password}&submit=submit" where values in {} are taken from the corresponding input element's text boxes.
<form action="/action.php" method="POST">
<input id="username" type="text" />
<input id="password" type="password" />
<input type="submit" id="submit" value="submit" />
</form>
But if I am going to place my input elements in multiple levels of div's, then the form submit will fail to generate the request body/query parameters.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" id="submit" value="submit" />
</div>
</div>
</form>
Can anyone tell me the reason why it is like that? The specification doesn't mention that the input elements should be immediate children of Form element. I was wondering a proper reason for this behavior.
The values will be populated to the elements and you can check the values also if you edit the changes as given below
<script type="text/javascript">
function logincheck() {
alert ('hi ' + document.getElementById('username').value);
alert ('hi ' + document.getElementById('password').value);
}
</script>
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
A bit more detail:
I am assuming you are using PHP for the rest of this, you can substitute any other server side language.
You are missing the name attribute on your inputs. Unless you are actually using the id attributes for something you can get rid of them. Form data is listed by the name attribute - for instance the PHP $_GET, $_POST, and $_REQUEST arrays which will be keyed by names of your inputs. No name and the data is ignored.
You can also create an array of inputs by using a pair of brackets after matching names.
Example:
<input name="answers[]" type="text" id="answer1" />
<input name="answers[]" type="text" id="answer2" />
This will create one GET/POST entry that is an array. It will have the key answers with two elements inside the array.
For checkboxes, you will only get a value in the GET/POST when they are checked. You will not get a result if it isn't checked. Important to know. If someone, for instance, turns something "off" you will need to know the list of original inputs to compare against.
The first thing I notice is that your inputs are missing the "name" attribute. It's not required by the HTML spec afaik, but I think this is why the values are not sent with the request.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" name="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" name="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
This should do the trick
The input elements don't have to be directly inside the form element! they can be inside divs tables etc... How about trying to use names along with the ids in the text fields, like the following:
<input type="text" id="username" name="username" />
note the name="username" in the previous example -
to all input elements.

Categories