Replace specific text with search input - javascript

I am using an API to view customer database and added a search button. The parameter and value that works when I test it is:
filters:[{"field":"keyword_search","operator":"is","value":"Michael"}]
my complete URL looks like this: https://www.mydomain.com/v1/objects/object_14/records/5648623548321?filters=%5B%7B%22field%22%3A%22keyword_search%22%2C%22operator%22%3A%22is%22%2C%22value%22%3A%22Michael%22%7D%5D
My goal is that when someone enters something in the search box and presses enter, the text they entered should simply replace the part that says: "Michael".
Is this possible with Javascript? Or is there a better way to do this? Essentially, the API does not supply me with a method of doing a search, instead I have to filter. But the filter requires the URL to have everything from [{"field....
Unless I'm mistaken, most paramaters are simply. ParameterName and Value. This one here is ParamaterName and value with other parameters.
Any help will be greatly appreciated

Basically you are adding multiple searches, so you could provide multiple inputs and at then end concat all of them.
<input type="text" name="filter[]" value="one" />
<input type="text" name="filter[]" value="two" />
<input type="text" name="filter[]" value="three" />
Then on submit you can turn those into your query string (JSFiddle)
var filters = Array.prototype.slice.call(document.querySelectorAll('input[name="filter[]"]'));
filters = filters.map(function (filter) {
return {"field":"keyword_search","operator":"is","value":filter.value};
});
console.log('filters=' + encodeURIComponent(JSON.stringify(filters)));
Your question is kind of confusing because its not a simple search API its a filter API.

Related

How to Submit a Javascript Value in an Input Field

Simply, how can I do this?
<input type="hidden" value="some javascript value" />
I have a form whereby when a user clicks on Add More, more input fields are added via javascript.
I'm also using javascript-declared values to track and limit the number of fields a user can add.
I need a way for my php code to retrieve these javascript values.
Use append
$('#hidden').val('my Text');
input field should be
<input type="hidden" id="hidden"/>
the question is a bit vague, but i will give it a go
try adding a name as an array and then you can use get or post
<input name="myjavascriptinputs[]" type="hidden" value="some javascript value" />
in your php you will be able to use
foreach($_GET['myjavascriptinputs'] as $ajavascriptinput)
From the button you must be calling a javascript to add these fields dynamically. Simply append the code to that function to hand over these values to the field.
<input id="myinputfield[]" type="hidden" value="" />
<script>
function addOneMore(){
var newField = // code to add one more field
newField.value = newValue;
}
</script>
Will solve your purpose.

How to append additional sets of fields to html form

Example: let's say we have a form with 3 fields: pc, part_id, part_details. Sometimes you will want to add additional parts to database when adding pc, so part_id and part_details should be duplicated(part_id and part_details should be corresponding). What I want is the best way to append this two fields to the form?
I know if you just want to duplicate one field you can name the field like this:
<input type="text" name="part_id[]">
Then we can easily get the post data as array. But now we are duplicating more than one field, if we use the approach above at the post end the two/multiple arrays will not be relevant. The approach described here seems to be a good one http://www.quirksmode.org/dom/domform.html, but the fact that names are changing all the time makes it complicated to use the post data as well.
There is another possible approach described here Multiple Forms With Input Fields With The Same Name Attribute? Good Or Bad? . It gives an idea to duplicate the entire form. I am not sure if I understand it correctly, but when I try putting two identical forms in the same page and submit one of them, only data from this form will be submitted, the other one will be ignored. Also it is not suitable for my scenario as not all the fields should be duplicated.
So what is the best way to accomplish this duplicating job?
In the link you gave, they didn't duplicate the form, just the elements inside the form which is fine. If all you are adding is multiple parts to a single PC then there shouldn't be a problem. The parts will be linked via array indices (you can rely on the ordering).
The first instance of part_id[] will correspond to the first instance of part_details[]. This should be distinguishable in your server-side language. In PHP for instance, part_details[2] will correspond to part_id[2] etc.
You can use another level of indexing:
<input type="text" name="pc" />
<!-- First part -->
<input type="text" name="parts[0][part_id]" />
<input type="text" name="parts[0][part_details]" />
<!-- Duplicate part -->
<input type="text" name="parts[1][part_id]" />
<input type="text" name="parts[1][part_details]" />
<!-- Another duplicate part -->
<input type="text" name="parts[2][part_id]" />
<input type="text" name="parts[2][part_details]" />
The fields for each part (id and details) can be easily generated using jQuery.

Submitting multiple values for one input field

What I'm trying to do:
I'm trying to build a very simple visual layout builder.
The idea is that, the user selects a block, and it has some settings in it, those setting values are stored in the hidden input, and when the user saves the page, i store those values in the database.
Basic block is ok:
For example, user selects a 'text' block, it is added like this:
<div>
<input type="hidden" value="text" name="item_name[]">
<input type="hidden" value="" name="item_title[]">
<input type="hidden" value="sdsd" name="item_text[]">
</div>
Problem:
However, some of the blocks have more than one values for each field. For example, 'gallery' block, which has multiple image urls, image titles etc. I'm facing problem in finding a suitable way to put together the multiple values and submit.
Right now I'm adding them to a string with jQuery, separated with __. I can store the data and separate it, but the problem is that if I want to remove any image from it, it is very difficult because I have just added them in the string, so its hard to find it and remove it.
<div>
text item
<input type="hidden" value="gallery" name="item_name[]">
<input type="hidden" value="__http://img1.jpg__http://img2.jpg" name="img_path[]">
<input type="hidden" value="__img1__img2" name="img_title[]">
<input type="hidden" value="" name="img_desc[]"></input>
</div>
Question:
What would be the suitable way to send multiple values for the above block example, keeping in the mind that there will be multiple blocks having multiple input values?
Thanks.
Build a Javascript Array with all values.
Convert the array to JSON
Submit JSON as the value of the hidden field
On server side, use PHP json_decode function to convert JSON to PHP object or array

How to Generate a List of all Input name="" fields in a form with Javascript/JQuery

I'm sure there's a simple answer to this, but I'm a novice teaching myself Javascript and JQuery and I just don't know enough to figure it out myself. Any help you can provide is greatly appreciated.
I'm building a form that generates HTML emails for my company based on hundreds of different inputs entered by the form user. Rather than copying and pasting each and every input name into a $_POST line in the form's action script to retrieve the input's data, I'm wondering if there's a way to use Javascript/JQuery to generate a list of the name="" fields from each input on the form to make this easier?
For example, from the following slice of the code, how can I automatically generate a list that contains the name values "bottlespecial6image", "bottlespecial6imagewidth", "bottlespecial6imageheight", "bottlespecial6imagelink", and "bottlespecial6includeprice" (with the idea that my form has hundreds (if not thousands) of inputs, so copying/pasting seems inefficient):
<input type="text" name="bottlespecial6image" value=""/>
<input type="text" name="bottlespecial6imagewidth" value=""/>
<input type="text" name="bottlespecial6imageheight" value=""/>
<input type="text" name="bottlespecial6imagelink" value=""/>
<input type="radio" name="bottlespecial6includeprice" value="yes" checked="checked" />
<input type="radio" name="bottlespecial6includeprice" value="no" checked="checked" />
I apologize if this has already been covered here -- I searched around here for similar questions, but couldn't find anything.
To create a serialized array to submit, you'd use jQuery's serialize()
$('form').serialize();
to just get the names in an array, you can map them:
var inputs = $('form').find('input[name]'); //all inputs with a name in the form
var names = $.map(inputs, function(el) { return el.name });
FIDDLE
$("[name='yourrequiredname']")
will give you list of all elements by same name

Input from user without the <input> tag

i need to get an input from user, for instance his name, but the user won't be able to edit his name, like in a text box. This is what i'm using right now:
<input id="number_input" type="text" size="12" maxlength="19" />
In order to write or edit his name the user will use already existing buttons. Just like in a calculator. How can i achieve this in html??
Thanks.
I would probably consider using this: http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/
DEMO HERE

Categories

Resources