Submit Button to Populate On page text - html

I am looking for a way that I can create custom text on an HTML page dependent on user input from a submit form. I've looked at similar threads online but can't figure out how to do this on my own page.
Basically I have a text area with this default text "My name is and I want to give $10 to charity".
If I have a submit form button how do I get it to take the name entered from the form and then put that value in to the portion of the text?
Thanks
Andrew

This is probably what you are looking for:
http://jsfiddle.net/NbuF6/2/
Basically, you have a textarea (id: final-text) and an input (id: name). The button (this can be changed to the form's onsubmit function if you want to) calls the following JavaScript function to fill the textarea:
function fill_textarea() {
document.getElementById('final-text').value = 'My name is ' + document.getElementById('name').value + ' and I want to give $10 to charity';
}

Related

advanced custom field (ACF) Repeater + Contact Form 7

I have a Repeater field which creates "jobs"
each job has title, text as sub-fields
and also a contact form 7 form which sends jobs applications.
I want to add hidden field which will also send the sub-field "title"
so whenever form is submitted we know which job the sender sent the application from
Tried to use:
Contact Form 7 Dynamic Text Extension
but it is not working with ACF as far as I'm concern
any help will be appreciated
you could use CF7's 'wpcf7_form_hidden_fields' filter before your form is displayed,
add_filter('wpcf7_form_hidden_fields', 'add_job_title');
function add_job_title($hidden){
//$current_job is the currenlty job loaded.
$hidden['job_title']= $current_job->sub_title;
return $hidden;
}
when the form is submitted, $_POST['job_title'] will have the value of the hidden field.

Automaticly fill in text after username in login box

I'm searching for an option to fill in something automaticly after a username in the login box like: perry#test
So #test should be always there after your username.
This is what we use right now.
You cannot automatically append the value on an input box with HTML alone, you need Javascript.
If you use jquery, you can just append the text inside the input box when the value inside the input box is changed.
$( "#input" ).change(function() {
$('#input').val($('#input').val() + '#test.com');
});
Codepen example: https://codepen.io/Washable/pen/JOLPJK
Here is a suggestion
Divide input box into columns and left column is actual input box where user can enter the username and right column can be a default text which holds the text #test
else you have to get to know when the user is done entering the username and then you can append the #test for that text(using javascript, jquery or angularjs etc).

Is there any way to override a mailto field with another field?

AKA, if I have two fields (one radio button group and one textarea that only appears if the "other" radio button is pressed) how would I make it so the input from the text area overrides the "other" button having it's value placed in the mailto?
E.g., I want this to happen:
field1=text from text area
NOT this:
field1=other
field2=text from text area
Could I set the value of the "other" radio button in field1 to the text coming from the text area?
Alternatively, could I do anything to prevent a certain field from appearing in the mailto fields?
In future, please ensure you present SO with a code issue, not a general question or request. However, you would use a JQuery change handler, like so:
$('#mastertextboxid').on('input', function(){ //executes every time master's text is updated
$('#slavetextboxid').value($('#mastertextboxid').text()); //updates the values
})
This will overwrite any text in the slave textbox when the master textbox is changed, but the User will still be able to input into the slave textbox. It's known as One way data binding.

copy value entered in unbound textbox to label after pressing button

I have an unbound text box on my form which the admin can enter a date of when records were last updated. I want this date to be copied to a label after pushing a button so that it holds the date instead of it do disappear after closing the form.
does anyone know if this is possible and how it is possible?
For creating a variable that can be used AFTER the form is closed:
Create a new module (in code window, click 'Insert | Module'
Insert the variable name(s) and types you want available everywhere. i.e.
Global dtLastUpdated As Date
Global strSaveSomeName As String
Save the module as mdl_Globals
Add code wherever needed to set the variable, then can reference anywhere.
If for use during the form, use the following: where 'lblForUnbound' is the Label field and 'txtUnbound' is your unbound text box
Me.lblForUnbound.Caption = Me.txtUnbound.Text

HTML form doesn't contain a form submit button name when using the Enter key

My ASP.NET MVC 3 website has code on the server side that checks for the name of the submit button clicked to submit the form. The code works when I use the mouse to click the button, but when I use the Enter key, the form gets posted, but the request doesn't contain the name of the submit button.
Is there some attribute I can set on the submit button to get this to work for both clicking and using the Enter key?
Here is my HTML:
<div>Search:</div>
<form action="/Item/Search" method="post">
<input class="fulltextsearch" id="FTSearchText" name="FTSearchText" type="text" value="" />
<input type="submit" value="Go" name="FTSearchButton" />
</form>
</div>
On the server side, I have a custom model binder that uses the following code to determine if the user clicked the submit button.
// See if the value provider has the required prefix
var hasPrefix = bindingContext.ValueProvider.ContainsPrefix(bindingContext.ModelName);
var searchPrefix = (hasPrefix) ? bindingContext.ModelName + "." : string.Empty;
var searchButton = GetValue(bindingContext, searchPrefix, "FTSearchButton");
// If this value doesn't have value, the user didn't click the button so exit
if (string.IsNullOrEmpty(searchButton)) {
return null;
}
private static string GetValue(ModelBindingContext context, string prefix, string key) {
var result = context.ValueProvider.GetValue(prefix + key);
return result == null ? null : result.AttemptedValue;
}
Here is the problem I'm having with this. I have a page that displays a list of items. I have a 'search' textbox and a submit button in an HTML form. When the user enters text in the textbox and clicks the search button or uses the enter key, the page posts the form data via HTML GET, and returns the first eight records found. The page then displays page links for additional pages. The problems is that when the user clicks a page link, the form data is all blank, and my filter information is lost (the form isn't posted with the form value when using these links). So, I end up displaying a blank list of items (blank searches returns zero results) instead of paging the data.
By adding the check for the button name in my form data, I could determine whether or not to simply page the data, or do a new look up.
I wouldn't rely on this. There are plenty of documented bugs with this scenario. Just add a hidden field with name='submit'. That way it wouldn't be too hard to recode the backend.
<input type='hidden' name='submit' value='FTSearchButton'/>
So, I researched this last night and almost got somewhere. Then this morning, I really did get somewhere and here's where I ended up.
Apparently the W3C standards for form submission are pretty lax when describing the functionality as it relates to the Enter button and submitting forms. It seems they determined that
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
So that leaves a lot of wiggle room for the browser makers. Today, virtually all browsers support using the Enter key to submit a form, whether the form contains one or more single line text input boxes.
The problem I'm having is more or less unique to Internet Explorer, and only when the form contains one, single-line text input control. For whatever reason, Microsoft decided that when Internet Explorer submits a form like this, it doesn't include the submit button's name/value pair in the post body. However, it does include the button's name/value pair if the user clicks the submit button --or-- uses the Enter key, and the form contains more than one single-line text input control.
So, the only solution I can think of or find suggested is to add a second single-line text input to my form, and then set the the style to
visibility: hidden; display: none;
My form now has two single-line text input controls, so the form will post with the name/value pair in the form body, regardless of whether or not the user used the Enter key or clicked the submit button.
So, we have a workaround that was discovered by ASP.NET developers. It seems the key/value pair is required by ASP.NET web-forms to fire the click event, so this work around isn't something new, albeit not my favorite way to do things.