We Keep Coding

Is there any way to edit a URL to embed a form entry?

I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">

I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.

There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.

Target a specific DIV with jQuery to replace HTML

I have a WordPress Loop rendering Forms with which you can edit Posts (so instead of Posts, I return the Forms, one form each post)
That Loop is rendered on a WordPress default Page.
The Rendered Forms are all wrapped in a Div "div id="mydiv""
Those Div's increase their unique ID "mydiv", once per Form rendered, means, first Form has ID "mydiv", second Form in loop has ID "mydiv2" etc.
But that does not really matter in my question here.
I use this below jQuery to submit the Form(s) and after the form is submitted, I would like to replace the form(s) with the Post which has been edited.
This is the code:
jQuery(document).ready(function() {
jQuery("[id^=cred_form_1614]").ajaxForm(function(data) {
if (data.length > 0) {
jQuery('.page').empty();
jQuery('.page').html(data);
}
});
});
The issue is, targeting "page", I replace all forms with a single post.
If I target "mydiv" (no matter which one), the form(s) keep(s) displaying, it's not replaced with the edited post.
So, question:
How can I use above code to target the specific DIV's (mydiv, mydiv2, mydiv3, etc)?
I want that the form wrapped in "mydiv" is replaced by the post which this form edits.
Form in "mydiv2" must be kept displaying, as long I don't submit it.
Then, if submitted, also "mydiv2" must be replaced with the Post this form edits.
And so on.
It works great as long I replace the entire page. That means, the code is basically working.
But, I need to target specific DIV's.
Is this possible?
where is ma (t)error?
I tried with this:
jQuery(document).ready(function() {
jQuery("[id^=cred_form_1614]").ajaxForm(function(data) {
if (data.length > 0) {
jQuery('.mydiv').empty();
jQuery('.mydiv').html(data);
}
});
});
And made sure, the first form in loop is wrapped in "mydiv".
I also tried to restrict my loop to one rendered Form, but as long I target a specific DIV in my jQuery (not .page) then the code breaks
No successful results!
It just keeps displaying the Form(s)
Any help appreciated!!

Not sure if I understand you correctly.
If you want to target an element by id you use the following syntax: $('#id').

Two ways to process jQuery submitted form

I have a form with button A and button B. It's sent by a jQuery function called clicking on one of the buttons. At the end of this long function which is checking prerequisites, the form is sent using this line:
$('#wlform').submit();
I want to adjust this code to send something to be able to distinguish which button was pressed. Something in JavaScript similar to <input type="submit" name="submitbutton1"/>

Provide us with some code?
I think you're talking about two buttons that both should have their own ID's. You could try and catch the ID attributes after you click them;
$(this).attr('id');
Or change 'id' into 'name' if you want to get that value.

I suppose you use a javascrit click event to execute your javascript functions.
In javascript, you can add a hidden input to your form :
$(...).click(function() {
... // Your code
var clicked_button = $(this);
$('#wlform').append($('<input type="hidden" name="clicked-button"/>').val(clicked_button.attr('id'));
$('#wlform').submit();
});
With that, the id of the clicked_button will be sent with the form.

Just give to the hidden input the value of the button id attribute. You could do something similar to this (before the submit statement):
$('input[type=hidden]').val($(this).attr('id'));
Where $(this) is the button clicked.

None of the answers worked, so I've put something together from these on my own. I've added a hidden input field, clicked-button as you suggested. Then when calling my precheck_submit function, I pass another parameter (c) for storing which has been clicked. In the precheck_submit function I added $('#clicked-button').val(c);. It works. Anyways, thanks for your efforts.

How to reset specific form element in a search form?

I have a search form that has different elements in it, checkboxes, selects, text fields etc. Each change is accompanied by an ajax call that gets the number of results as a sort of counter. I would like to reset only the previous element that caused the counter to return a value of 0.
I was thinking about keeping track of each change in a variable, and each time the counter evaluates to 0, I would then reset the element that caused the change. I however fear that this could force me to handle all the different elements differently with a lot of code and jumping around.
Is there a possible more elegant solution to the problem that anybody can think of? I would appreciate the help.

I cannot comment your question, but : if I understand correcty, there is a big form, and each change on any element, triggers an ajax call, that returns a resultset.
If this resultset size is zero, then, you want the form to reset to previous value.
That would mean, that only the last-changed value has to be tracked down, and reset ?
In this case, your onchange event callback should use this value to get current form element value, and ID. Then, as the resultset comes back, set back the stored value to that element if there are no rows.
Otherwise, if the form is managed globally, you could always store it with a .clone() call, then .remove() it and .insert() the clone back if the resultset is empty.
PS : i know this solution not really elegant :)

Your AJAX module could return a JSON-Encoded string with the data causing this event to occur (PHP-Function: JSON_encode) and from there on, you can cycle through the erroneous values resetting them and displaying further informations. i.e. "Your E-Mail seems to be invalid".
PHP: See JSON_encode
JavaScript: See getElementsByTagName('input') (or textarea or select)
Note: In case of a select item, you may rather want to change the Attribute "selectedIndex" than "value".

I solved the problem by recording each change to the form with
$("#form_id").on("change", function(event) {
//Event bubbling
type = $(event.target).get(0).type;
selector = $(event.target);
}
Then using the Strategy design pattern (Javascript Strategy Design Pattern), I reset each possible field type accordingly. Example for text field,
var Fields = {
"text": {
resetAction: function(fieldSelector) {
fieldSelector.val('');
}
}
};
//To call the reset action for the type of field,
Fields[type].resetAction(selector);
I had to trigger a change event for hidden fields to have their changes also bubble.

jQuery: how to pick unique IDs?

New to whole this jQuery (and javascript altogether, heh) and so far it's been excellent, but now I'm in a small pickle.
Let's say I have list of forms generated from SQL database and every single one of them has to have unique id, so how I can select the specific item that is to be manipulated (changing values via php).
the $("#submit").click(function()) will trigger every submit buttons on the page, so how I can the #submit to be some random id that I clicked. There might be a smarter way, but I'm new to this so try to bear with me.
thought of passing the unique value with onClick="myfunction(unique_id)", but don't know how it goes with jQuery.
hope this made any sense

$("#submit") won't intercept every submit button click, but only the element with id="submit".
If you want to get the form's id attribute you can use a snippet like this:
$("form").submit(function () {
var selectedFormID = $(this).attr('id');
});

I might not be understanding the question correctly but if each of the submit buttons has a unique id, e.g. <button id="submit_02">Submit</button> then the jQuery would be $("#submit_02").click(function() {}).