Javascript glitch breaking a POST function for select input - javascript

thanks for taking a moment to look at my question.
I have a requirement to create a data collection method that is done in three phases. Final data is to be stored in a MySQL database.
1st - Personal details (this part is easy and has been completed)
2nd - Expense details (this part is the part that is my headache)
3rd - Receipt scan upload (this part is also relatively easy and has been completed also).
Technologies in use - html, php5, javascript, mysql, running on a standard LAMP stack.
Personal limitation - me. Not very fluent in php and have not used it in a few years.
1st screen works perfectly.
3rd screen works perfectly but requires completion to email the user upon finalisation of completing the process. Not a problem as I have done this before.
2nd screen has two tables, each with a small variety of input fields. The first of these tables is using JavaScript to clone table rows so that the user can propagate as many of these rows as they need. Each row is comprised of the following fields:
<input class="mus3" type="text" name="reg_travel_date1" id="reg_travel_date1" maxlength="20"><br><input type="button" name="button2" id="button2" value="+1 row" class="button" style="width: 80px; margin-top: 18px;">
<textarea class="mus1" name="reg_travel_from1" id="reg_travel_from1" cols="10" rows="5"></textarea>
<textarea class="mus2" name="reg_travel_to1" id="reg_travel_to1" cols="10" rows="5"></textarea>
<input class="mus4" type="text" name="reg_kms_travelled1" id="reg_kms_travelled1" maxlength="10" onkeydown="validateNumber(event);">
<select class="select" style="width: 120px;" name="exp_type_car_travel1">
<option selected>Type...</option>
<option value="Seminar">Seminar</option>
<option value="Rural Travel">Rural Travel</option>
<option value="Conference">Conference</option>
<option value="Exam">Exam</option>
<option value="Other">Other</option>
</select>
<input type="text" name="reg_claimable_kms1" id="reg_claimable_kms1" maxlength="10" class="mus5" onkeydown="validateNumber(event);">
To see further detail, I have posted ALL of the code used at the following links (there is not enough space in here).
I have had to double up on my linked code as I am only permitted to post two links, it appears.
index.php FOLLOWED BY C.claim2.php : http://pastebin.com/wufh4Q47
css_file.css FOLLOWED BY C.claim.php (complete and working) : http://pastebin.com/iGnEsTC3
The jquery.min.js file is version jQuery v2.0.3
I've pasted the code for the first screen which is working fine, as an indication of the hoped for behaviour of the second screen.
PROBLEM:
I am trying to make it so that the select field in the JS clone function will increment it's name/id like the text and textbox fields do (or did before this particular version, for some reason). It has always cloned itself with the exact same name as the starting row which has caused serious problems in the resulting post function.
Also, for some reason that may or may not be related, the select field always posts a blank value, regardless of how many cloned rows there are. I do not know why, nor how to fix this.
Can anyone help? I am not skilled in JS at all, the JS used on this project was written for me by a friend who is also wondering why it's not quite working as desired.
Thank you. :)

Ok, ignore this question now - the situation has been resolved fully and is working perfectly. It appears there is a bug in JQuery that has been chosen as to be "not to be fixed" as the overheads to do so are too high. This problem results in the choices to be blank, their 'name="something"' values being dropped. We have a work around now and the function now performs perfectly, thanks to my friend. Much appreciation Crystal!

Related

[Javascript]Fill a textbox without ID and a name that changes on page reload using a bookmark

So I am trying to make a bookmark in chrome that would input a Javascript code that would fill up a textbox on my router home page. The goal is saving me the hassle of either remembering that silly password or having to open my textfile containing the said password.
I know, I know, ... I am lazy. (but not for learning some Javascript in the process)
The thing is the textbox doesn't have an ID and its name changes on reload so I cannot know its name in advance.
I have looked at a few pages on here that kind of guide me in the right direction but I can not make it work for the life of me as I have little to no experience in Javascript.
Here is what the html of the textbox looks like :
<input type="PASSWORD" style="WIDTH: 150px" name="password_random10digitnumber" value="" size="20" maxlength="64">
Here is what I ended up with as a link on my bookmark (the only thing I tried that doesn't give me an error).
javascript:document.getElementsByTagName("input")[0].value='myrouterpwd'
Currently, when I press my bookmark, it refreshes the page and shows a blank page with "myrouterpwd" on it.
(There is two other input html blocks on the page which are :
<input type="HIDDEN" name="md5_pass" value="">
<input type="HIDDEN" name="auth_key" value="numbersIamnotsureIshouldshowtheworld">
)
Thank you to anybody taking the time to answer!
I haven't worked much with bookmarks and am assuming that because it's a bookmark, you are navigating away from the page that you actually want to work with. So, I'm not sure that triggering this that way is a viable solution. Of course, you could just take advantage of the browser's ability to store passwords for you. ;)
But, to the main point of your question... Assuming that it's the only password field on the page, the use of element.querySelector() will find it:
// Get a reference to the right element based on its type attribute value
let passwordBox = document.querySelector("input[type='password']");
passwordBox.value = "MySecretPassword"; // Populate the field
console.log(passwordBox.value); // Confirmation
[type='password'] { background:yellow; } /* Just so you know which box is the password box */
<input type="hidden" name="doesntMatter">
<input name="someTextBox">
<input type="password" name="doesntMatter2">
<input name="someOtherTextbox">

Excel VBA - Manipulate Javascript

