How to change Input Name Attribute Value using JavaScript - javascript

I have project here were in I need to change the default name attribute value when a link is clicked. Here's my form at the moment:
<form id="searchform" action="" method="GET">
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
<input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
<div class="search-filter">
Search By: <a id="FilterByContinent">Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
</div>
</form>
======================
As you can see, the default name value of my input #intextbox is q and I want to change it to listingfields[1] when the Continent link is clicked.
so from:
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
to:
<input id="intextbox" maxlength="150" size="20" value="" name="listingfields[1]" type="text" placeholder="Insert your keyword here..">
How can I do this with JavaScript?

Your solution is here :
<form id="searchform" action="" method="GET">
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
<input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
<div class="search-filter">
Search By: <a id="FilterByContinent" onclick="changename();" >Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
</div>
</form>
<script>
function changename(){
document.getElementById('intextbox').name = "listingfields[1]";
}
</script>

Check this out:
//getting the name attribute before:
var currentName = document.getElementById("intextbox").name;
document.getElementById("intentBoxName").innerHTML = currentName;
//Now for changing the name attribute of input,
//first add an Event Listener to the continent link:
var continentLink = document.getElementById("FilterByContinent");
continentLink.addEventListener("click", function() {
document.getElementById("intextbox").name = "listingfields[1]";
//Just for showing the change in the name attribute:
var newName = document.getElementById("intextbox").name
document.getElementById("intentBoxName").innerHTML = newName;
});
<form id="searchform" action="" method="GET">
<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
<input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
<div class="search-filter">
Search By: <a id="FilterByContinent">Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
</div>
</form>
<br/>
<br/>
<h5> Name Attribute: </h5>
<div id="intentBoxName"></div>
If you had just googled "change name attribute using javascript" you'd have found the answer easily. You should spend some time looking up on google before posting it as a question. I hope my snippet above does what you were expecting.

Related

Make an image alt attribute value as a form field value

I want to add the alt value of the image as a form field value. How to do that with JS or Jquery?
Thank you
<img src="x.jpg" alt="grab me" id="ok" />
<form action="/#wpcf7-f1352-o1" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init">
<span class="image-alt"><input type="text" name="iamge-alt" value="" size="40" aria-invalid="false"></span>
<input type="submit" value="OK" class="wpcf7-submit">
</form>
.getAttribute() to grab alt property and then .forms[0] the first <form> and .elements[0] first form control (<input>) to the .value property.
const alt = document.querySelector('img').getAttribute('alt');
document.forms[0].elements[0].value = alt;
<img src="x.jpg" alt="grab me" id="ok" />
<form action="/#wpcf7-f1352-o1" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init">
<span class="image-alt"><input type="text" name="iamge-alt" value="" size="40" aria-invalid="false"></span>
<input type="submit" value="OK" class="wpcf7-submit">
</form>

get parameters from URL to html form

I created a button in html file that move to page with form:
<a class="btn goToProfile" href="{{ url_for('new_meeting', dog = dog[0] ) }}">Click here to schedule a meeting</a>
I add the parameter dog to the GET request
http://127.0.0.1:5000/new_meeting?dog=123
When I move to the new page I have a form:
<form action="/favorites/add_meeting" method="post">
<label for="time">Time:</label><br>
<input type="datetime-local" id="time" name="time">
<br>
<br>
<label for="place">Place:</label><br>
<input type="text" id="place" name="place"><br>
<br>
<label for="place">Dog ID:</label><br>
<input type="text" id="dog" name="dog" value="1" readonly><br><br>
<br>
<input type="submit" value="Submit">
</form>
How can I extract the parameter from the URL and add this to the value in the input tag?
You can find here about how to get query parameters with JavaScript
When you have parameters let's say inside dogName variable. You can change form input field with id dog like this:
document.getElementById("dog").value = dogName

Vue.js submit text button

I have a noob question.
i have a form with a text field. If i type something in, and push enter, no result. If i type something in, and push the button, i get the result i want. Can someone help me fix this - this is written in vue.js
<div class ="well">
<form class="form-inline" onsubmit="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
<input id="clickMe" type="button" value="clickme" v-on:click="searchName" />
You may add an event in your text field.
<input
type="text"
name="name"
class="form-control"
v-model="search"
v-on:keyup.enter="searchName"
/>
Or add a submit event in your form
<form
class="form-inline"
v-on:submit.prevent="searchName"
>
put your button inside the <form> tag and change the button type to submit:
<div class ="well">
<form class="form-inline" #submit.prevent="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
<input id="clickMe" type="submit" value="clickme"/>
</form>
</div>
EDIT
instead of onclick event in the button, use #submit.prevent in the form.

getElementById and multiple forms