I have researched stackoverflow and other sources for many weeks for an answer to this question but have not been able to uncover an answer. I appreciate that there may be other posts that indirectly deal with the topic, but nothing seems to address the requirements of the specific example I have in mind, so I'm taking the plunge and posting. My request:
On the website www.4-traders.com there's an input box located at the top center of the page for entering a company name or stock ticker symbol. The page contains code that calls a javascript function as one types into the input box. The javascript searches a database for the best matches to the text being input, and the output of the javascript function is presented as a floating list box that one can select from. The code for this component of the page is as follows:
<td class="recherche_bl">
<input type="hidden" name="lien" value="recherche">
<input onblur="GlobalSearch.ACblur();" onkeyup="GlobalSearch.ACkeyUp(event)" onkeydown="return GlobalSearch.ACkeyDown(event);" autocomplete="off" type="text" name="mots" id="autocomplete" class="inputrecherche" value="Symbol or Keyword(s)" onclick="document.recherche_menu.mots.value='';GlobalSearch.LoadHisto()">
<input type="image" src="/images/loupe_recherche.png" class="htZo" align="absmiddle" onclick="document.getElementById('noredirect').value='1'">
<input type="hidden" name="RewriteLast" value="zbat">
<input type="hidden" id="noredirect" name="noredirect" value="0">
<input type="hidden" id="type_recherche" name="type_recherche" value="0">
</td>
GlobalSearch is the javascript function I'm interested in. I'd like to get Excel VBA to somehow select from the output of the GlobalSearch function after a value is input into the form. I currently have to use sendkeys to accomplish this, which as everyone knows has a number of drawbacks and requires that an Internet Explorer windows is open at the time. Here is the code I'm currently using for this piece:
The value of Ticker is set before this part of the code.
.document refers to an Internetexplorer.Application object I have created earlier on in the code.
PauseTime is a procedure used to delay the execution of code.
The two lines involving sending a 'space' and 'backspace' key are used to get the javascript to run (it doesn't seem to run without some manual user input). Once the javascript runs I want the procedure to select the first instance in the list box, so I send a 'down' key and then an 'enter' key.
.document.recherche_menu.mots.Focus
.document.forms("recherche_menu")("mots").Value = Ticker
PauseTime (2)
Application.SendKeys (" ")
Application.SendKeys ("{BS}")
PauseTime (2)
Application.SendKeys ("{DOWN}")
Application.SendKeys ("~")
I would really appreciate some help to figure this out. I think the real issue is that I don't have a deep enough understanding of javascript to code what I need to into Excel VBA. Thanks in advance for your help.
Constantine

How to implement classic javascript functions in Meteor?

I continue working on my meteor app, and am currently facing a new problem.
I'm still not a level 100 master of Meteor.js, but I kinda start to know it.
But today I discovered but challenges :
The first is that I want my textarea to grow automatically in height
as I'm typing, exactly like facebook do it, without a drag option.
For that, I've tried to implement 2 different solutions : the first
being to call the Jquery autogrow() function, the second one being to
code my own function to modify the css number of row. Unfortunately,
none of them gave me a result.
The second challenge I face is that i want to make my
bootstrap compliant, exactly like it is described here :
http://silviomoreto.github.io/bootstrap-select/
The problem being : no matter in which js file I enable Bootstrap-select, or allow the textarea to autogrow(), nothing happens.
So here is my question : when I build a meteor app, where and how do i implement such function from bootstrap and JQuery ? What are the good habits to have, the tips I should know to improve my app structure and fonctionnality ?
Edit : here is my select code, when i apply the solution proposed by Ethan, i do well get the css applied, but the select doesn't deploy anymore by clicking on it.
<div class="well">
<h3>Account informations :</h3>
<label for="bio">My presentation :</label>
<textarea id="bio" rows="5" cols="100" placeholder="Present yourself (hobbies, job...)"></textarea><br>
<label for="nativeLang">I speak :</label>
<select class="show-tick" id="nativeLang" data-style="btn-primary" data-live-search="true" data-max-options="2" multiple>
{{#each isoLangs}}
{{>isoLang}}
{{/each}}
</select><br>
<label for="learningLang">I want to practice :</label>
<select class="" id="learningLang" data-style="btn-primary" data-live-search="true" multiple>
{{#each isoLangs}}
{{>isoLang}}
{{/each}}
</select><br>
</div>
Thanks you,
David

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

Javascript - concatenate field value to onclick button link?

I have an issue I need to fix on an existing app that I didn't initially write. Here is a snippet of code that doesn't do what it is intended to do. What it is supposed to do is take the value of the field and upon clicking "Search", append that to the redirection to pass in the querystring to the destination page:
<form name="frm_someform">
<input type="text" name="f_date" id="f_date"/>
<input type="button" value="Search" onclick="parent.location='runreport.asp?date=' + document.frm_someform.elements['f_date'].value); + '"/>
</form>
Now, as you javascript folks can plainly see, the concatenation doesn't work. I've searched high and low for how to properly concatenate, but something isn't translating correctly (in my head). Note that if I take out the concatenation, the redirection works fine, so there is something with that causing the issue. Yes, of course in the example above, I could simply make the form submit the proper value with a real 'submit' button, but I have whittled the code down here for simplicity - it is much more complex than the example I have above.
(*Note, I successfully tested concatenation through other javascript functions, but the possibility exists that the purely inline code must be different)
Thanks in advance,
Beems
Please, try this:
<form name="frm_someform">
<input type="text" name="f_date" id="f_date"/>
<input type="button" value="Search" onclick="parent.location='runreport.asp?date='+ document.getElementById('f_date').value"/>
</form>

Categories