I am having this situation with many forms (for instance I show you a coupe of them):
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content" class="form-control" required=""></textarea>
<input name="code" id="code" type="hidden" value="1180224194">
<input name="postId" id="postId" type="hidden" value="167">
<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content" class="form-control" required=""></textarea>
<input name="code" id="code" type="hidden" value="95959622661">
<input name="postId" id="postId" type="hidden" value="144">
<button class="btn btn-commenta">Say something</button>
</form>
And I have some javascript like this:
<script type="text/javascript">
$("form").submit(function (e) {
e.preventDefault();
var comment = document.getElementById("content").value;
var postId = document.getElementById("postId").value;
var code = document.getElementById("code").value;
if(comment && postId && code){
$.ajax({
type: 'POST',
...SOME AJAX
});
}
else {
console.log("error");
console.log(comment);
console.log(postId);
console.log(code);
}
return false;
});
</script>
Everything works fine when I have a single form (or when I use the first one), but when I try to get the values of the inputs in a different form than the first one, I get an error and my fields are empty.
How can I tell the script to select the values (with getElementById) of the submitted form? I tried with "this" but the console tells me "Cannot read property 'getElementById' of undefined".
The id attribute should be unique in the same document, use common classes instead like :
<form method="POST" enctype="multipart/form-data">
<textarea name="content" class="form-control content" required=""></textarea>
<input name="code" class="code" type="hidden" value="1180224194">
<input name="postId" class="postId" type="hidden" value="167">
<button class="btn btn-commenta">Say something</button>
</form>
Then get the element values using this to refer to the curren form :
var comment = $(".content", this).val();
var postId = $(".postId", this).val();
var code = $(".code", this).val();
Hope this helps.
$("form").submit(function(e) {
e.preventDefault();
var comment = $(".content", this).val();
var postId = $(".postId", this).val();
var code = $(".code", this).val();
console.log(comment);
console.log(postId);
console.log(code);
if (comment && postId && code) {
console.log("ajax query");
} else {
console.log("error");
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" class="form-control content" required=""></textarea>
<input name="code" class="code" type="hidden" value="1180224194">
<input name="postId" class="postId" type="hidden" value="167">
<br>
<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" class="form-control content" required=""></textarea>
<input name="code" class="code" type="hidden" value="95959622661">
<input name="postId" class="postId" type="hidden" value="144">
<br>
<button class="btn btn-commenta">Say something</button>
</form>
Try using different id's for different elements. Id's should always be unique. If you want to use the same name for multiple elements (e.g for styling) use a class.
I suggest changing your ID's to something like:
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content1" class="form-control" required="">
</textarea>
<input name="code" id="code1" type="hidden" value="1180224194">
<input name="postId" id="postId1" type="hidden" value="167">
`enter code here`<button class="btn btn-commenta">Say something</button>
</form>
<form method="POST" enctype="multipart/form-data">
<textarea name="content" id="content2" class="form-control" required="">
</textarea>
<input name="code" id="code2" type="hidden" value="95959622661">
<input name="postId" id="postId2" type="hidden" value="144">
<button class="btn btn-commenta">Say something</button>
</form>
https://www.w3schools.com/tags/att_global_id.asp W3Schools explains:
"The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet,
and by JavaScript (via the HTML DOM) to manipulate the element with
the specific id."

ng-model not updating my object values

I have a one-page application using angularJS.
I have in my controller a user object defined like this :
this.user = {
'name':'Robert',
'age':'30'
}
I made a form to update those informations prefilled with those user's informations on my page such like this :
<form name="userForm" ng-submit="userForm.$valid && pageCtrl.userForm(user)" novalidate>
<label for="name">Name *</label>
<input type="text" name="name" ng-model='pageCtrl.user.name' class="form-control" required/>
<label for="age">Age *</label>
<input type="text" name="age" ng-model='pageCtrl.user.age' class="form-control" required/>
<span ng-if='!userForm.$valid' class="error">Invalid form</span>
<input type="submit" value="Save my informations" class="btn btn-success"/>
</form>
My problem is the following : in the header bar of the page the username is displayed ({{pageCtrl.user.name}}).
When the user acts on the form by changing his name, this is updating before the form is saved.
I'd like to wait for the form submission to see the username updated. But i still want to get my form prefilled with user's informations.
Do you have any idea about how to do this?
Thank you by advance
You can use a copied object to only apply the changes when the user save the form :
var app = angular.module('app', []);
app.controller('pageCtrl', function() {
var vm = this;
vm.user = {
'name':'Robert',
'age':'30'
};
vm.tmpUser = {};
vm.update = function() {
vm.user = angular.copy(vm.tmpUser);
};
vm.reset = function() {
vm.tmpUser = angular.copy(vm.user);
};
vm.reset();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="pageCtrl as pageCtrl">
<form name="userForm" ng-submit="userForm.$valid" novalidate>
<label for="name">Name *</label>
<input type="text" name="name" ng-model='pageCtrl.tmpUser.name' class="form-control" required/>
<label for="age">Age *</label>
<input type="text" name="age" ng-model='pageCtrl.tmpUser.age' class="form-control" required/>
<span ng-if='!userForm.$valid' class="error">Invalid form</span>
<input type="submit" ng-click="pageCtrl.update()" ng-disabled="!userForm.$valid" value="Save my informations" class="btn btn-success" />
</form>
<pre>user = {{pageCtrl.user | json}}</pre>
<pre>tmpUser = {{pageCtrl.tmpUser | json}}</pre>
</body>
Use your ng-model to bind to a temp object , like :
this.tmpUser = {
'name':'Robert',
'age':'30'
}
Your form would be:
<form name="userForm" ng-submit="userForm.$valid && pageCtrl.userForm(user)" novalidate>
<label for="name">Name *</label>
<input type="text" name="name" ng-model='pageCtrl.tmpUser.name' class="form-control" required/>
<label for="age">Age *</label>
<input type="text" name="age" ng-model='pageCtrl.tmpUser.age' class="form-control" required/>
<span ng-if='!userForm.$valid' class="error">Invalid form</span>
<input type="submit" value="Save my informations" class="btn btn-success"/>
</form>
keep your user object :
this.user = {
'name':'Robert',
'age':'30'
}
And when you submit the form, update the user object.
Let's say this is your header,
<header><span ng-show="pageCtrl.formSubmitted">{{ pageCtrl.user.name }}</span></header>
In the pageCtrl.userForm(user) function just make the pageCtrl.formSubmitted true once your form is successfully submitted. Cool things, is you can use this boolean for other purposes as well.

Categories